Vue-根据word模板导出word文档

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

一、基础知识

要实现前端纯js导出word文档，我们需要用到docxtemplater、jszip-utils、file-saver三个组件，接下来简单介绍一下折三个组件。

1、docxtemplater

介绍

docxtemplater是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。

参考链接：docxtemplater.readthedocs.io/en/latest/i…

用到的API

• new window.docxtemplater：
  创建docxtemplater实例对象，返回一个新的docxtemplater对象
• loadZip(zip)：
  docxtemplater对象加载zip实例
  注意：必须从jszip的2.x版本向该方法传递一个zip实例
• setData(Tags):
  设置模板变量的值
• render()：
  此函数用模板变量的值替换所有模板变量
• getZip()：
  此函数返回代表docxtemplater对象的zip

2、jszip-utils

介绍

jszip-utils是与jszip一起使用的跨浏览器的工具库
参考链接：stuk.github.io/jszip-utils…

用到的API

• getBinaryContent()：
  读取并获得模板文件的二进制内容

3、jszip

介绍

jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。
参考链接：stuk.github.io/jszip/

用到的API

• new JSZip()：
  创建一个JSZip实例
• generate()：
  此函数可以生成一个zip文件（不是一个真实的文件，而是在内存中的表示）

4、FileSaver

介绍

FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。
参考链接：
www.cnblogs.com/yunser/p/76…
www.npmjs.com/package/fil…

用到的API

• saveAs(blob, "1.docx")：
  将目标文件对象保存为目标类型的文件，并命名

二、操作步骤

1、 安装

接下来就是安装以上组件工具，安装命令如下

// 安装 docxtemplater
cnpm install docxtemplater pizzip  --save

// 安装 jszip-utils
cnpm install jszip-utils --save 

// 安装 jszip
cnpm install jszip --save

// 安装 FileSaver
cnpm install file-saver --save

// 没有cnpm可以使用npm

2、 引入

在需要用到的组件中引入以上工具

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

3、 创建模板文件

我们要先创建一个模板文件，事先定义好格式和内容。docxtemplater 之前介绍到是通过标签的形式来填充数据的,规则可以参考
docxtemplater.readthedocs.io/en/latest/i…

三、 组件全部代码展示

<template>
    <div class="word-box" @click="exportWordDocx">导出word</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: ''
        },
        // word模板名称
        fileTemplete: {
            type: String,
            default: ''
        },
        // word数据
        wordData: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        // 点击导出word
        exportWordDocx() {
            // 读取并获得模板文件的二进制内容
            JSZipUtils.getBinaryContent('./static/file/' + 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.wordData
                });
                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>

以上就是根据word模板导出word文档的代码了，记录一下，温故而知新！