У меня есть компонент (Angular 6), который представляет собой агрегацию нескольких компонентов. Это создает длинный HTML (я использую Bootstrap 4). Теперь я хочу преобразовать этот HTML в PDF. Я искал по всему миру и нашел много решений, которые работают на jsPDF. Требование состоит в том, чтобы создать четкий макет, как он отображается в HTML (чтобы пользователи могли выбирать, копировать и т.д.). Но решения, которые я нашел, либо пытаются добавить строки текста вручную, что невозможно в моем сценарии; или они конвертируют (растеризовать?) формат HTML в формат. Кроме того, я хочу сохранить форматирование и шрифты и стиль моего HTML.
Преобразование HTML в PDF в Angular 6
Ответ 1
Лучшее возможное решение, которое я мог придумать до сих пор.
Вам нужно будет установить следующие пакеты из npm
import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
htmltoPDF()
{
// parentdiv is the html element which has to be converted to PDF
html2canvas(document.querySelector("#parentdiv")).then(canvas => {
var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
pdf.addImage(imgData,0,0,canvas.width, canvas.height);
pdf.save('converteddoc.pdf');
});
}
UPDATE:
Придумал другое решение. Я не смог разбить его на страницы формата А4, но мне удалось создать один файл PDF.
Пакеты:
import domtoimage from 'dom-to-image';
import * as jsPDF from 'jspdf';
downloadPDF()
{
var node = document.getElementById('parentdiv');
var img;
var filename;
var newImage;
domtoimage.toPng(node, { bgcolor: '#fff' })
.then(function(dataUrl) {
img = new Image();
img.src = dataUrl;
newImage = img.src;
img.onload = function(){
var pdfWidth = img.width;
var pdfHeight = img.height;
// FileSaver.saveAs(dataUrl, 'my-pdfimage.png'); // Save as Image
var doc;
if(pdfWidth > pdfHeight)
{
doc = new jsPDF('l', 'px', [pdfWidth , pdfHeight]);
}
else
{
doc = new jsPDF('p', 'px', [pdfWidth , pdfHeight]);
}
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
doc.addImage(newImage, 'PNG', 10, 10, width, height);
filename = 'mypdf_' + '.pdf';
doc.save(filename);
};
})
.catch(function(error) {
// Error Handling
});
}
Ответ 2
См. Это, вы можете получить некоторые идеи PDF-угловой
Ответ 3
С некоторыми усилиями, лучшее решение, с которым мы с моей командой придумали наши собственные проблемы с угловым HTML для PDF, заключались в отправке необработанного HTML-кода в наш Java-API, а затем с использованием wkhtmltopdf (https://github.com/wkhtmltopdf/wkhtmltopdf) с Java-оболочка (https://github.com/jhonnymertz/java-wkhtmltopdf-wrapper). Преодоление нескольких ошибок (например, убедитесь, что на сервере установлены правильно установленные шрифты, все правильно закодировано, выяснение разрывов страниц и их работа), мы смогли точно воспроизвести нашу страницу и использовать наш угловой HTML в качестве универсального шаблона (который изменения, основанные на разных сценариях). Это непростой путь, но он дает отличные результаты в производственной среде на уровне предприятия, как только вы это выясните.
Следует отметить, что мы также пробовали jspdf (и другие библиотеки) и пришли к аналогичным выводам, как и вы сами: они просто не делали того, что нам нужно было делать. Надеюсь, это поможет.
Ответ 4
Попробуйте использовать бэкэнд-сервис для этого, например Thymeleaf или itextpdf с Spring Boot.
Ответ 5
Сначала установите следующее: 1) npm install jspdf 2) npm install html2canvas
Позже импортируйте и используйте следующий код
public captureScreen() {
const data = document.getElementById('invoice');
html2canvas(data).then(canvas => {
const imgWidth = 208;
const pageHeight = 295;
const imgHeight = canvas.height * imgWidth / canvas.width;
const heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png');
const pdf = new jspdf('p', 'mm', 'a4');
const position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
pdf.save('invoice.pdf');
});
}
Ответ 6
Я попробовал почти все пакеты 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 КБ.