NPM Datatable Excel 按钮未显示

Posted 2023-02-22

【中文标题】NPM Datatable Excel 按钮未显示

【英文标题】：NPM Datatable Excel button not showing

【发布时间】：2018-03-31 11:49:39

【问题描述】：

我的 Excel 按钮现在显示在数据表中。我正在使用 NPM 导入所有脚本，所有其他按钮都可以正常工作（PDF、复制、打印）。只有 Excel 不起作用。

检查我的导入：

import 'datatables.net-bs'
import 'datatables.net-buttons-bs'
import 'datatables.net-responsive-bs'
import 'datatables.net-buttons/js/buttons.colVis.js'
import 'datatables.net-buttons/js/buttons.flash.js'
import 'jszip'
import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
import 'datatables.net-buttons/js/buttons.html5.js'
import 'datatables.net-buttons/js/buttons.print.js'

pdfMake.vfs = pdfFonts.pdfMake.vfs

我的配置：

let datatableConfig = 
    responsive: true,
    "dom": '<"html5buttons"B>lTfgtip',
    "buttons": [
         extend: 'copy' ,
         extend: 'excel', 
         extend: 'excelHtml5' ,
         extend: 'pdf'  ,
         extend: 'print' 
    ]
;

$('#dataTable').DataTable(datatableConfig)

如果我将https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js 直接放在我的 HTML 中，它会起作用。使用import 怎么不起作用？ （是的，jszip 已经安装）

谢谢！

【参考方案1】：

require 语法遇到了同样的问题，我不得不这样做：

window.JSZip = require( "jszip" );

我不知道import 的语法，但可能类似于

import window.JSZip from 'jszip';

或

JSZip from 'jszip';

或

import JSZip from 'jszip';
window.JSZip = JSZip;

【讨论】：

感谢您的帮助！显然我们只需要暴露window.JSZip。再次感谢，它解决了我。

【参考方案2】：

如果有人不想公开jszip，现在可以在 DataTables 中将该库直接添加到 Buttons：

// import section
import $ from 'jquery';
import jszip from 'jszip';
import pdfmake from 'pdfmake';
import 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';

// add pdfmake or jszip directly to DT Buttons
$.fn.dataTable.Buttons.jszip(jszip);
$.fn.dataTable.Buttons.pdfMake(pdfmake);

Source