如何在香蕉仪表板中将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>

1. 最后更新了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();
    }
);