vue项目保存页面为pdf 、word

vue项目保存页面为pdf 、word

pdf下载

• 下载依赖

npm install html2canvas

npm install jspdf

• 公用方法

// 导出页面为PDF格式
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  // pdfDom
  install(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下载

1. 下载依赖

npm install pizzip

npm install docxtemplater

npm install jszip-utils

npm install file-saver

docxtemplater-image-module-free  // 需要导出图片时

2. 如何使用

需要先本地创建导出后的word 文档模版
这样导出后的格式是自己可以控制的 不会有样式丢失的问题
模版如下图

// 点击导出word
    exportWord: 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图片处理

// 绘制echrts
    initChart(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, jpeg
        pixelRatio: 2, // 导出的图片分辨率比例，默认为 1。
        backgroundColor: "#fff", // 导出的图片背景色，默认使用 option 里的 backgroundColor
        excludeComponents: ["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;
    },

// 点击导出word
    exportWord: 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");
        }
      );
    },

• 图片模版