Создайте файл PDF из html с помощью angular2/typescript

Ответ 1

Если вы хотите использовать его в процессе производства, вы определенно не хотите зависеть от ссылки на интернет-ссылку в вашем index.html, например, предложенной @khalil_diouri.

Итак, чтобы правильно использовать его в среде Angular2/Typescript сначала установите его из npm

npm install --save jspdf

Если вы используете SystemJS, сопоставьте его в своем файле конфигурации

map: {
    "jspdf": "node_modules/jspdf/dist/jspdf.min.js"
}

Установить пакет определения: (если не установлен)

npm install typings --global

Установить файлы определений:

typings install dt~jspdf --global --save

И, наконец, импортируйте его в файл component.ts

import jsPDF from 'jspdf'
...
    let doc = new jsPDF();
    doc.text(20,20,'Hello world');
    doc.save('Test.pdf');
...

Ответ 2

как ответ

эта ссылка необходима для импорта содержимого jsPDF

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> // to use jsPDF for registring pdf file

то у вас компонент .ts

вы делаете это

declare let jsPDF;

@Component({
    template: `
        <button
          (click)="download()">download
        </button>
        `
})

export class DocSection {


    constructor() {
    }

    public download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }

}

Ответ 3

метод AddHtml устарел:

Источник: plugins/addhtml.js, строка 12 Запрещены: Это заменяет векторный API. см. здесь

Отображает элемент HTML в объект canvas, который добавляется в PDF

Для этой функции требуется html2canvas или rasterizeHTML

Ответ 4

Зачем использовать файлы определения (также известные как декларации)?

Чтобы использовать внешние библиотеки javascript (например, jsPDF) с приложениями Angular2 (которые используют Typescript), вам понадобятся файлы определения типа для этих javascript-библиотек. Эти файлы предоставляют информацию о типе (как в String, Number, boolean и т.д.) Для typescript для справки по проверке типа времени компиляции. (Поскольку javascript свободно набирается)

Другое объяснение о файлах d.ts можно найти здесь.

Как использовать

Вы можете загрузить пакет npm под названием typings, который поможет ускорить процесс. Ниже приведено краткое руководство по его использованию. После того, как вы установили типизацию, вы можете запустить:

npm run -- typings install dt~jspdf --global --save

чтобы получить файл типизирования, который вы затем можете использовать в своем проекте.

Ответ 5

Я попробовал почти все пакеты npm для генерации HTML-контента в PDF. та или иная функция не работает, так как содержимое таблицы повреждено или не загружает изображения. После стольких попыток я нашел Kendo UI Angular PDF Export. Пользовательский интерфейс Kendo Angular экспорт работал для многих функций, кроме динамической загрузки изображений. Итак, я искал, чтобы решить эту проблему, но, к сожалению, я не нашел надлежащей документации для решения этой проблемы. После стольких следов я решил это.

Следуйте приведенным ниже инструкциям, чтобы сгенерировать HTML-контент в PDF с помощью пакета Kendo UI Angular export npm.

Загрузите и установите пакет.

npm install --save @progress/kendo-angular-pdf-export @progress/kendo-drawing

Для Angular 6 установите пакет rxjs-compat. Для получения дополнительной информации обратитесь к статье об обновлении до Angular 6.

npm install --save rxjs-compat @6

Для Angular 5 или более ранней версии установите RxJS v5. 5+.

npm install --save [email protected]^5.5

После установки импортируйте PDFExportModule в корневой или функциональный модуль приложения.

import { NgModule } from '@angular/core'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { PDFExportModule } from '@progress/kendo-angular-pdf-export'; 

import { AppComponent } from './app.component';  



@NgModule({ 

bootstrap:[AppComponent],   

declarations: [AppComponent],    

imports:BrowserModule, PDFExportModule] }) 


export class AppModule { } 

Для полного рабочего примера, пожалуйста, прочитайте мой блог https://www.stackquery.com/articles/how-to-generate-pdf-in-angular-with-repeated-headers-images-and-watermark/75.

Приведенный выше пример блога разрешает большие динамические таблицы с автоматически повторяющимися заголовками на каждой странице и большими динамическими изображениями, а также позволяет использовать разрывы страниц между страницами.

Примечание. В приведенном выше примере не делаются снимки экрана, такие как jsPDF или другие пакеты npm. Приведенный выше пример очень эффективен, для создания PDF с высоким разрешением и высокой скоростью требуется всего менее 200 КБ.