关于vue.js:vuecli4-使用docxtemplater导出word超详细

28次阅读

共计 3438 个字符,预计需要花费 9 分钟才能阅读完成。

我的项目需要:前端层面实现导出 word 性能
我的项目筹备:

  • vue 脚手架我的项目(vue-cli4)
  • 插件:docxtemplater pizzip jszip jszip-utils file-saver
1. 装置依赖:
npm install  docxtemplater pizzip --save  // 解决 docx 模板
npm install  jszip-utils --save
npm install  jszip@2.6.1 --save   
npm install  file-saver --save  // 解决输入文件
  • 坑 1:执行 npm install jszip –save 会下载最新版本导致报错,必须指定版本号,亲测 2.6.1 版本可行
2. 创立 word 模板:public/test.docx
  • vuecli3/vuecli4 在 public 文件下寄存 word 模板 test.docx;vuecli2 在 static 文件下寄存 word 模板 test.docx;
  • word 模板示例:
  • 坑 2:如果间接在代码编辑器内通过新建文件的形式创立 test.docx 前面会报错,应该和文件编码格局无关,所以须要进入我的项目文件夹内右键新建 docx 文件,test.docx 内编辑后编辑器内能够看到 pulic 文件下多了一个~$test.docx 文件;呈现这个文件夹根本就 okay 了
3. 封装导出 word 组件:src/components/export2word.vue
<template>
  <div>
    <div class="word-box" @click="exportWord">word</div>
  </div>
</template>

<script>
import Docxtemplater from 'docxtemplater';
import JSZip from 'jszip';
import JSZipUtils from 'jszip-utils';
import {saveAs} from 'file-saver';

export default {
  name: 'Docx',
  props: {
    fileName: {
      type: String,   // 输入文件名
      default: ''
    },
    fileTemplete: {
      type: String,  // public 下寄存的 word 模板名称
      default: ''
    },
    exportData: {
      type: Object,  // 导出的 word 数据
      default: () => {}
    }
  },
  methods: {
    // 点击导出 word
    exportWord() {
      
      // 读取并取得模板文件的二进制内容
      JSZipUtils.getBinaryContent(this.fileTemplete + '.docx', (error, content) => {
        // 抛出异样
        if (error) throw error;
        // 创立一个 JSZip 实例,内容为模板的内容
        let zip = new JSZip(content);
        // 创立并加载 docxtemplater 实例对象
        let doc = new Docxtemplater();
        doc.loadZip(zip);
        // 设置模板变量的值
        doc.setData({...this.exportData});
        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.fileName + '.docx');
      });
    },
  },
}
</script>
4. 页面应用 word 组件:src/views/page.vue
<template>
  <div class="page">
    <Download
      class="download"
      :fileName="fileName"
      :fileTemplete="fileTemplete"
      :exportData="exportData"
    />
  </div>
</template>

<script>
import Download from '@/components/export2word.vue';

export default {data() {
    return {
      fileName: '2021 年度销售业绩报告',
      fileTemplete: 'test',
      exportData: {
        "code": "value",
        "data": {
          "dataArr0": {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
          },
          "dataArr1": {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
          },
          "dataArr2": {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
          },
          "dataArr3": {
            "obj1": {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            },
            "obj2": {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            },
            "obj3": {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            },
             "key2": "value2",
             "key3": "value3",
          },
          "dataArr4": [
            {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            },
            {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            },
            {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            },
            {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            },
            {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            }
          ],
          "dataArr5": {
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
            "key1": "value1",
          }
        }
      },
    }
  },
  components: {Download,},
}
</script>

<style>
.page {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  user-select: none;
}
.page .download {
  border: 1px solid #000;
  padding: 5px 10px;
  height: 50px;
  margin-left: 100px;
  cursor: pointer;
}
</style>
5. 填充 word 模板数据:
  • 填充数据依据渲染数据的构造而定,这里提供了数组和对象数据结构

    解析变量:{变量名}
    循环:{# 数组名}
     {元素名 1}{元素名 2}....
    {/ 数组名}
    条件:{# 条件}
     {变量}
    {/ 条件}
  • 坑 3:留神应用 JS 对象点语法是拜访不到变量的,对象格局数据拜访{# 父对象名}{子属性}{/ 父对象名}

论断

好好啃官网,就是看起来好烦,附上官网供你们持续烦:https://docxtemplater.com/doc…

正文完
 0