亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Angular 中將 HTML 內容轉換為 PDF

如何在 Angular 中將 HTML 內容轉換為 PDF

泛舟湖上清波郎朗 2023-09-28 15:37:09
我正在嘗試從 HTML 內容生成 PDF 文件。contentDataURL 具有空圖像數據。我也嘗試過更改 HTML 內容,但生成了相同的空圖像。canvas.toDataURL()我的實現有什么問題嗎?PDF 文件生成工作正常。我的代碼應用程序鏈接 https://stackblitz.com/edit/angular-ivy-1aug8i<div class="test" id="test">     <button (click)="sendToPdf()">          testpdf</button> </div>         <div class="abc" id="testdivid">            <table style="width:100%">                <tr>                  <th>Firstname</th>                  <th>Lastname</th>                  <th>Age</th>                </tr>                <tr>                  <td>Jill</td>                  <td>Smith</td>                  <td>50</td>                </tr>                <tr>                  <td>Eve</td>                  <td>Jackson</td>                  <td>94</td>                </tr>              </table>         </div>import html2canvas from 'html2canvas';import jspdf from 'jspdf';sendToPdf(){  let data = document.getElementById("test");     // let data = document.getElementById("maindiv");    console.log(data);      html2canvas(data).then(canvas => {      const contentDataURL = canvas.toDataURL('image/jpeg', 1.0)      console.log(contentDataURL);        let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode      // let pdf = new jspdf('p', 'cm', 'a4'); //Generates PDF in portrait mode      pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);        pdf.save('Filename.pdf');       }); }
查看完整描述

2 回答

?
慕碼人8056858

TA貢獻1803條經驗 獲得超6個贊

重新安裝 html2canvas 后工作正常


import html2canvas from 'html2canvas';

import jspdf from 'jspdf';



sendToPdf(){

  let data = document.getElementById("test"); 

    // let data = document.getElementById("maindiv");

    console.log(data);  

    html2canvas(data).then(canvas => {

      const contentDataURL = canvas.toDataURL('image/jpeg', 1.0)

      console.log(contentDataURL);  

      let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode

      // let pdf = new jspdf('p', 'cm', 'a4'); //Generates PDF in portrait mode

      pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);  

      pdf.save('Filename.pdf');   

    }); 

}


查看完整回答
反對 回復 2023-09-28
?
嗶嗶one

TA貢獻1854條經驗 獲得超8個贊

要在 Angular13+ 中使用您的代碼,您必須添加 2 行代碼,否則會出現 Type 'null' is not allocateable to type 'HTMLElement' 錯誤:


您可以使用:


  sendToPdf() {

    let data = document.getElementById('test');

    // let data = document.getElementById("maindiv");

    console.log(data);

    if (data != null) {

      html2canvas(data).then((canvas) => {

        const contentDataURL = canvas.toDataURL('image/jpeg', 1.0);

        console.log(contentDataURL);

        let pdf = new jsPDF('l', 'cm', 'a4'); //Generates PDF in landscape mode

        // let pdf = new jspdf('p', 'cm', 'a4'); //Generates PDF in portrait mode

        pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);

        pdf.save('Filename.pdf');

      });

    }

  }


查看完整回答
反對 回復 2023-09-28
  • 2 回答
  • 0 關注
  • 142 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號