RSS

  • YouTube
  • LinkedIn
  • 谷歌

数据表 + Html 5 出口按钮 + 拉拉维尔-米格 (网络包)

在你的社交媒体分享
  •  ;
  •  ;
  •  ;
  •  ;

在最后的日子里, 我遇到一个问题,试图使用 数据表 引导 4 支持将结果导出到 Excel Pdf 使用 拉拉维尔-米格. 数小时后,尝试将所有脚本协同工作, 我终于赢了. 所以, 我决定写这个小 如何 对于那些有同样麻烦的人.

首先, 我们需要一个工作拉拉维尔项目配置和运行.

让我们安装所有需要的库,下面的命令.

此安装 (而我写这个文本) jQuery 3.2, 引导 4.0, Datatables.net 1.10.19, Datatables.net按钮 1.5.6, 响应Datatables.net 2.2.3, 无字体 5.8.1, jszip 3.2.1 和 pdfmake 0.1.54.

将这些行添加到您的引导.js.

注意: 如果使用默认配置, Webpack.mix.js 将有一个指向资源/js/app.js 的条目,其中包括 boottrap.js.

了解上面的行.
window.$ = window.jQuery = require(‘jquery’); 是主要的. 它不同于原来的. 检查差异. 我们将 jQuery 对象放在窗口对象中,以便在需要追加其他 CommonJ lib 时轻松实例化它.

后, 我们需要加载引导lib. 易于制作 require(‘bootstrap’) 线.

现在开始包含数据表. 对于 ExcelHtm5 Export 必须加载 jszip. 行 窗口。JSZip = 需要( ;jszip’; ); 将 JSZip 对象追加到 window 并将其提供给数据表. 所以, 订单很重要.

现在我们可以包括数据表库. 我们将使用带引导程序的数据表 4 和 Buttons. (线 7 最多 12).

线 15 最多 17 包括 pdfMake,并且是强制性的 pdfHTML5 Export.

我们需要包括一些CSS文件太. 再次, 在默认配置中, 我们有资源/sass/app.scss文件,包括一些Sass文件. 添加以下行.

与我们的文件中的所有条目, 只是运行 npm run dev 命令进行生成 app.cssapp.js 必须包含在刀片中的文件, {{ mix(‘css/app.css’)}}{{mix(‘js/app.js’)}}.

下面是一个模板,用于检查所有脚本是否工作良好.


在你的社交媒体分享
  •  ;
  •  ;
  •  ;
  •  ;

留言

您的电子邮件地址将不会发布. 标记必填的字段 *

此网站使用 Akismet 减少垃圾邮件. 了解如何处理注释数据.