環境

vue3.4.0

依賴

npm install --save html2canvas  #html轉換為圖片
npm install jspdf --save #圖片生成pdf

工具類

• export-pdf.js

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default{

    exportPdf(elementId, htmlTitle) {
        var element = document.getElementById(elementId);
        html2canvas(element, {
            logging:false
        }).then(function(canvas) {
            var pdf = new jsPDF('p', 'mm', 'a4');    //A4紙，縱向
            var ctx = canvas.getContext('2d'),
                a4w = 190, a4h = 277,    //A4大小，210mm x 297mm，四邊各保留10mm的邊距，顯示區域190x277
                imgHeight = Math.floor(a4h * canvas.width / a4w),    //按A4顯示比例換算一頁影象的畫素高度
                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();//如果後面還有內容，新增一個空頁
            }

            pdf.save(htmlTitle);
        });
    }
}

 

使用

import exportPDF from "@/utils/export-pdf"

<div id="main">
	...
	...
</div>

/**
  * 匯出pdf
  */
 exportPDF(){
     exportPDF.exportPdf("main", "xxx.pdf")
 },

.end