vue3通过模板导出员工入职登记表

摘要：之前项目中导出价格表是由后端实现，前端只需要调用接口下载word即可，后来业务改变比较大，word模版需要一直改动，后端改起来相对麻烦，后来直接前端自己定义模版，实现下载word文档。

注意点：1.模板文件使用vue-cli3的时候，放在public目录下。

             2.文件须以docx结尾。如果是doc结尾的话会报Uncaught Error: Can't find end of central directory : is this a zip file ?

            3.如果是doc结尾的模板不能直接改docx，要新建一个docx模板复制过去，不然也会报Uncaught Error: Can't find end of central directory : is this a zip file ?

模板展示图

word模版占位符用法

一、需要安装依赖

//1、docxtemplater
 
npm install docxtemplater pizzip -S
 
 
//2、jszip-utils
 
npm install jszip-utils -S
 
 
//3、pizzip
 
npm install pizzip -S
 
 
//4、FileSaver
npm install file-saver --save

二、父组件调用

<entryForm></entryForm>
import entryForm from "./entryForm.vue";

三、子组件

<template>
  <div class="entryForm">
    <el-button class="mal-40" type="primary" @click="exportWord">导出新员工入职登记表</el-button>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import Api from "api";
import dictionary from '@/utils/dictionary'

//导入包
import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
const route = useRoute();
// 这里获取结果传值
const query = route.query;
const detailId = query.id;


// 获取详情
const detailAll = ref({})
const getDetail = async () => {
  try {
    const res = await Api.employeeUpdateDetails({id:detailId})
    const { code, data } = res
    if(code == 200){
        //这里是获取导出数据
      detailAll.value = data
    }
  } catch (error) {
    const { msg } = error
    ElMessage.error(msg)
  }
};
const exportWord = async () => {
  console.log('Starting exportWord function...');
  // 读取并获得模板文件的二进制内容
    //这里填本地线下地址位置是public里的entryForm.docx文件
    // const content = await fetchTemplate("public/entryForm.docx");
    //这里是可以填线上文档的地址
    const content = await fetchTemplate("https://media/1719454190427-668.docx");
    console.log('-----', content);
    // 创建一个JSZip实例，内容为模板的内容
    let zip = new PizZip(content);
    console.log('+++++', zip);
    // 创建并加载docxtemplater实例对象
    let doc = new Docxtemplater();
    console.log('/', doc);
    doc.loadZip(zip);
    console.log('=====', doc);
    // 设置模板变量的值（把里层对象也放置第一层好使用）
    doc.setData({
      ...detailAll.value,
      ...detailAll.value.employeeInfo,
      genderName: dictionary.gender(detailAll?.employeeInfo?.gender)
    });
    console.log('设置模板变量的值', doc);
    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, '员工信息.docx');
};
const fetchTemplate = (templateUrl) => {
  return new Promise((resolve, reject) => {
    JSZipUtils.getBinaryContent(templateUrl, (error, content) => {
      if (error) {
        reject(error);
      } else {
        resolve(content);
      }
    });
  });
};

onMounted(() => {
  getDetail()
});
</script>

 ps：本地打包的时候把文件放public/entryForm.docx里正常导出，但是打包放线上的时候打包就会出问题Uncaught Error: Can't find end of central directory : is this a zip file ?，替换掉打包后的docx文件也无效。目前本地文件打包这个问题还没解决！

其他解决方法：直接把entryForm.docx文件放线上，直接用const content = await fetchTemplate("https:///1719454190427-668.docx");使用

效果图

附带一个别人出bug时候的解决方法https://www.cnblogs.com/hejun26/p/13647927.html