html2Canvas 无法及时检索数据 url 以生成 pdf

Question

我在分配数据方面需要帮助 url 我从 html2canvas promise 获得了 downloadPdf() 函数中的 listingReportImg。

预期结果：

listingReportImg = data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ...

日志

listingReportImg::  undefined

listing report uri:: 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ...

listings.component.html

<button (click)="downloadPdf()">Print</button>

listings.component.ts

listingReportToDataUrl(){
    let listingReport = document.getElementById('listing-report');
    console.log("listingReport:: ", listingReport);
    html2canvas( listingReport, { useCORS: true } )
        .then(function (canvas) {
            let listingReportUri = canvas.toDataURL('image/png');
            console.log("listing report uri::", listingReportUri);
            return listingReportUri;
        });
}

downloadPdf(){
    let listingReportImg = this.listingReportToDataUrl();
    console.log("listingReportImg:: ", listingReportImg);
    pdfMake.createPdf(listingReport( listingReportImg )).download('test.pdf');
}

Answer 1

正确地从回调中返回后，

listingReportToDataUrl(){
            const listingReport = document.getElementById('listing-report')
            return html2canvas( listingReport, { useCORS: true } )
                .then((canvas) => {
                    return canvas.toDataURL('image/png')
                })
    }

你可以，

listingReportToDataUrl().then((listingReportImg  => {
    pdfMake.createPdf(listingReport( listingReportImg )).download('test.pdf')
})

html2Canvas 无法及时检索数据 url 以生成 pdf

html2Canvas unable to retrieve the data url in time for pdf generation

javascript

callback

html5-canvas

html2canvas