Как бы вы создали загружаемый PDF-файл в приложении на стороне клиента?

Question

Одним из наших требований к инструменту администратора является создание формы, которую можно заполнить и перевести в загружаемый файл PDF. (Термины и условия с пустыми полями ввода, если быть точным).

Я немного погуглил и попытался создать форму в html и css и преобразовал ее в canvas, используя пакет html2canvas. Затем я использовал пакет jspdf, чтобы преобразовать его в файл PDF. Проблема в том, что я не могу заставить его соответствовать и изменить размер в соответствии с форматом a4 с правильными полями. Я уверен, что смогу найти какое-то рабочее решение, если потрачу на него некоторое время.

Однако мой реальный вопрос в том, как бы вы, ребята, решили это? Есть ли стороннее приложение / служба, которая делает именно это? Или вы сделали бы все это на стороне сервера? Наше текущее приложение использует Angular 7 с FireBase в качестве нашего бэкэнда.

Cheers!

Answer 1

Мне удалось использовать пакет npm pdfmake , чтобы создать динамический pdf на основе информации о пользователе, предоставленной пользователем при взаимодействии с моей формой. (Я использовал React) Он открыл PDF в новой вкладке, и пользователь может сохранить PDF. В другом приложении (все еще React),

Я использовал тот же пакет для создания квитанции, чтобы вы могли настроить размер «страницы». Мы создали PDF-файл, использовали метод getBase64 () и отправили PDF-файл в качестве вложения электронной почты.

Answer 2

 My service function:
 getEvidenceFile(id: number, getFileContent: boolean) {

 return this.http.get(environment.baseUrl + ‘upload’ + ‘/’ + id , {responseType: ‘blob’ as ‘json’})
 .map(res => res);
 }

 My component function called from the selected item of a FileDownload…
 FileDownload(event: any) {

 // const blob = await this.callService.getEvidenceFile(event.target.value, true);
 // const url = window.URL.createObjectURL(blob);

 this.callService.getEvidenceFile(event.target.value, true).subscribe(data => {

 var binaryData = [];
 binaryData.push(data);
 var downloadLink = document.createElement(‘a’);
 downloadLink.href = window.URL.createObjectURL(new Blob(binaryData));
 document.body.appendChild(downloadLink);
 downloadLink.click();

 });
 }