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

Question

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

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

在 index.html 文件

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

在香蕉应用程序的 vendor 文件夹中添加了生成 PDF 所需的两个 js 文件

html2canvas.js pdfmake.js

更新了 require.config.js 文件以指向这两个新的 js 文件，如下所示：

html2canvas: ../vendor/html2canvas,

pdfmake: ../vendor/pdfmake
更新了 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>

最终更新 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();
    }
);

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

How to Export HTML Page to a PDF File In Banana Dashboard

solr

html2canvas

lucidworks

banana

pdfmake