纯前端导出 图片 ，PDF，WORD格式文件

导出图片

需要的插件

import html2canvas from "html2canvas";

generatorImage : function() {
      html2canvas(this.$refs.printform, {
        allowTaint: true,
        taintTest: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
        scale: 4, //按比例增加分辨率
      }).then((canvas) => {
        let link = document.createElement("a");
        link.href = canvas.toDataURL("image/jpeg", 1.0); //下载链接
        link.setAttribute(
          "download",
          `工 作 周 报 ${this.y}年${this.m}月${this.d}日.jpeg`
        );
        link.style.display = "none"; //a标签隐藏
        document.body.appendChild(link);
        link.click();
      });
    }

导出PDF

需要的插件

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

generatorPDF : function() {
      let title = `工 作 周 报 ${this.y}年${this.m}月${this.d}日`;
      let id = "#bjlydxxacenterweeklyExport";
      html2canvas(document.querySelector(id), {
        allowTaint: true,
        taintTest: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 4,
        scale: 4,
      }).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();
            }
          }
        }
        PDF.save(title + ".pdf");
      });
    }

导出WORD

创建模板文件

我们要先创建一个模板文件，事先定义好格式和内容。docxtemplater 是通过标签的形式来填充数据的，简单的数据我们可以使用{} + 变量名来实现简单的文本替换。

简单的文本替换

//如果在模板中，定义
hello {name}
//在设置数据时，定义
{name:'chen'}
//输出
hello chen
//有点像jsp中的变量解析。

循环输出

//稍微复杂点的像表格，我们会传递一个数组。那这个表格标签实现起来挺简单的，例子如下：
模板文件，定义如下:
{#docxData}
    {name}, {date} 
{/docxData}

//设置数据时，定义如下：

{
    "docxData": [
        { name :"y", date: 2022},
        { name :"m", date: 07},
        { name :"d", date: 22}
    ]
}

//最终实现效果如下：

y, 2022 
m, 07 
d, 22

// 如果数组中的都是字符串，不是对象类型，比如数据结构如下

{
   "docxData": [
       "y",
       "m",
       "d"
   ]
}

//那么，模板文件中应该这样设置

{#docxData} {.} {/docxData}

//最终的文件内容如下：

y m d

条件选择

//用法与循环相同，{#xx}{xx}{\xx}如果xx存在就显示xx;
{#a}
    {a}
{/a}

word模板且必须是.docx，不能是.doc
docxtemplater 不支持jszip，会有报错，因此要使用PizZip
模板的路径要写正确，不然会报错找不到文件
模板文件推荐放在静态目录文件下。使用vue-cli2的时候，放在static目录下。
使用vue-cli3的时候，放在public目录下。
因为我在使用的时候，放入.vue文件的同级目录下，发现会读不到模板。
模板数据都是一个对象

需要的插件

// npm i docxtemplater pizzip jszip-utils file-saver

import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";

exportWord : function() {
      let _this = this;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent("/word.docx", function (error, content) {
        // 抛出异常
        if (error) {
          throw error;
        }

        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip);
        // 设置模板变量的值，对象的键需要和模板上的变量名一致，值就是你要放在模板上的值
        let docxData = {
          y: _this.y,
          m: _this.m,
          d: _this.d,
          entity: _this.entity,
        };
        doc.setData({
          ...docxData,
        });

        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          };
          console.log(JSON.stringify({ error: e }));
          throw error;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, `工 作 周 报 ${_this.y}年${_this.m}月${_this.d}日.docx`);
      });
    }

简单小案例： github.com/JLeChen/vue…