html2canvas для рендеринга документа PDF со стилем css с использованием angular2 / typescript

Как сгенерировать выходной файл PDF с помощью html2canvas с angular2

Я попытался импортировать файл html2canvas typescript и сделал подобное объявление, чтобы использовать его

declare let html2canvas: Html2CanvasStatic;

но я получаю, что html2canvas не определен

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

Я нашел этот машинописный файл на github html2canvas typescript

как можно использовать это для моего приложения angular2


typescript angular pdf html2canvas
person khalil _diouri    schedule 17.08.2016    source источник

Ответы (3)


arrow_upward
15
arrow_downward

Я мог бы использовать html2canvas со следующими изменениями:

package.json:

 "dependencies": {
     "html2canvas": "0.5.0-beta4",
     "@types/html2canvas": "0.5.32",
 }

После использования npm install я мог бы использовать html2canvas в своих файлах component.ts следующим образом:

import * as html2canvas from "html2canvas"

test() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        var img = canvas.toDataURL()
        window.open(img);
     }
    });

}

Без установки @types/html2canvas я мог бы использовать библиотеку через require, но не через импорт:

html2canvas = require('hmtl2canvas');
person mszalbach    schedule 25.10.2016
comment
нам нужно импортировать скрипт html2canvas в index.html - person Vignesh; 14.11.2017

arrow_upward
4
arrow_downward

Если вы используете Angular 4, вы можете включить html2canvas в список скриптов в .angular-cli.json, как показано ниже.

"scripts": [
    "../node_modules/html2canvas/dist/html2canvas.min.js"
]

После этого импортируйте его в свой класс, как показано ниже

import * as html2canvas from "html2canvas"

а затем используйте его в своих функциях, как показано ниже

html2canvas(parameters);
person Anil Agrawal    schedule 09.10.2017
comment
Если вы используете глобальный импорт скрипта через angular-cli.json, не импортируйте его в свой компонент, так как вы загрузите его дважды: github.com/angular/angular-cli/wiki/stories-global-scripts - person PaulCo; 02.04.2018

arrow_upward
1
arrow_downward

Это в дополнение к приведенному выше ответу, т.е. добавьте @ types / html2canvas к зависимостям и добавьте оператор импорта в свой код.

Однако, используя приведенный выше пример кода, я получаю ошибку в VisualStudioCode, т.е.

«onrendered» не существует в типе «Html2CanvasOptions».

Чтобы решить эту проблему, я использовал «затем», как показано ниже:

html2canvas(document.body).then((canvas) => {
  document.body.appendChild(canvas);
});
person pradeep    schedule 28.07.2017