快捷導(dǎo)航

vue2使用jspdf插件實(shí)現(xiàn)頁(yè)面自定義塊pdf下載方式

更新時(shí)間：2026年04月23日 09:14:59 作者：前端探險(xiǎn)家

本文介紹了在Vue項(xiàng)目中實(shí)現(xiàn)PDF下載功能的案例,使用了jspdf和html2-canvas插件,實(shí)現(xiàn)了點(diǎn)擊按鈕彈出下載進(jìn)度彈窗并顯示四個(gè)模塊下載進(jìn)度,下載完成后關(guān)閉彈窗的功能,文中提供了使用的插件版本和相關(guān)代碼,供讀者參考

實(shí)現(xiàn)pdf下載的環(huán)境

項(xiàng)目需求案例背景，點(diǎn)擊【pdf下載】按鈕，彈出pdf下載彈窗，顯示需要下載四個(gè)模塊的下載進(jìn)度，下載完成后，關(guān)閉彈窗即可！

項(xiàng)目使用的是Vue2，版本為^2.5.10；
jspdf插件版本為^2.5.1
html2canvas插件版本為^1.4.1

安裝jspdf插件

npm install jspdf@2.5.1
npm install html2canvas@1.4.1

在項(xiàng)目中使用

下面是在項(xiàng)目中的使用相關(guān)的代碼包括引入，狀態(tài)，以及相關(guān)函數(shù)，模版的代碼就直接省略掉了；僅供大家參考；

import JsPDF from "jspdf";
import html2Canvas from "html2canvas";

 data(){
   return {
     pdfDownLoadStatus:false,
     pdfDownLoadSteps:[],
   }
 }

點(diǎn)擊事件以及相關(guān)函數(shù)

//點(diǎn)擊pdf下載按鈕事件
 downPdf(){
	 //pdf下載狀態(tài)開(kāi)啟
	 this.pdfDownLoadStatus = true;
	 //需要截屏的區(qū)域，用在渲染pdf下載彈窗進(jìn)度里面的內(nèi)容
	 //code為頁(yè)面下載區(qū)域的id
	 this.pdfDownLoadSteps = [
        { code: "idxxx1", name: "xx基本信息", status: "wait" },
        { code: "idxxx2", name: 'xx列表', status: "wait" },
        { code: "idxxx3", name: 'xx效果', status: "wait" },
        { code: "idxxx4", name: 'xx意見(jiàn)', status: "wait" },
      ];
      //打開(kāi)pdf下載進(jìn)度彈框，這里就這個(gè)彈窗模版中代碼就省略掉了
      this.$refs.pdfDownloadModal.open();
      //pdf下載相關(guān)函數(shù)
      this.getPdf('下載文件名稱(chēng)');
 }，

 async getPdf(title){
      let PDF = new JsPDF({
        unit: 'pt',
        format: 'a4',
        orientation: 'p',
      });
      let A4_WIDTH = 595.28
      let A4_HEIGHT = 841.89
      //pdf添加內(nèi)容y軸起始位置
      let position = 0
      //判斷是否有下載內(nèi)容
      if (this.pdfDownLoadSteps && this.pdfDownLoadSteps.length > 0) {
        //y：pdf截屏區(qū)域的下標(biāo)
        for (let y = 0 ; y < this.pdfDownLoadSteps.length ; y++) {
          //折疊面板
          let item = this.pdfDownLoadSteps[y];
          //開(kāi)始
          item.status = 'valid';
          //將折疊面板轉(zhuǎn)為canvas元素添加到pdf實(shí)例
          await this.toCanvasPanel(PDF, position, document.querySelector("#" + item.code), A4_WIDTH, A4_HEIGHT).then((data)=>{
            position = data.pdfPosition;
            this.generatePdf(item, this.pdfDownLoadSteps, y, title, PDF);
          });
        }
      }
 },

 /**
 * 生成PDF
  * @param item 當(dāng)前區(qū)域下載狀態(tài)
  * @param pdfDownLoadSteps 截屏的區(qū)域名
  * @param y 當(dāng)前區(qū)域下標(biāo)
  * @param title 文件標(biāo)題
  * @param PDF
  */
  generatePdf(item, pdfDownLoadSteps, y, title, PDF) {
      //完成
      item.status = 'success';
      //最后一個(gè)截屏區(qū)域
      if (y == this.pdfDownLoadSteps.length - 1) {
        PDF.save(title + '.pdf');
        //pdf下載狀態(tài)取消
        this.pdfDownLoadStatus = false;
      }
  },

 /**
 * 將折疊面板轉(zhuǎn)為canvas元素添加到pdf實(shí)例
  * @param PDF
  * @param position 添加內(nèi)容的起始位置
  * @param dom
  * @param imgWidth 圖片寬度
  * @param pdfHeight pdf頁(yè)高
  * @returns {Promise<unknown>}
  */
  toCanvasPanel(PDF, position, dom, imgWidth, pdfHeight){
      var p = new Promise(function(resolve, reject){
        html2Canvas(dom, {
          background: "#FFF"
        }).then(function (canvas) {
          //獲取canavs轉(zhuǎn)化后的寬度
          let contentWidth = canvas.width;
          //獲取canavs轉(zhuǎn)化后的高度
          let contentHeight = canvas.height;
          //高度轉(zhuǎn)化為PDF的高度
          let imgHeight = imgWidth / contentWidth * contentHeight;
          //轉(zhuǎn)化成圖片Data
          let pageData = canvas.toDataURL('image/jpeg', 1.0);
          //PDF當(dāng)前頁(yè)剩余高度
          let pageResidue = pdfHeight - position;
          //添加圖片到pdf
          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
          //圖片高度>PDF當(dāng)前頁(yè)剩余高度
          if (imgHeight > pageResidue) {
            //圖片剩余高度=圖片高度-當(dāng)前頁(yè)剩余高度
            let imgResidue = imgHeight - pageResidue;
            while (imgResidue > 0) {
              //下一頁(yè)起始位置=圖片剩余高度-圖片高度
              position = imgResidue - imgHeight;
              //圖片剩余高度-PDF高度,獲取圖片剩余高度
              imgResidue -= pdfHeight;
              //增加分頁(yè)
              PDF.addPage();
              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
            }
          }
          //下次截屏的起始位置
          position = position.add(imgHeight);
          resolve({'state': false, 'pdfPosition': position});
        })
      });
      return p;
  },