Je souhaite exporter ma page HTML en pdf en utilisant angular 6. J'ai écrit le code suivant pour le convertir en pdf
core.js:12301 ERROR Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData
at Object.x.convertStringToImageData (jspdf.min.js:50)
at Object.x.addImage (jspdf.min.js:50)
at Object.<anonymous> (jspdf.min.js:188)
at Object.options.complete (html2canvas.js:2711)
at start (html2canvas.js:2215)
at Object._html2canvas.Preload (html2canvas.js:2488)
at html2canvas.js:2719
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:13842)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
Obtenir l'erreur suivante:
let dataPdf = document.getElementById('contentToPrint');
const pdf = new jspdf('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('contentToPrint'),()=>{
pdf.save('web.pdf');
});
3 Réponses :
Vous devez convertir votre image en base64.
Si vos images sont statiques, vous pouvez les convertir ici:
https://www.base64-image.de/
Si les images sont dynamiques:
Conversion d'une image en base64 en angulaire 2
Après la conversion de l'image en chaîne base64, vous pouvez la transmettre à jsPDf en tant que:
pdf.addHTML('your base64 string);
Tout a fait mais a échoué!
Je suis confronté à un problème similaire.
Il semble que vous ayez besoin de convertir votre élément DOM en PNG. Une fois que vous l'avez, vous devez le convertir en chaîne base64 et l'ajouter avec pdf.addImage()
Vous pouvez utiliser html2canvas pour convertir DOM éléments en images.
let dataPdf = document.getElementById('contentToPrint');
const pdf = new jspdf('p', 'pt', 'a4');
html2canvas(dataPdf).then((canvas) => {
let img = canvas.toDataURL('image/png');
pdf.addImage(img, 'png', 40, 90, 515, 600); //sizings here
pdf.save('web.pdf');
}
Vous pouvez faire quelque chose comme ceci
import html2canvas from 'html2canvas';
var data = document.getElementById('ELEMENT_ID');
html2canvas(data).then(canvas => {
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
//save file with specific name
pdf.save("Wallet.pdf");
});