html2Canvas無法及時檢索pdf生成的數據url

Question

我需要幫助，將從html2canvas承諾獲得的數據url分配給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') 
})