前端vue + docxtemplater、jszip、jszip-utils实现word模板填充数据组件

前端vue + docxtemplater实现word模板填充数据组建

首先，准备word模板，放在以下文件路径：public/templates/签到表.docx

其次，设计组建，期望传入的参数如下：

exportData：填充的数据

fileTemplete：模板路径

fileName：文件名

javascript 复制代码

import FillDoc form 'FillDoc.vue'
        <FillDoc 
        	fileName="签到记录" 
        	fileTemplete="/templates/签到表.docx" 
        	:exportData="{
                    name1: '1111111',
                    name2: '2222222',
                    name3: '33333333',
                    name4: '4444444',
                    name5: '5555555',
                    name6: '6666666',
                    date1: '2023-11-11 18:00',
                    date2: '2023-11-11 18:00',
                    list: [{
                            index: '1',
                            value1: 'AA',
                            value2: 'BB',
                            value3: 'cc',
                            value4: 'dd',
                            value5: '',
                        },
                        {
                            index: '2',
                            value1: 'AA',
                            value2: 'BB',
                            value3: 'cc',
                            value4: 'dd',
                            value5: 'dd',
                        },
                    ]
                }"></FillDoc>

最后，创建实现填充word功能的组建：fillDoc.vue

使用到第三方包：

docxtemplater
jszip
jszip-utils

安装第三方包
npm install docxtemplater jszip jszip-utils -S

实现代码如下

javascript 复制代码

<template>
  <el-button type="primary" size="mini" class="word-box" @click="exportWord">下载打印{{fileName}}</el-button>
</template>

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

    export default {
        name: 'Docx',
        props: {
            fileName: {
                type: String, // 输出文件名
                default: ''
            },
            fileTemplete: {
                type: String, // public下存放的word模板名称
                default: ''
            },
            exportData: {
                type: Object, // 导出的word数据
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                wordPreviewVisible: false
            }
        },
        methods: {
       
            // 点击导出word
            exportWord() {
                // 读取并获得模板文件的二进制内容
                JSZipUtils.getBinaryContent(this.fileTemplete, (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');
                });
            },
            readDocx(blob) {
                docx.renderAsync(blob, this.$refs.word)
                    .then(
                        (previewRes) =>{
                            console.log('docx preview:', previewRes)
                        }
                    );
            },
    }

最后，测试实现效果，成功导出填充的word文件