Objetivo : tome una captura de pantalla de la página, luego haga un pdf de eso y envíe ese pdf al backend de arranque de primavera.
Implementé la funcionalidad para tomar la captura de pantalla y convertirla en pdf usando las bibliotecas de JavaScript html2canvas y pdfmake .
Problema : no sé cómo enviar el pdf generado al backend. Llegué a saber acerca de la codificación base64 pero todavía estoy confundido.
Código -
function takeSS() { html2canvas(document.body, { onrendered: function(canvas) { var data = canvas.toDataURL(); var docDefinition = { content: [{ image: data, width: 900, }] }; pdfMake.createPdf(docDefinition).download("test.pdf"); // to download } }); } El código anterior está tomando la captura de pantalla de la página convirtiéndola a pdf y descargándola. En lugar de descargarlo, ¿cómo puedo enviar este pdf al backend? ¿Necesito codificar en base64 canvas.toDataURL() ?
Editar Cambié mi código - jsFiddle
De acuerdo con los documentos de pdfmake , puede obtener el PDF generado como un Blob con el método getBlob . El Blob será una representación binaria de su PDF que puede enviar a su servidor.
Los blobs deben envolverse dentro de un objetoFormData antes de que puedan enviarse.
Editar: cambie a la última versión (1.4.1) de html2canvas . La versión anterior no funcionaba correctamente. Las últimas versiones usan Promises, lo que nos permite usar funciones asíncronas y, en mi opinión, hace que su código sea más legible.
La versión beta de pdfmake usa Promises en lugar de una función de devolución de llamada, pero la última versión estable (0.2.5) no. Pero podemos resolver esto envolviendo la devolución de llamada con una Promesa para poder seguir usando la sintaxis async/await.
async function takeSS() { const canvas = await html2canvas(document.body); const data = canvas.toDataURL(); const docDefinition = { content: [{ image: data, width: 900, }] }; const pdfDocGenerator = pdfMake.createPdf(docDefinition); const blob = await new Promise(resolve => { pdfDocGenerator.getBlob(resolve); }); const formData = new FormData(); formData.append('pdf', blob, 'test.pdf'); try { const response = await fetch('myapi-url', { method: 'POST', body: formData }); if (!response.ok) { throw new Error('POST request failed'); } const message = await response.text(); console.log(message); } catch (error) { console.error(error); } }