vue導(dǎo)出少量pdf文件實(shí)現(xiàn)示例詳解

更新時(shí)間：2023年06月30日 14:31:28 作者：陶菇?jīng)?

這篇文章主要為大家介紹了vue導(dǎo)出少量pdf文件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

創(chuàng)建js文件 exportPdf.js

且需要安裝html2canvas和jspdf兩個(gè)插件；

然后將在你需要導(dǎo)出的頁面中執(zhí)行方法，

this.getPdf("html", "報(bào)表");
//參數(shù)一：導(dǎo)出范圍的id
//參數(shù)二：導(dǎo)出pdf文件的名稱

導(dǎo)出的主要代碼

我在網(wǎng)上查找了大量的代碼才寫出了這個(gè)，其他的代碼都是很淺顯，雖然也可以導(dǎo)出，但是一旦數(shù)據(jù)量過大，頁面較長導(dǎo)出的pdf文件便會(huì)白屏；

此文件解決了此問題，但是因?yàn)閷?dǎo)出的pdf做了分頁，而pdf又是由圖片轉(zhuǎn)換而來，所以分頁中會(huì)有截?cái)嗟膯栴}，暫未解決，希望大家可以指點(diǎn)。

/* 導(dǎo)出pdf文檔 */
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
 install(Vue, options) {
   Vue.prototype.getPdf = function (id, title) {
     const loading = Vue.prototype.$loading({
       fullscreen: true,
       lock: true,
       text: 'Loading',
       spinner: 'el-icon-loading',
       background: 'rgba(0, 0, 0, 0.7)'
     });
     let shareContent = document.getElementById(id), //需要截圖的包裹的（原生的）DOM 對(duì)象
       width = shareContent.clientWidth, //獲取dom 寬度
       height = shareContent.clientHeight, //獲取dom 高度
       canvas = document.createElement("canvas"), //創(chuàng)建一個(gè)canvas節(jié)點(diǎn)
       scale = 1; //定義任意放大倍數(shù) 支持小數(shù)
     canvas.width = width * scale; //定義canvas 寬度 * 縮放
     canvas.height = height * scale; //定義canvas高度 *縮放
     canvas.style.width = shareContent.clientWidth * scale + "px";
     canvas.style.height = shareContent.clientHeight * scale + "px";
     canvas.getContext("2d").scale(scale, scale); //獲取context,設(shè)置scale
     let opts = {
       scale: scale, // 添加的scale 參數(shù)
       canvas: canvas, //自定義 canvas
       logging: false, //日志開關(guān)，便于查看html2canvas的內(nèi)部執(zhí)行流程
       width: width, //dom 原始寬度
       height: height,
       useCORS: true, // 【重要】開啟跨域配置
     }
     html2Canvas(shareContent, opts).then(() => {
       var contentWidth = canvas.width;
       var contentHeight = canvas.height;
       //一頁pdf顯示html頁面生成的canvas高度;
       var pageHeight = (contentWidth / 592.28) * 841.89;
       //未生成pdf的html頁面高度
       var leftHeight = contentHeight;
       //頁面偏移
       var position = 0;
       //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
       var imgWidth = 595.28;
       var imgHeight = (592.28 / contentWidth) * contentHeight;
       var pageData = canvas.toDataURL("image/jpeg", 1.0);
       var PDF = new JsPDF("", "pt", "a4");
       if (leftHeight < pageHeight) {
         PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
       } else {
         while (leftHeight > 0) {
           PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
           leftHeight -= pageHeight;
           position -= 841.89;
           if (leftHeight > 0) {
             PDF.addPage();
           }
         }
       }
       PDF.save(title + ".pdf"); // 這里是導(dǎo)出的文件名
       loading.close();
       this.$router.go(-1)
     });
   };
 }
};