vue項目保存頁面為pdf 、word

pdf下載

• 下載依賴

npm install html2canvas npm install jspdf

• 公用方法

// 導出頁面為PDF格式 import html2Canvas from "html2canvas"; import JsPDF from "jspdf"; export default {// pdfDominstall(Vue, options) {Vue.prototype.getPdf = function (fileName, callBack) {var title = fileName;html2Canvas(document.querySelector("#pdfDom"), {allowTaint: true,useCORS: true,}).then(function (canvas) {let contentWidth = canvas.width;let contentHeight = canvas.height;let pageHeight = (contentWidth / 592.28) * 841.89;let leftHeight = contentHeight;let position = 0;let imgWidth = 595.28;let imgHeight = (592.28 / contentWidth) * contentHeight;let pageData = canvas.toDataURL("image/jpeg", 1.0);let 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();}}}console.log(1);PDF.save(title + ".pdf");console.log(2);callBack();});};}, };

• 如何實用

this.getPdf("下載的文件名", this.callback);

word下載

下載依賴

npm install pizzip npm install docxtemplater npm install jszip-utils npm install file-saver docxtemplater-image-module-free // 需要導出圖片時

如何使用

需要先本地創建導出后的word 文檔模版 這樣導出后的格式是自己可以控制的 不會有樣式丟失的問題 模版如下圖

// 點擊導出wordexportWord: function (callBack) {let _this = this;// 讀取并獲得模板文件的二進制內容JSZipUtils.getBinaryContent("helpCenter.docx", function (error, content) {if (error) {throw error;}// 創建一個PizZip實例，內容為模板的內容let zip = new PizZip(content);// 創建并加載docxtemplater實例對象let doc = new docxtemplater();doc.loadZip(zip);// 設置模板變量的值doc.setData({dataList: _this.dataList,});try {// 用模板變量的值替換所有模板變量doc.render();} catch (error) {// 拋出異常let e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties,};throw error;}// 生成一個代表docxtemplater對象的zip文件（不是一個真實的文件，而是在內存中的表示）let out = doc.getZip().generate({type: "blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",});// 將目標文件對象保存為目標類型的文件，并命名saveAs(out, "文件名.docx");callBack();});},

• echarts圖片處理

// 繪制echrtsinitChart(id, xData, yData, yData2, type) {// console.log(id, xData, yData, type);this.rateChart = echarts.init(document.getElementById(id));// 繪制圖表this.rateChart.setOption(Options.BarSeriesOption(xData, yData, yData2, type));this.rateChart.resize(); //echarts 自適應窗口大小this.loading = false;let resBase64 = this.rateChart.getDataURL({// type: "png", // 導出的格式，可選 png, jpegpixelRatio: 2, // 導出的圖片分辨率比例，默認為 1。backgroundColor: "#fff", // 導出的圖片背景色，默認使用 option 里的 backgroundColorexcludeComponents: ["toolbox"], // 忽略組件的列表，例如要忽略 toolbox 就是 ['toolbox'],一般也忽略了'toolbox'這欄就夠了});this.echartsList.map((item) => {if (item.chartId === id) {item.img = resBase64;}});// 監聽屏幕縮放window.addEventListener("resize", () => {this.rateChart.resize();});this.$forceUpdate();},// 導出echarts圖片，格式轉換base64DataURLToArrayBuffer(dataURL) {const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;if (!base64Regex.test(dataURL)) {return false;}const stringBase64 = dataURL.replace(base64Regex, "");let binaryString;if (typeof window !== "undefined") {binaryString = window.atob(stringBase64);} else {binaryString = new Buffer(stringBase64, "base64").toString("binary");}const len = binaryString.length;const bytes = new Uint8Array(len);for (let i = 0; i < len; i++) {const ascii = binaryString.charCodeAt(i);bytes[i] = ascii;}return bytes.buffer;},// 點擊導出wordexportWord: function () {//這里要引入處理圖片的插件，下載docxtemplater后，引入的就在其中了var ImageModule = require("docxtemplater-image-module-free");let _this = this;// 讀取并獲得模板文件的二進制內容JSZipUtils.getBinaryContent("echartsDownload.docx",function (error, content) {if (error) {throw error;}// 圖片處理let opts = {};opts = { centered: true };opts.getImage = (chartId, tagName) => {return _this.base64DataURLToArrayBuffer(chartId);};opts.getSize = function (img, tagValue, tagName) {//自定義指定圖像大小return [600, 200];};// 創建一個PizZip實例，內容為模板的內容let zip = new PizZip(content);// 創建并加載docxtemplater實例對象let doc = new docxtemplater();doc.attachModule(new ImageModule(opts));doc.loadZip(zip);// 設置模板變量的值doc.setData({..._this.form,imgList: _this.imgList,});try {// 用模板變量的值替換所有模板變量doc.render();} catch (error) {// 拋出異常let e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties,};throw error;}// 生成一個代表docxtemplater對象的zip文件（不是一個真實的文件，而是在內存中的表示）let out = doc.getZip().generate({type: "blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",});// 將目標文件對象保存為目標類型的文件，并命名saveAs(out, "文件名.docx");});},

• 圖片模版
  

總結

以上是生活随笔為你收集整理的vue项目保存页面为pdf 、word的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。