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

news/2024/6/26 20:57:19

首先前端导包,注意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的值,记得配合修改:(自己研究一下立马就懂了)
另外自己的模板如果不弄页眉页脚的话,第二页是不显示页眉页脚的,所以要注意
在这里插入图片描述

注意,此模板文件必须放在项目中的public文件夹下 !!!


http://lihuaxi.xjx100.cn/news/1479040.html

相关文章

gradio使用transformer模块demo介绍1:Text Natural Language Processing

文章目录 文本生成 Text Generation自动完成 Autocomplete情感分析 Sentiment Analysis命名实体识别 Name Entity Recognition NER多语种翻译文本生成 Text Generation import gradio as gr from transformers import pipelinegenerator = pipeline(text-generation, model=&l…

HOT100打卡—day10—【DP】—最新8.24(剩7题)

1 70. 爬楼梯 70. 爬楼梯 一次做&#xff0c;AC代码&#xff1a; 疑问&#xff1a;怎么判断用搜索还是dp&#xff1f;这题&#xff0c;我没有受过dp训练所以第一反应是用dfs搜索&#xff0c;找到所有符合要求的叶子。 class Solution { public:int dp[50]; // step1&…

Nginx 使用 lua-nginx-module 来获取post请求中的request和response信息

如果想要在nginx中打印出 http request 的所有 header&#xff0c;需要在编译nginx时开启 1、安装编译所需的依赖 apt-get install build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev2、创建下载路径 mkdir -p /opt/download3、下载所需的文件 # 不要下载…

MySQL回表是什么?哪些情况下会回表

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…

开源与专有软件:比较与对比

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

stm32 之20.HC-06蓝牙模块

原理图显示使用usart3串口使用的是PB10和PB11引脚 直接配置usart3串口协议 void usart3_init(uint32_t baud) {GPIO_InitTypeDef GPIO_InitStructureure;USART_InitTypeDef USART_InitStructure;NVIC_InitTypeDef NVIC_InitStructure;//端口B硬件时钟打开RCC_AHB1PeriphClockC…

使用devsidecar 软件解决 git因网络问题报错的

上链接&#xff1a; https://github.com/docmirror/dev-sidecar/releases 下载你系统对应的版本 安装后根据教程设置即可 解决了git提交、拉取时报以下错误&#xff1a; Failed to connect to github.com port 443 after 21051 ms: Couldnt connect to server Recv failur…

基于数据湖的多流拼接方案-HUDI概念篇

目录 一、为什么需要HUDI&#xff1f; 1. 传统技术选型存在哪些问题&#xff1f; 2. Hudi有什么优点&#xff1f; 基于 Hudi Payload 机制的多流拼接方案&#xff1a; 二、HUDI的应用场景 1. 什么场景适合使用hudi&#xff1f; 2. 什么场景不适合使用hudi&#xff1f; …