Puedo convertir mi código HTML en un objeto BLOB como PDF.
var that = this; var doc = new jsPDF('p', 'pt', 'a4'); var htmlString = '<div class="container"> <img src="base64image" alt="Image"> <input value="testing"><p> Paragraph</p> <label class="bold" for="fname">Vehicle</label></div>'; doc.fromHTML(htmlString, 20, 20, {}, function (bla) { doc.save('saveDOC.pdf'); // After downloading PDF i can see image and Label. But i cant see my input values. },0); // Below code is to convert HTML into Blob as PDF var blob = new Blob([doc.output("blob")], { type: "application/pdf" }); En el código anterior, la variable htmlString contiene <img/> , <input/> , <label/> . Cuando intento descargar el objeto BLOB como PDF, obtengo un PDF en blanco . Pero cuando elimino <img/> , <input/> entonces puedo ver el contenido en PDF de objeto BLOB.
A continuación se muestra el código para convertir BLOB a PDF.
const downloadFile = (blob, fileName) => { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = fileName; document.body.append(link); link.click(); link.remove(); setTimeout(() => URL.revokeObjectURL(link.href), 7000); }; downloadFile(new Blob([doc.output("blob")]), "document.pdf");¿Cómo puedo obtener imágenes y valores de entrada en un PDF descargado desde un objeto BLOB?
Gracias de antemano.
Hay 2 cosas que debe saber sobre jsPdf que podrían ser su problema:
Respecto a las imágenes. jsPDf intente leer la imagen y ponerla en el PDF usando JavaScript. Debido a los estándares de la política de seguridad de contenido, jsPdf no puede agregar imágenes que existen en otros dominios. (A menos que lo permitan). La página web puede incrustar esas imágenes en la página, pero JavaScript no tiene acceso al contenido de esas imágenes. Es como un IFRAME. Puede agregar incrustar otro sitio web, pero no puede acceder a él. Piense en alguien que incrustará YouTube y podrá obtener su nombre de usuario de Google. Es imposible. Lo mismo para las imágenes. Si usa los datos como en el ejemplo, tal vez haya un problema sin codificar la imagen (no proporcionó su entrada)
En cuanto a los campos de entrada. jsPdf no lee el texto en las entradas. No es parte del HTML, es solo el estado actual (incluso si lo coloca en el atributo de valor). Además, jsPdf no lee el color del enlace (si lo visitó o no ..., solo es el estado). Entonces, en su caso, le sugiero que transforme todos los campos de entrada en texto simple con el mismo estilo (puede usar elementos DIV ...)