前端导出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…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...