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

news2025/1/24 22:54:31

首先前端导包,注意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-button
          type="warning"
          plain
          icon="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-URI
    saveAs(out, fileName)
  })
}

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