Vue——导出word文档

一、安装依赖项

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

二、public/word.docx

三、在组件中进行调用

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item
      label="用户名称"
      prop="userName"
      :rules="{
        required: true,
        message: '请输入用户名称',
        trigger: 'blur'
      }"
    >
      <el-input v-model="form.userName"></el-input>
    </el-form-item>
    <el-form-item
      label="值"
      prop="value"
      :rules="{
        required: true,
        message: '当前项为必填项',
        trigger: 'blur'
      }"
    >
      <el-input v-model="form.userName"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        style="background-color: #1094cb;"
        type="primary"
        @click="onSubmit('form')"
        >导出</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
//import docxtemplater from "docxtemplater";//会导致项目在IE中白屏，，，
import JSZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      form: {
        userName: "",
        value: ""
      },
      table:[{
			name:"aaa",
			value:"111"
		},{
			name:"bbb",
			value:"222"
		}]
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.exportWord();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    exportWord() {
      let _this = this;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent("word.docx", function(
        error,
        content
      ) {
        // word.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建一个JSZip实例，内容为模板的内容
        let zip = new JSZip(content);
        // 创建并加载docxtemplater实例对象
        var docxtemplater = require('docxtemplater');//使用这种方式引入，在IE中不会白屏，但是导出Word仍会报错，，，未解决
        let doc = new docxtemplater().loadZip(zip);
        // 设置模板变量的值
        doc.setData({
          ..._this.form,
          table
        });
        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 }));
          this.$message.error("导出报表失败");
          throw error;
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "测试.docx");
      });
    }
  }
};
</script>

四、最终呈现效果结果