Estoy trabajando en un proyecto React .
Aquí, estoy tratando de generar un archivo PDF (factura) y subirlo a Google Drive.
El siguiente código muestra cómo traté de crear el archivo pero no pude obtener el archivo PDF que necesitaba. Me gustaría saber cómo generar el archivo PDF usando html2pdf.js lib.
function createPDF() { console.log('create PDF function works!'); let element = document.getElementById('report_component'); let opt = { margin: 1, filename: 'my-invoice.pdf', image: {type: 'jpeg', quality: 0.98}, html2canvas: {scale: 2}, jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'} }; // New Promise-based usage: // window.html2pdf().set(opt).from(element).save(); // I do not want to save/download the PDF using the web browser. // I want to get the PDF file. I tried like this; let value = window.html2pdf().set(opt).from(element).toContainer().toCanvas().toImg().toPdf().output(); // const blob = new Blob([value], { type: 'application/pdf'}); let file = new File([value], 'my-invoice.pdf', { type: 'application/pdf', }); /* Here I try to implement the code to upload the PDF file to Google Drive. * First I need to get the PDF File. */ console.log(file); }Si alguien busca una respuesta para esta pregunta. aquí está;
Quería crear un informe (factura) usando HTML. A continuación puede encontrar cómo diseñé mi factura.
Nota: tenga en cuenta que incluí html2pdf.js como secuencia de comandos en HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Invoice</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> </head> <body> <section id="my_invoice"> <!-- I designed the invoice here --> </section> </body> </html>La mayoría de los tutoriales de código existentes nos muestran cómo descargar el PDF generado. Seguir el código JavaScript lo ayudará a descargar el PDF. Cuando ejecute este código, el navegador abrirá una ventana y le preguntará dónde descargar este archivo PDF. Luego, puede guardar el archivo PDF fácilmente.
let element = document.getElementById('my_invoice'); let opt = { margin: 1, filename: 'my-invoice.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' } }; // New Promise-based usage: html2pdf().set(opt).from(element).save();Pero mi requisito era ligeramente diferente. Solo quería crear el archivo PDF. Luego, haz algo con ese archivo. En mi escenario, quería cargar ese archivo PDF generado en Google Drive. El siguiente segmento de código muestra cómo uso html2pdf.js para generar el archivo PDF (blob). Tenga en cuenta que utilicé el método .outputPdf() para obtener el blob. Para obtener más información, puede consultar la documentación de la API de trabajo de html2pdf.js .
/** Creates the PDF report document. * @return Promise: resolves if PDF report generates successfully, * otherwise rejects. */ function createPDF() { return new Promise(async (resolve, reject) => { console.log('create PDF function executed!'); let element = document.getElementById('my_invoice'); let opt = { margin: 1, filename: 'my-invoice.pdf', image: {type: 'jpeg', quality: 0.95}, html2canvas: {scale: 2, useCORS: true}, jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'} }; try { const blob = await window.html2pdf().set(opt).from(element).outputPdf('blob', 'my-invoice.pdf'); resolve(blob); } catch (e) { reject(e); } }); }Espero que hayas aprendido algo. ¡Salud!