如何在 Banana Dashboard 中将 HTML 页面导出为 PDF 文件

Question

我正在尝试从香蕉仪表板生成一个 PDF 文件。

我对文件进行了以下更改：

1. 在 index.html 文件的主 div 中添加了一个 div id

<div ng-view id="myDiv"></div>

1. 将生成PDF所需的两个js文件添加到香蕉应用程序的vendor文件夹中

html2canvas.js pdfmake.js

1. 更新require.config.js文件指向这两个新的js文件如下：

   html2canvas: ../vendor/html2canvas,

   pdfmake: ../vendor/pdfmake

2. 更新了dashLoader.html 文件以在摊牌列表中包含另一个项目，即“Export to PDF”

<li ng-show="dashboard.current.loader.save_local"> <a href="" alt="Export to File" title="Export to PDF" class="link" ng-click="dashboard.to_pdf()"> <i class="icon-download"></i> Export to PDF</a> <tip>Export layout and data to PDF file</tip> </li>

5. 最后更新dashboard.js文件如下：

   this.to_pdf = function () { var inclusions = document.getElementById('myDiv'); console.log(inclusions); html2canvas(inclusions).then(function(canvas) {//this line is throwing error as html2canvas is not defined inclusions.appendChild(canvas); data_1 = canvas.toDataURL(); resolve(data_1); console.log(inclusions); }); return true; };

但是当我单击Export to PDF 选项时，我收到错误“Error: html2canvas is not defined”。请参考随附的屏幕截图。

任何关于我哪里出错的帮助将非常感谢！

Answer 1

一个独立的 Hello World html2canvas html 程序帮助解决了这个问题。调用 html2canvas 然后调用 pdfmake（或任何其他 pdf 生成库）的正确方法如下：

  html2canvas(document.getElementById('divId')).then(
    canvas =>{
    var data =canvas.toDataURL();
    var docDefiniton ={
     content:[{
      image:data,
      width:500
     }]
    };
    pdfMake.createPdf(docDefinition).open();
    }
);