前端导出word文件的多种方式、前端导出excel文件
文章目录
- 纯前借助word模板端导出word文件 (推荐)
- 使用模板导出
- 前端通过模板字符串导出word文件
- 前端导出 excel文件,node-xlsx导出文件,行列合并
纯前借助word模板端导出word文件 (推荐)
先看效果:
这是页面中的table
这是导出后的效果:
使用模板导出
需要的依赖:
npm 自行安装,需要看官网的具体参数自行去github上面找对应的参数
"docxtemplater": "^3.46.0","pizzip": "^3.1.6","jszip-utils": "^0.1.0","file-saver": "^2.0.5",
具体代码:(先看word模板,在看代码,word中的变量和代码中 doc.setData() 是一一对应的)
<template><div class="button-box"><a-space><a-button type="danger" @click="downWord2">模板导出word文件</a-button></a-space></div>
</template><script lang="ts">
import { defineComponent, onMounted, reactive, PropType, ref } from 'vue';
import { message } from 'ant-design-vue';
import moment from 'moment';
import { downloadPDF } from '../../../../utils/utils';
import { useTable } from './hooks/useTable';
import xlsx from 'node-xlsx';import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';export default defineComponent({props: {/*** 基础数据*/baseData: {type: Object as PropType<{taskId: string;barcodeId: string;}>,default: {},},/*** 样本名称*/barcodeName: {type: String,},},setup(props) {let width = 100;const { barcodeName } = props;const { taskId, barcodeId } = props.baseData;const { tableConfig, tableConfigLeft, getDta } = useTable();onMounted(() => {barcodeName ? getDta(taskId, barcodeName) : '';});const tableValue = reactive({unit: '中国',date: undefined,sampleType: '你猜',people: '黄种人',name: '夜空',sex: '男',age: '25',work: '开发',id: '',jiance: '商品化试剂盒',date2: undefined,});const downWord2 = () => {let docxname = '导出word.docx';JSZipUtils.getBinaryContent('/test.docx', function (error: any, content: any) {// test.docx是模板(这里我放到public公共文件夹下面了)。我们在导出的时候,会根据此模板来导出对应的数据// 抛出异常if (error) {throw error;}// 创建一个PizZip实例,内容为模板的内容let zip = new PizZip(content);// 创建并加载docx templater实例对象let doc = new docxtemplater().loadZip(zip);// 设置模板变量的值 主要变量替换在这里doc.setData({name: tableValue.name,unit: tableValue.unit,date: moment(tableValue.date).format('YYYY-MM-DD'),sampleType: tableValue.sampleType,sex: tableValue.sex,age: tableValue.age,});try {// 用模板变量的值替换所有模板变量doc.render();} catch (error: any) {// 抛出异常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, docxname);});};return {downWord2,getDta,tableConfig,tableConfigLeft,tableValue,downloadPDF,value4: ref('less'),};},
});
</script><style lang="less" scoped></style>
前端通过模板字符串导出word文件
包依赖:
"file-saver": "^2.0.5",
代码
import FileSaver from 'file-saver';
import htmlDocx from "html-docx-js/dist/html-docx"
import { G } from '@/global';
const { rootUrl, rbacToken } = G;
let cycle_info1 = [{name: '事件类型',key: 'eventTypeName',},{name: '地点定位',key: 'locationAddress',},{name: '上报时间',key: 'reportTime',},{name: '人员姓名',key: 'reportUserName',},{name: '联系方式',key: 'reportUserPhone',},
]const model = (reportInfoDetail: any, list: any, eventState: any) => {// console.log(reportInfoDetail, list, eventState);return (`<!DOCTYPE html><html><head><style>.MaxBox {padding: 0px 15px;overflow-y: auto;height: 50vh;}.fromBox {}.formTitle_first {color: #1c69f7;font-size: 23px;font-weight: bold;margin-bottom: 10px;}.formTitle_second {font-weight: bold;font-size: 16px;margin-bottom: 10px;}.formContent_box {margin-bottom: 5px;}.formContent_box_title {min-width: 60px;}.display_flex {display: flex;}</style>
</head><body><div class="MaxBox"><div class="fromBox"><div class="formTitle_first">上报信息</div><div class="formTitle_second">上报信息</div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title" >事件类型:</span><span>${reportInfoDetail['eventTypeName']}</span></div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title">地点定位:</span><span>${reportInfoDetail['locationAddress']}</span></div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title">上报时间:</span><span>${reportInfoDetail['reportTime']}</span></div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title">人员姓名:</span><span>${reportInfoDetail['reportUserName']}</span></div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title">联系方式:</span><span>${reportInfoDetail['reportUserPhone']}</span></div><div class="formTitle_second">图片附件</div><div class="formContent_box">${reportInfoDetail['picIds']?.map((res1: any, idx1: any) => {return `<img width='240' height='160' src="${rootUrl}/fyVolunteer/file/download/${res1}?rbacToken=${rbacToken}"style='margin-right:5px'/>${((idx1 + 1) % 2 == 0) ? `<br />` : ''}`})}</div><div class="formTitle_second">事件描述</div><div class="formContent_box">${reportInfoDetail['description']}</div></div>${reportInfoDetail.assignInfo.length != 0 ?`<div class="fromBox"><div class="formTitle_first">指派信息</div><div class="formTitle_second display_flex">指派信息</div><div class="formContent_box"><div class="formContent_box_title">指派单位:${reportInfoDetail.assignInfo.map((res: any, idx: any) => {return `<span style="margin-right:15px">${res.departmentName}</span>`})}</div ></div ><div class="formContent_box display_flex"><span class="formContent_box_title">指派时间:</span><span>${!!reportInfoDetail?.assignInfo[0]?.assignTime ? reportInfoDetail?.assignInfo[0]?.assignTime : ""}</span></div></div>`: ''} <div class="fromBox"><div class="formTitle_first">处置信息</div>${reportInfoDetail.handleInfo.length != 0 ?reportInfoDetail.handleInfo.map((itm: any, idx: any) => {return `<div class="formTitle_second">单位${idx + 1}:${itm['claimDepartmentName']}</div><div class="formTitle_second">签收信息</div><div class="formContent_box display_flex"style="width:32vw;justify-content: space-between;"><div><span>签收单位:${itm['claimDepartmentName']}</span></div><div><span>签收时间:${itm['claimTime']}</span></div></div ><div class="formTitle_second">图片附件</div><div class="formContent_box">${itm['handleTime'] != null ?itm['handlePicIds']?.map((res1: any, idx1: any) => {return `<img width="240" height="160"src="${rootUrl}/fyVolunteer/file/download/${res1}?rbacToken=${rbacToken}"style="margin-right:5px"/>${(idx1 + 1) % 2 == 0 ? `<br />` : ''}`}) : `<span style="color:#5558e8">无</span>`}</div><div class="formTitle_second">处置描述</div><div class="formContent_box">${itm.handleTime != null ? itm['handleDescription'] : `<span style="color:#5558e8">未上传处置</span>`}</div><div class="formTitle_second">上报信息</div><div class="formContent_box display_flex"style="width:32vw;justify-content: space-between;"><div><span>上报单位:${itm['claimDepartmentName']}</span></div><div><span>上报时间:${itm['handleTime'] != null ? itm['handleTime'] : ''}</span></div></div><br/>`}) : '无数据'}</div ><div class="fromBox"><div class="formTitle_first">其他信息</div><div class="formContent_box display_flex"><span class="formContent_box_title">信息状态:</span><span>${list[eventState - 1].desc}${reportInfoDetail?.finishTime != null ? reportInfoDetail?.finishTime : ''}</span></div><div class="formContent_box display_flex"><span class="formContent_box_title">采纳状态:</span><span>${reportInfoDetail.acceptInfo == null ? "未采纳" : `已采纳(${reportInfoDetail.acceptInfo.integral})`}</span></div></div></div >
</body >
</html >`)
}const loadFile = (info: any) => {let html = model(info.reportInfoDetail, info.list, info.eventState)let blob = new Blob([html], { type: "application/msword;charset=utf-8" });// let blob = htmlDocx.asBlob(html, { orientation: "landscape" });FileSaver.saveAs(blob, "信息管理文件.doc");
}export {loadFile
};
前端导出 excel文件,node-xlsx导出文件,行列合并
导出效果:
需要的依赖: node-xlsx
"node-xlsx": "^0.23.0",
代码:
const downXlsx = () => {let data = [[1, 222, '', '', '', ''],['', 2, 3, 4, 5, 6],['', 2, 3, 4, 5, 6],['', 2, 3, 4, 5, 6],['', 2, 3, 4, 5, 6],[22, 2, 3, 4, 5, 6],];// 行列合并规则 c:col 列 r:row 行const range0 = { s: { c: 0, r: 0 }, e: { c: 0, r: 4 } };const range1 = { s: { c: 1, r: 0 }, e: { c: 5, r: 0 } };const sheetOptions = {'!merges': [range0, range1],// cols 列宽大小'!cols': [{ wch: 5 }, { wch: 10 }, { wch: 15 }, { wch: 20 }, { wch: 30 }, { wch: 50 }],};//如果不需要格式,这里的sheetOptions可以省略不写let result = xlsx.build([{ name: 'sheet1', data }], { sheetOptions });const ab = Buffer.from(result, 'binary');const blob = new Blob([ab]);const blobUrl = URL.createObjectURL(blob);const a = document.createElement('a');a.href = blobUrl;a.download = '导出excel.xlsx';a.click();window.URL.revokeObjectURL(blobUrl);};
相关文章:

前端导出word文件的多种方式、前端导出excel文件
文章目录 纯前借助word模板端导出word文件 (推荐)使用模板导出 前端通过模板字符串导出word文件前端导出 excel文件,node-xlsx导出文件,行列合并 纯前借助word模板端导出word文件 (推荐) 先看效果…...

Linux和Windows操作系统在腾讯云幻兽帕鲁服务器上的内存占用情况如何?
Linux和Windows操作系统在腾讯云幻兽帕鲁服务器上的内存占用情况如何? 对于Linux操作系统,有用户分享了个人最佳实践来解决内存问题,包括使用Linux脚本让服务器每天重启一次,以及建议在不需要时尽量减少虚拟内存的使用。此外&…...

腾讯云4核8G的云服务器性能水平?使用场景说明
腾讯云4核8G服务器适合做什么?搭建网站博客、企业官网、小程序、小游戏后端服务器、电商应用、云盘和图床等均可以,腾讯云4核8G服务器可以选择轻量应用服务器4核8G12M或云服务器CVM,轻量服务器和标准型CVM服务器性能是差不多的,轻…...

1_SQL
文章目录 前端复习SQL数据库的分类关系型数据库非关系型数据库(NoSQL) 数据库的构成软件架构MySQL内部数据组织方式 SQL语言登录数据库数据库操作查看库创建库删除库修改库 数据库中表的操作选择数据库创建表删除表查看表修改表 数据库中数据的操作添加数…...

PoC免写攻略
在网络安全领域,PoC(Proof of Concept)起着重要的作用,并且在安全研究、漏洞发现和漏洞利用等方面具有重要的地位。攻击方视角下,常常需要围绕 PoC 做的大量的工作。常常需要从手动测试开始编写 PoC,再到实…...

c1-周考2
c1-第二周 9月-技能1.一个岛上有两种神奇动物,其中神奇鸟类2个头3只脚,神奇兽类3个头8只脚。游客在浓雾中看到一群动物,共看到35个头和110只脚,求可能的鸟类和兽类的只数2.构建一个长度为5的数组,并且实现下列要求3.构…...

express+mysql+vue,从零搭建一个商城管理系统7--文件上传,大文件分片上传
提示:学习express,搭建管理系统 文章目录 前言一、安装multer,fs-extra二、新建config/upload.js三、新建routes/upload.js四、修改routes下的index.js五、修改index.js六、新建上传文件test.html七、开启jwt验证token,通过login接…...

markdown的使用(Typora)
文章目录 markdown的使用(Typora)一.标题二.段落格式2.1 换行2.2 分割线2.3 字体2.4 上下标2.5 脚注2.6 改变字体颜色 三.列表3.1 无序列表3.2 有序列表3.3 列表嵌套3.4 任务列表 四.区块五.代码显示5.1 行内代码5.2 代码块 六.链接七.图片八.表格九.表情符号大纲十、流程图10.…...

【python】json转成成yaml中文编码异常显示成:\u5317\u4EAC\u8DEF123\u53F7
姊妹篇:【python】json转成成yaml json数据 {"name": "张三","age": 30,"isMarried": false,"children": [{"name": "小王","age": 5},{"name": "小李",&qu…...

Python 实现Excel自动化办公(中)
在上一篇文章的基础上进行一些特殊的处理,这里的特殊处理主要是涉及到了日期格式数据的处理(上一篇文章大家估计也看到了日期数据的处理是不对的)以及常用的聚合数据统计处理,可以有效的实现你的常用统计要求。代码如下࿱…...

MCTS代码
这段代码的背景是玩一个游戏。游戏的参数有NUM_TURNS,在第i回合,你可以从一个整数[-2,2,3,-3]*(NUM_TURNS1-i)中进行选择。例如,在一个4回合的游戏中,在第1回合,你可以从[-8,8,12&am…...
Java 中notify 和 notifyAll 方法介绍
1. notify 方法 notify() 方法是 Java 中 Object 类的一个方法,它用来唤醒在该对象的监视器(monitor)上等待的单个线程。如果有多个线程都在该对象上等待,则会随机唤醒其中一个线程。被唤醒的线程将会尝试重新获取对象锁ÿ…...

Leetcode :杨辉三角
给定一个非负整数 numRows,生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中,每个数是它左上方和右上方的数的和。 思路:双循环,一个是层数,一个是当前数组的生成;两侧为1,需要边界判断条件…...

MWC 2024丨美格智能CEO杜国彬出席中国联通创新成果发布会并发表主题演讲
2月26日,中国联通在MWC2024 巴塞罗那期间举办了以“算网为基,智领未来”为主题的创新成果发布会,集中展示最新的创新成果与最佳实践。 中国通信标准化协会理事长闻库、GSMA首席财务官Louise Easterbrook、中国联通副总经理梁宝俊、华为ICT销…...

个人建站前端篇(七)vite + vue3企业级项目模板
一、vite命令行创建项目 npm create vitelatest根据提示选择模板,选择vite vue3 ts即可。 二、项目连接远程仓库 git init git remote add origin https://gitee.com/niech_project/vite-vue3-template.git git pull origin master git checkout -b dev三、项目…...

centos7 安装 docker-compose
1、直接参考官方: Install Compose standalone | Docker Docs 1、安装命令 curl -SL https://github.com/docker/compose/releases/download/v2.24.6/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose 2、修改 docker-compose 执行权限 不修改执行权…...

剑指offer面试题28:对称的二叉树
#试题28:对称的二叉树 题目: 请设计一个函数判断一棵二叉树是否 轴对称 。 示例 1: 输入:root [6,7,7,8,9,9,8] 输出:true 解释:从图中可看出树是轴对称的。示例 2: 输入:root …...

JS:原型与原型链(附带图解与代码)
一、原型 写在前面: 任何对象都有原型。 函数也是对象,所以函数也有原型。 1.什么是原型 在 JavaScript 中,对象有一个特殊的隐藏属性 [[Prototype]],它要么为 null,要么就是对另一个对象的引用,该对象…...

电子电器架构新趋势 —— 最佳着力点:域控制器
电子电器架构新趋势 —— 最佳着力点:域控制器 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师…...

C++记录
常用快捷键: CTRL -向后定位 CTRL SHIFT -向前定位 1.注释:CTRLKC 2.取消注释:CTRLKU 11.调试(启动):F5 20.查找:CTRLF 21.替换:CTRLH 31.跳转到指定的某一行 1)方法1:组合键“CtrlG…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

uniapp手机号一键登录保姆级教程(包含前端和后端)
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中,如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议(2PC)通过准备阶段与提交阶段的协调机制,以同步决策模式确保事务原子性。其改进版本三阶段提交协议(3PC…...
OCR MLLM Evaluation
为什么需要评测体系?——背景与矛盾 能干的事: 看清楚发票、身份证上的字(准确率>90%),速度飞快(眨眼间完成)。干不了的事: 碰到复杂表格(合并单元…...

C# winform教程(二)----checkbox
一、作用 提供一个用户选择或者不选的状态,这是一个可以多选的控件。 二、属性 其实功能大差不差,除了特殊的几个外,与button基本相同,所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

JUC并发编程(二)Monitor/自旋/轻量级/锁膨胀/wait/notify/锁消除
目录 一 基础 1 概念 2 卖票问题 3 转账问题 二 锁机制与优化策略 0 Monitor 1 轻量级锁 2 锁膨胀 3 自旋 4 偏向锁 5 锁消除 6 wait /notify 7 sleep与wait的对比 8 join原理 一 基础 1 概念 临界区 一段代码块内如果存在对共享资源的多线程读写操作…...