Angular 7: конвертировать HTML в PDF
Я безуспешно пытаюсь преобразовать таблицу HTML в PDF.
Я использовал для этого jsPDF, но результат действительно плохой, и я пытаюсь понять, почему.
Учитывая, что у меня есть планшет, я хочу, чтобы эта таблица была напечатана на страницах формата А4 в ландшафтном режиме (с использованием всех необходимых страниц). Моя проблема в том, что PDF состоит из изображений (и я предпочитаю текст), и эти изображения очень низкого качества.
Что я пробовал, так это:
const html = document.getElementById('resultTable');
const pdf = new jsPDF('landscape', 'px', 'a4');
pdf.addHTML(html, 0, 0, {
'width': html.clientWidth,
'height': html.clientHeight
}, () => { pdf.save('web.pdf'); });
Я уже безуспешно пытался использовать в качестве ширины и высоты размер страницы pdf (с pdf.internal.pageSize). И я уже пытался использовать «pt» и «mm» вместо «px».
Любые идеи?
Ответы 4
Это не такая уж тривиальная задача. На сервере я пытался использовать wkhtmltopdf, но в итоге искал лучшее решение, потому что с ним я не могу использовать всю мощь CSS для печати. Я думаю, что это та же проблема с инструментами на стороне клиента, такими как jsPDF, вы не получите ожидаемого и последовательного результата.
Безголовый хром в Google Cloud — мой выбор прямо сейчас.
Вот хороший обзор доступных инструментов и технологий Современное преобразование HTML в PDF
Обновлено:
Если вам нужно создать PDF-файл и вы не можете ничего установить на свой сервер, вы можете сделать это с помощью Headless Chrome и функции Google Cloud.
использование-кукловод-в-облачных-функциях Google
кукловод в firebase-google-cloud-функции
ОБНОВЛЕНИЕ 2:
И, кстати, у вас всегда есть возможность печатать в PDF в браузере. Однако я не уверен, как это работает на планшетах Android, Safari для iOS может экспортировать в PDF.
Преобразование должно быть сделано на сервере. Вы используете безголовый хром на сервере cloud.google.com/blog/products/gcp/…
В моем случае нет смысла делать это на сервере: то, что мне нужно преобразовать в PDF, - это результирующее представление, полученное пользователем после поиска. Кстати, я не могу ничего установить даже на сервер. Если я не найду какое-либо клиентское решение, вероятно, я реализую преобразование с помощью Java и iText непосредственно на серверной части.
@DeooK, ты такой худой, что даже не можешь прочитать и выучить то, что я тебе посоветовал, никто не будет делать твою работу. Я потратил много времени, пытаясь решить эту задачу. Делая это на стороне клиента, вы будете иметь много боли и противоречивых результатов. СОВЕТ: Используя безголовый хром, вы можете ОТПРАВИТЬ свой HTML или URL-адрес для результатов поиска (тех же результатов, которые просматривает пользователь) в облачную функцию, которая создаст для вас PDF. medium.com/@ebidel/… и medium.com/@ebidel/…
Да, замечательно, но... Я НЕ КОНТРОЛИРУЮ УСТАНОВКУ СЕРВЕРА. Я не могу использовать облачные функции и ничего не могу установить на маршине сервера. Я должен поместить все, что мне нужно, в приложение Java или в приложение Angular.
Вместо этого попробуйте .html().
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
integrity = "sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin = "anonymous"></script>
<script src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
function convert() {
let pdf = new jsPDF('l', 'pt', [tblWidth, tblHeight]);
pdf.html(document.getElementById('resultTable'), {
callback: function () {
// pdf.save('web.pdf');
window.open(pdf.output('bloburl')); // use this to debug
}
});
}
</script>
public downloadPdf() {
let doc = new jsPDF('p', 'pt', 'a4');
h2c(document.getElementById('printpdf')).then(function (canvas) {
let width = doc.internal.pageSize.getWidth();
let height = doc.internal.pageSize.getHeight();
let dataURL = canvas.toDataURL('image/jpeg', 1.0);
doc.addImage(dataURL, 'jpg', 0, 0, width, height, 'none');
doc.save('mypdf.pdf');
});
}
1.jspdf 2. импортировать h2c из html2canvas; 3.Highcharts с использованием этого пакета
Используйте этот способ рабочий пример stackblitz
В вашем машинописном файле
import {jsPDF} from 'jspdf';
@ViewChild('content', {static: false}) content: ElementRef;
public downloadPDF() {
const doc = new jsPDF();
const specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
const content = this.content.nativeElement;
doc.fromHTML(content.innerHTML, 15, 15, {
width: 190,
'elementHandlers': specialElementHandlers
});
doc.save('test.pdf');
}
В вашем html-файле
<div id = "content" #content>
<!-- Put your content here -->
</div>
<button (click) = "downloadPDF()">Export To PDF</button>
Не работает..Получение ошибки "ERROR TypeError: jspdf__WEBPACK_IMPORTED_MODULE_9__.jsPDF не является конструктором"
@afsarkhan10182, пожалуйста, посмотрите пример stackblitx. Это работает. см. stackblitz.com/edit/angular-html-to-pdf-пример
@dasunse Вы импортировали html2canvas или любой скрипт? Потому что проверьте ответ stackoverflow.com/questions/51518819/…
Все эти решения не применимы к моему приложению. Я не могу предположить, что пользователь будет использовать Chrome, и, конечно же, я не могу установить какое-либо другое приложение, такое как wkhtmltopdf (или даже Chrome).