vue通過插件實現PDF生成以及下載

第一步: 安裝插件

npm install --save html2canvas  //將html轉換成圖片
npm install jspdf --save　//將圖片生成pdf

第二步: 在需要的地方引入插件

import html2Canvas from "html2canvas";
import JSPDF from "jspdf";

第三步: 使用插件生成PDF

HTML代碼代碼

<div id="pdfWrap">
      //這是你要綁定的盒子,里面是你需要打印的內容
<div>

JS部分代碼

printOut() {

      let pdfDom = document.querySelector("#pdfWrap"); //這里綁定你要轉換的頁面
      
      console.log(pdfDom.offsetHeight)
      pdfDom.style.background = "#FFFFFF";
      let _this = this;
      let pdfPage = null;
      html2Canvas(pdfDom,{
                  //開始截圖,這里可以設置一些截圖時的屬性
               logging: false,
               //height:3000,
      }).then((canvas)=>{
            // 開始將圖片轉換為PDF
            var pdf = new JSPDF("p", "mm", "a4") // A4紙，縱向
            var ctx = canvas.getContext("2d")
            console.log(canvas.height)
            var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四邊各保留20mm的邊距，顯示區域170x257
            var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4顯示比例換算一頁圖像的像素高度
            var renderedHeight = 0

            while (renderedHeight < canvas.height) {
                var page = document.createElement("canvas")
                page.width = canvas.width
                page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能內容不足一頁
        
                // 用getImageData剪裁指定區域，並畫到前面創建的canvas對象中
                page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
                pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加圖像到頁面，保留10mm邊距
        
                renderedHeight += imgHeight
                if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面還有內容，添加一個空頁
                // delete page;
            }
            pdf.save('123.pdf')

      })
    },

如果HTML頁面比較長,一定要注意你綁定的dom是不是能夠完全顯示,有沒有被overflow影響,導致高度不夠,頁面不能完全被截取.