Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/412.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 导出为Pdf格式6_Javascript_Angular_Angular6_Jspdf_Html To Pdf - Fatal编程技术网

Javascript 导出为Pdf格式6

Javascript 导出为Pdf格式6,javascript,angular,angular6,jspdf,html-to-pdf,Javascript,Angular,Angular6,Jspdf,Html To Pdf,我想使用angular 6将我的HTML页面导出为pdf。 我已经写了以下代码转换成pdf let dataPdf = document.getElementById('contentToPrint'); const pdf = new jspdf('p', 'pt', 'a4'); pdf.addHTML(document.getElementById('contentToPrint'),()=>{ pdf.save('web.pdf'); }); 获取以下错误: core.j

我想使用angular 6将我的HTML页面导出为pdf。 我已经写了以下代码转换成pdf

let dataPdf = document.getElementById('contentToPrint');
const pdf = new jspdf('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('contentToPrint'),()=>{
    pdf.save('web.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)
core.js:12301错误:提供的数据不是有效的base64字符串jsPDF.convertStringToImageData
在Object.x.convertStringToImageData(jspdf.min.js:50)
在Object.x.addImage(jspdf.min.js:50)
反对。(jspdf.min.js:188)
在Object.options.complete(html2canvas.js:2711)
开始时(html2canvas.js:2215)
at Object.\u html2canvas.Preload(html2canvas.js:2488)
在html2canvas.js:2719
在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:421)
位于Object.onInvokeTask(core.js:13842)
在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:420)

您需要将图像转换为base64。

如果您的图像是静态的,您可以在此处进行转换:
如果图像是动态的:

将图像转换为base64字符串后,可以将其作为以下内容传递给jsPDf:

pdf.addHTML('your base64 string);

我也面临着类似的问题

看起来您需要将DOM元素转换为PNG。一旦有了它,就必须将其转换为base64字符串,并使用
pdf.addImage()

您可以使用
html2canvas
将DOM元素转换为图像

编辑

你可以这样做

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");
        });

什么都做了,但是失败了!
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");
        });