Vue前端如何實現生成PDF並下載功能詳解

阿新 • • 發佈：2021-10-09

1. 安裝及引入

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

在專案主檔案 main.js 中引入定義好的實現方法並註冊

import htmlToPdf from '@/utils/htmlToPdf';
// 使用 .use() 方法就會呼叫工具方法中的install方法
Vue.use(htmlToPdf);

傳送門：Vue中 Vue.use() 原理及使用

2. 封裝匯出 pdf 檔案方法

配置詳解

let pdf = new jsPDF('p','pt',[pdfX,pdfY]);
第一個引數： l：橫向  p：縱向
第二個引數：測量單位（"pt"，"mm","cm","m","in" or "px"）；
第三個引數：可以是下面格式，預設為“a4”。如需自定義格式，只需將大小作為數字陣列傳遞，如：[592.28,841.89];
		   a0 - a10
		   b0 - http://www.cppcns.comb10
		   c0 - c10
  		   dl
		   letter
		   government-letter
		   legal
		   junior-legal
		   ledger
		   tabloid
		   credit-card

pdf.addPage() 在PDF文件中新增新頁面，預設a4。引數如下：

Vue前端如何實現生成PDF並下載功能詳解

pdf.addImage() 將影象新增到PDF。引數如下：

Vue前端如何實現生成PDF並下載功能詳解

刪除某頁 pdf

let targetPage = pdf.internal.getNumberOfPages(); //獲取總頁
pdf.deletePage(targetPage); // 刪除目標頁

儲存 pdf 文件

pdf.save(`測試.pdf`);

Vue前端如何實現生成PDF並下載功能詳解

封裝匯出 pdf 檔案方法（utils/htmlToPdf.js）

// 匯出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue,options) {
    Vue.prototype.getPdf = function () {
      // 當下載pdf時，若不在頁面頂部會造成PDF樣式不對,所以先回到頁面頂部再下載
      let top = document.getElementById('pdfDom');
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }
      let title = this.exportPDFtitle;
      html2Canvas(document.querySelector('#pdfDom'),{
        allowTaint: true
      }).then(function (canvas) {
        // 獲取canvas畫布的寬高
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
	      // 一頁pdf顯示html頁面生成的canvas高度;
        let pageHeight = contentWidth / 841.89 * 592.28;
	      // 未生成pdf的html頁面高度
        let leftHeight = contentHeight;
	      // 頁面偏移
        let position = 0;
	      // html頁面生成的canvas在pdf中圖片的寬高（本例為：橫向a4紙[841.89,592.28]，縱向需調換尺寸）
        let imgWidth eLnsaTY 
= 841.89;
        let imgHeight = 841.89 / contentWidth * contentHeight;
        let pageData = cwww.cppcns.comanvas.toDataURL('image/jpeg',1.0);
        let PDF = new JsPDF('l','a4');
        // 兩個高度需要區分: 一個是html頁面的實際高度，和生成pdf的頁面高度
        // 當內容未超過pdf一頁顯示的範圍，無需分頁
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData,'JPEG',imgWidth,imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData,position,imgHeight)
            leftHeight -= pageHeight;
            position -= 592.28;
            // 避免新增空白頁
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  }
}