solrhtml2canvaspdfmakelucidworksbanana

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

I am trying to generate a PDF file out of the banana dashboard.

I have made the following changes to the files:

  1. Added a div id to the main div in index.html file

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

  1. Added two js files necessary for PDF generation into vendor folder of banana application

html2canvas.js pdfmake.js

  1. Updated the require.config.js file to point to these two new js files as below:

    html2canvas: ../vendor/html2canvas,

    pdfmake: ../vendor/pdfmake

  2. Updated the dashLoader.html file to include another item in the showdown list as '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. Finally updated the dashboard.js file as below:

    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; };

But when I click on the Export to PDF option I get the error “Error: html2canvas is not defined”. Please refer the screenshot attached.

banana export to PDF error

Any help on where I am going wrong would be very thankful!

Solution

  • A standalone Hello World html2canvas html program helped to fix this. The correct way to invoke html2canvas and then pdfmake (or any other pdf generation library) is as below:

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