当前位置：首页 > news >正文

vue若依导出word文件,简单的实现

news 2025/6/21 5:08:12

首先前端导包,注意exportDocx的导包位置要修改成你自己的

import {exportDocx} from '@/utils/docUtil/docutil.js'; 
import {addDays} from 'date-fns';
import {listGongyi} from "@/api/system/detail";

然后新建一个测试按钮

 <el-col :span="1.5"><el-buttontype="warning"plainicon="el-icon-download"size="mini"@click="generateWordDoc">导出</el-button></el-col>

接下来是js文件

    generateWordDoc(row) {const ids = row.id || this.ids;//查找后台数据库封装数据find(ids).then(response => {console.log(response.data)const data = {form: response.data,list: response.data.aaZzcgPurchases}//模板文件位置在public文件夹里exportDocx('/caigoudan.docx', data, `caigoudan.docx`)});}

然后将下面这个docutil.js文件复制到项目中,我是复制在utils/docUtil中

import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import {saveAs} from 'file-saver';/**导出docx,导出word@param { String } tempDocxPath 模板文件路径@param { Object } data 文件中传入的数据@param { String } fileName 导出文件名称*/
export const exportDocx = (tempDocxPath, data, fileName) => {// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据// 抛出异常if (error) {throw error}// 创建一个JSZip实例，内容为模板的内容const zip = new PizZip(content)// 创建并加载docxtemplater实例对象const doc = new docxtemplater().loadZip(zip)// 设置模板变量的值doc.setData({...data.form,list: data.list})try {// render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)doc.render()} catch (error) {const e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties}console.log({error: e})// The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).throw error}const out = doc.getZip().generate({type: 'blob',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}) // Output the document using Data-URIsaveAs(out, fileName)})
}

最后新建一个word模板文件,保存的格式要是docx才行哦
例如:
在这里插入图片描述
只要数据是集合,就得是{#list} 开头{/list}结尾
如果还有其他的集合,则自己修改data的值,记得配合修改:(自己研究一下立马就懂了)
另外自己的模板如果不弄页眉页脚的话,第二页是不显示页眉页脚的,所以要注意
在这里插入图片描述