Как экспортировать HTML-страницу в PDF-файл в банановой панели

Question

Я пытаюсь сгенерировать файл PDF из панели бананов.

Я внес следующие изменения в файлы:

1. Добавлен идентификатор div в основной div в файле index.html

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

2. Добавлены два js-файла, необходимых для генерации PDF, в папку vendor приложения-банана

html2canvas.js pdfmake.js

3. Обновлен файл require.config.js, чтобы он указывал на эти два новых файла js, как показано ниже:

   html2canvas: ../vendor/html2canvas,

   pdfmake: ../vendor/pdfmake

4. Обновлен файл 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();
    }
);