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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51350.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

守护进程(精灵进程)

目录 前言 1.如何理解前台进程和后台进程 2.守护进程的概念 3.为什么会存在守护进程 4.如何实现守护进程 5.测试 总结 前言 今天我们要介绍的是关于守护进程如何实现&#xff0c;可能有小伙伴第一次听到守护进程这个概念&#xff0c;感觉很懵&#xff0c;知道进程的概念&…

17.3 【Linux】systemctl 针对 service 类型的配置文件

17.3.1 systemctl 配置文件相关目录简介 服务的管理是通过 systemd&#xff0c;而 systemd 的配置文件大部分放置于/usr/lib/systemd/system/ 目录内。但是 Red Hat 官方文件指出&#xff0c; 该目录的文件主要是原本软件所提供的设置&#xff0c;建议不要修改&#xff01;而要…

C++信息学奥赛1138:将字符串中的小写字母转换成大写字母

#include<bits/stdc.h> using namespace std; int main() {string arr;// 输入一行字符串getline(cin, arr);for(int i0;i<arr.length();i){if(arr[i]>97 and arr[i]<122){char aarr[i]-32; // 将小写字母转换为大写字母cout<<a; // 输出转换后的字符}els…

linux+c+qt杂记

虚拟机网络选择&#xff1b; 桥接模式&#xff1a;设置window宿主机的IP/dns,把虚拟机设置为桥接即可。 切换到终端&#xff1a;我的是 ctrlaltFnF1&#xff1f; 问题解决&#xff1a; Ubuntu系统下载&#xff08;清华大学开源软件镜像站&#xff09;&#xff08;ubuntu-20.…

使用代理突破浏览器IP限制

一、实验目的: 主要时了解代理服务器的概念&#xff0c;同时如何突破浏览器IP限制 二、预备知识&#xff1a; 代理服务器英文全称是Proxy Server&#xff0c;其功能就是代理网络用户去取得网络信息。形象的说&#xff1a;它是网络信息的中转站&#xff0c;特别是它具有一个cac…

【Unity学习笔记】DOTween(1)基础介绍

本文中大部分内容学习来自DOTween官方文档 文章目录 什么是DOTween&#xff1f;DOSetOnTweenerSequenceTweenNested tween 初始化使用方式 什么是DOTween&#xff1f; DOTween是一个动画插件&#xff0c;Tween是补间的意思。这个插件以下简称DOT&#xff0c;DOT很方便使用&…

浅谈容器网络

1.什么是容器网络 容器网络是一种新兴的应用程序沙箱机制&#xff0c;用于家庭桌面和网络规模的 企业网络 解决方案&#xff0c;其概念与虚拟机类似。容器内部与主机和所有其他容器隔离的是一个功能齐全的 Linux 环境&#xff0c;具有自己的用户、文件系统、进程和网络堆栈。容…

汽车制造业外发文件时 如何阻断泄密风险?

汽车制造业是我国国民经济发展的支柱产业之一&#xff0c;具有产业链长、关联度高、就业面广、消费拉动大等特性。汽车制造行业景气度与宏观经济、居民收入水平和固定资产投资密切相关。 汽车制造业产业链长&#xff0c;关联度高&#xff0c;汽车制造上游行业主要为钢铁、化工…

https 的ssl证书过期处理解决方案(lighthttpd)

更换证书&#xff1a;lighthttpd 配置文件位置&#xff1a;/opt/vmware/etc/lighttpd/lighttpd.conf &#xff08;配置文件的最底部 G快速来到底部&#xff09; 方案一&#xff1a;阿里云申请免费的证书 这里公司内网环境没有配置域名&#xff0c;可以创建一个临时域名&…

IDEA启动Tomcat两个端口的方式 使用nginx进行反向代理 JMeter测试分布式情况下synchronized锁失效

目录 引出IDEA启动Tomcat两个端口的方式1.编辑配置2.添加新的端口-Dserver.port80833.service里面管理4.启动后进行测试 使用nginx进行反向代理反向代理多个端口运行日志查看启动关闭重启 分布式情况下synchronized失效synchronized锁代码启动tomcat两个端口nginx反向代理JMete…

uniapp 实现切换tab锚点定位到指定位置

1.主要使用uniapp scroll-view 组件的scroll-into-view属性实现功能 2.代码如下 <scroll-view:scroll-into-view"intoView"><u-tabsclass"tabs-list"change"tabChange":list"tabList"></u-tabs><view id"1&…

macOS - 安装 Python 及地址

文章目录 Python 官方安装包Pip3Applications - PythonMiniconda多个python环境有多种方式安装 python,比如 Python 官方包、anaconda、miniconda、brew 等 这里记录使用 Python 官方包进行安装,和 miniconda 安装方式,以及安装后 各执行文件、安装包的地址。 明确这些地址后…

Ceph入门到精通-大流量10GB/s LVS+OSPF 高性能架构

LVS 和 LVSkeepalived 这两种架构在平时听得多了&#xff0c;最近才接触到另外一个架构LVSOSPF。这个架构实际上是LVSKeepalived 的升级版本&#xff0c;我们所知道LVSKeepalived 架构是这样子的&#xff1a; 随着业务的扩展&#xff0c;我们可以对web服务器做水平扩展&#xf…

有线耳机插入电脑没声音

有线耳机插入电脑没声音 首先确保耳机和电脑都没问题&#xff0c;那就有可能是声音输出设备设置错误 右击任务栏的声音图标-打开声音设置-选择输出设备。

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

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

iview时间控件 动态不可选日期 可选择24小时范围内 时间往后退24小时

演示 html 设定 起始时间 触发on-change 方法结束时间 options 动态设置不可选择的日期。 <!-- 起始时间 --> <FormItem :label"$t(startTime)" prop"startTime"><DatePickertransfertype"datetime":placeholder"$t(pleas…

php 系列题目,包含查看后端源代码

一、弱类型比较问题 原则&#xff1a; 1.字符串和数字比较&#xff0c;字符串回被转换成数字。 "admin" 0&#xff08;true) admin被转换成数字&#xff0c;由于admin是字符串&#xff0c;转换失败&#xff0c;变成0 int(admin)0,所以比较结果是ture 2.混合字符串转…

RD35M22AT、RD35M22BL、RD35M22DL插装式泄压阀

RD28M22AL、RD28M22BL、RD28M22CL、RD28M22DT、RD28M22AT、RD35M22AT、RD35M22BL、RD35M22DL、RD35M22WL插装式泄压阀 此结构在泄压时的压力非常稳定&#xff0c;若使用在低压时,请注意通过流量,不可超过35LPM。结构最大内漏量约(5滴/分, 设定压力的85%) 压力设定达到 210 ba…

抖音seo矩阵系统源代码开发部署分享

一、 开发步骤分享 抖音SEO矩阵系统源代码开发部署分享&#xff0c;需要经验丰富的开发人员和服务器管理人员&#xff0c;以下是大致的步骤&#xff1a; 确定你需要的功能和设计&#xff0c;确定开发人员和设计师的角色和任务分配&#xff0c;以及开发进度和计划。 确定服务器…

Java可视化物联网智慧工地SaaS平台源码:人脸识别考勤

基于微服务JavaSpring Cloud Vue UniApp MySql实现的智慧工地云平台源码 智慧工地是指利用云计算、大数据、物联网、移动互联网、人工智能等技术手段&#xff0c;为建筑施工现场提供智能硬件及物联网平台的解决方案&#xff0c;以实现建筑工地的实时化、可视化、多元化、智慧化…