使用 webpack 时不显示 Datatables.net Excel 导出按钮

Posted 2023-02-22

【中文标题】使用 webpack 时不显示 Datatables.net Excel 导出按钮

【英文标题】：Datatables.net Excel export button is not displayed when using webpack

【发布时间】：2019-06-23 09:42:54

【问题描述】：

我正在使用 laravel 5.7 和 webpack 的 elixir 包装器。

我添加 Datatables.net 很好，但没有显示 Excel 导出按钮。

这是我的 vendor.js

require('datatables.net');
require('datatables.net-bs4');
require('jszip');
require('datatables.net-buttons');
require('datatables.net-buttons/js/buttons.flash.js');
require('datatables.net-buttons/js/buttons.html5.js');

但是，如果我只是将其添加到我的 html 中，则 Excel 按钮会显示 fine

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>

我发现，jszip 没有被正确要求。什么是正确的方法？

js 控制台没有错误。

jszip 被很好地下载到node_modules，就像这样

$ npm install jszip --save-dev

【参考方案1】：

这是vendor.js 工作正常：

require('datatables.net');
require('datatables.net-bs4');
window.JSZip = require('jszip');    
require('datatables.net-buttons');
require('datatables.net-buttons/js/buttons.flash.js');
require('datatables.net-buttons/js/buttons.html5.js');

【参考方案2】：

如果你不使用 Bootstrap，你应该使用这个：

var table = $('#example').DataTable( 
buttons: [
    'copy', 'excel', 'pdf'
]  );


table.buttons().container()
.appendTo( $('<#elementWhereYouNeddToShowThem>', table.table().container() ) );

【讨论】：

问题主要是关于webpack的，谢谢你的回答