Me enfrento a un problema al convertir mi página HTML a pdf y enviarla a Ajax POST como multipart/form-data . Después de revisar muchas páginas, me di cuenta de que podemos lograrlo usando el complemento jsPDF .
Pero usando jsPDF tenemos que convertir HTML a jpg (en formato base64) y luego se puede descargar a PDF.
Pero quiero convertir a formato PDF y ese PDF convertido debe enviarse a Ajax POST como multipart/form-data .
A continuación se muestra el código con el que estoy intentando ...
<script> var mywindow = window.open(); mywindow.document.write('<html><head><title>Convert to PDF</title>'); mywindow.document.write('</head><body >'); mywindow.document.write('<p>Convert this Page to PDF and send it to Ajax POST as Form</p>'); mywindow.document.write('</body></html>'); html2canvas(mywindow.document.body, { onrendered: function(canvas) { img = canvas.toDataURL("image/jpeg", 1.0); doc = new jsPDF(); doc.addImage(img, 'JPEG', 0, 0);//This is converting into jpg format in base64 format, But i want base64 in pdf format. doc.save('test.pdf'); // This is to save in local system(After getting downloaded, PDF is not displaying properly, It is very clumsy) var form = new FormData(); var blob = new Blob([img.split(",")[1]], { type: "pdf" }); // Here im trying to convert jpg to pdf But that is not working form.append("file", blob, "FSM.pdf"); form.append("fileName", "FSM.pdf"); form.append("description", "12"); $.ajax({ "url": "my_URL", "method": "POST", "timeout": 0, "headers": { "Content-Type": "multipart/form-data" }, "processData": false, "mimeType": "multipart/form-data", "contentType": false, "data": form, success: function(res) { var res; }, error: function(res) { console.log(res); } }); } }); </script> ¿Puede alguien por favor ayudarme a resolver mi problema? Necesito enviar PDF a Ajax POST como multipart/form-data
La forma más fácil de hacer esto es a través de una biblioteca externa como jsPDF y luego enviar los datos del blob en un formulario al backend similar al envío.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- CDN jsPDF --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script> </head> <body> <!-- Button to send AJAX --> <button id="btn" onclick="javascript:send()">Send Doc via AJAX</button> <script> function send() { var doc = new jsPDF(); doc.fromHTML('<h1>Hello World!</h1>', 20, 20); var formData = new FormData(); var blob = new Blob([doc.output("blob")], { type: "application/pdf" }); formData.append("file", blob, "document.pdf"); var request = new XMLHttpRequest(); request.open("POST", "/upload"); request.send(formData); } </script> </html>No estoy seguro de que printWindow tenga alguna API para hacer lo anterior.
Creo que deberías convertir la imagen a base64 y luego a Blob y enviarla al servidor. Cuando usa imágenes base64, se enviarán muchas líneas al servidor. Con blob, es solo el archivo.
Puedes usar este código a continuación:
function dataURLtoBlob(dataURL) { let array, binary, i, len; binary = atob(dataURL.split(',')[1]); array = []; i = 0; len = binary.length; while (i < len) { array.push(binary.charCodeAt(i)); i++; } return new Blob([new Uint8Array(array)], { type: 'image/png' }); };Y código de lienzo aquí:
const file = dataURLtoBlob( canvas.toDataURL("image/jpeg", 1.0) );Después de eso, puedes usar ajax con Form:
const fd = new FormData; fd.append('image', file); $.ajax({ type: 'POST', url: '/url-to-save', data: fd, processData: false, contentType: false });