前端导出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);};

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

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

相关文章

nginx如何配置命令启动

nginx如何配置命令启动

我安装好nginx后&#xff0c;发现不能使用systemctl start nginx或者systemctl stop nginx来控制启停 解决方法如下 首先要建一个nginx.pid的文件 一般是建在 /var/run/这个路径下面 sudo touch /var/run/nginx.pid 添加权限 sudo chmod 644 /var/run/nginx.pid可以进入到…
阅读更多...
springboot 定时任务备份mysql数据库

springboot 定时任务备份mysql数据库

记录在Linux 系统上定时备份MySQL数据库 1、在代码中添加备份 package org.jeecg.modules.xczxhhr.job;import lombok.extern.slf4j.Slf4j; import org.quartz.Job; import org.quartz.JobExecutionContext;import java.io.BufferedReader; import java.io.File; import java…
阅读更多...
数据结构-----反射

数据结构-----反射

文章目录 反射1.定义2 用途(了解)3 反射基本信息4 反射相关的类&#xff08;重要&#xff09;4.1 Class类(反射机制的起源 )4.1.1 Class类中的相关方法(方法的使用方法在后边的示例当中) 4.2 反射示例4.2.1 获得Class对象的三种方式4.2.2 反射的使用 5、反射优点和缺点6 重点总…
阅读更多...
双周回顾#005 - 零

双周回顾#005 - 零

一件悲伤的事实&#xff0c;这两周&#xff0c;成长值为零&#xff5e;&#xff5e; 从大数据部门临时抽调到互联网部门&#xff0c;支援重构的“配置下单”项目。 一个变种的低代码架构设计&#xff0c;唯一比较有意思的是它的业务组件的设计与校验设计&#xff0c;算是学习…
阅读更多...
怎么把人物从图中抠出?分享几种好用的抠图方法

怎么把人物从图中抠出?分享几种好用的抠图方法

在日常生活中&#xff0c;我们时常需要将人物从繁杂的背景中优雅地提取出来&#xff0c;无论是为了制作一张精美的证件照&#xff0c;还是为了设计一幅引人注目的海报或宣传画。然而&#xff0c;对于许多非专业人士来说&#xff0c;这仿佛是一场与细节的捉迷藏游戏&#xff0c;…
阅读更多...
MySQL深入——23

MySQL深入——23

主机内存只有100G&#xff0c;现在对一个200G的大表进行扫描&#xff0c;会不会把数据库的内存用完。 对大表做全表扫描对Sever层的影响 假设现对一个200G的InnoDB表db1&#xff0c;做一个全表扫描&#xff0c;当然要把扫描结果保存到客户端。 InnoDB的数据时保存在主键索引…
阅读更多...
数据结构从入门到精通——顺序表

数据结构从入门到精通——顺序表

顺序表 前言一、线性表二、顺序表2.1概念及结构2.2 接口实现2.3 数组相关面试题2.4 顺序表的问题及思考 三、顺序表具体实现代码顺序表的初始化顺序表的销毁顺序表的打印顺序表的增容顺序表的头部/尾部插入顺序表的头部/尾部删除指定位置之前插入数据和删除指定位置数据顺序表元…
阅读更多...
Linux如何查看端口是否占用

Linux如何查看端口是否占用

在Linux中&#xff0c;有多种方法可以用来检查端口是否被占用。以下是一些常用的命令&#xff1a; netstat&#xff1a;这是一个非常通用的命令&#xff0c;可以用来查看所有端口的使用情况。如果你想查找特定的端口是否被占用&#xff0c;可以使用netstat命令配合grep。例如&…
阅读更多...
【MySQL】DQL

【MySQL】DQL

DQL&#xff08;数据查询语言&#xff09;用于在MySQL数据库中执行数据查询操作。它主要包括SELECT语句&#xff0c;用于从表中检索数据。 0. 基本语法 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUP BY 分组字段列表 HAVING 分组后条件列表 ORDER BY 排序字段列表 …
阅读更多...
未来医疗技术的发展方向在Python中的重要性

未来医疗技术的发展方向在Python中的重要性

未来医疗技术的发展方向在Python中的重要性体现在以下几个方面&#xff1a; 数据分析和人工智能&#xff1a;Python作为一种强大的数据分析语言&#xff0c;可以进行大规模的数据处理、分析和挖掘。在医疗领域&#xff0c;大量的医疗数据可以通过Python进行分析&#xff0c;帮助…
阅读更多...
【市工信】2024年青岛市绿色工厂、绿色工业园区等绿色制造示范申报

【市工信】2024年青岛市绿色工厂、绿色工业园区等绿色制造示范申报

科大睿智小编从青岛市工信局了解到&#xff0c;为深入贯彻绿色发展理念&#xff0c;牢固树立绿色低碳发展导向&#xff0c;进一步完善绿色制造体系&#xff0c;培育绿色制造先进典型&#xff0c;根据《工业和信息化部关于印发<绿色工厂梯度培育及管理暂行办法>的通知》&a…
阅读更多...
springcloud：3.1介绍雪崩和Resilience4j

springcloud：3.1介绍雪崩和Resilience4j

灾难性雪崩效应 简介 服务与服务之间的依赖性，故障会传播，造成连锁反应，会对整个微服务系统造成灾难性的严重后果，这就是服务故障的“雪崩”效应。 原因 1.服务提供者不可用（硬件故障、程序bug、缓存击穿、用户大量请求） 2.重试加大流量（用户重试，代码逻辑重试） 3.服…
阅读更多...
在golang中使用protoc

在golang中使用protoc

【Golang】proto生成go的相关文件 推荐个人主页&#xff1a;席万里的个人空间 文章目录 【Golang】proto生成go的相关文件1、查看proto的版本号2、安装protoc-gen-go和protoc-gen-go-grpc3、生成protobuff以及grpc的文件 1、查看proto的版本号 protoc --version2、安装protoc-…
阅读更多...
Acwing 周赛132 解题报告 | 珂学家 | 并查集 + floyd寻路

Acwing 周赛132 解题报告 | 珂学家 | 并查集 + floyd寻路

前言 整体评价 A. 大小写转换 Q: 把字符串s统一成小写字母形态 题型&#xff1a;签到 知识点: 考察字符串的API题 c可以借助transform函数&#xff0c;进行转化 #include <bits/stdc.h>using namespace std;int main() {string s;cin >> s;// 把自己转化为小写…
阅读更多...
10-Java装饰器模式 ( Decorator Pattern )

10-Java装饰器模式 ( Decorator Pattern )

Java装饰器模式 摘要实现范例 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构 装饰器模式创建了一个装饰类&#xff0c;用来包装原有的类&#xff0c;并在保持类方法签名完整性的前提下&#xff0c;提供…
阅读更多...
代购程序api接口采集商品信息接入演示示例

代购程序api接口采集商品信息接入演示示例

以下是一个使用Java编写的简单示例&#xff0c;演示如何通过API接口采集商品信息并接入到代购程序中&#xff1a; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.Reader; impor…
阅读更多...
vue使用swiper（轮播图）-真实项目使用

vue使用swiper（轮播图）-真实项目使用

一、安装 我直接安装的vue-awesome-swiper": "^3.1.3"指定版本 npm install vue-awesome-swiper3.1.3 swiper --save二、vue页面使用&#xff0c;写了一个小demo <template><div class"vue-swiper"><h1>{{ msg }}</h1><…
阅读更多...
陶瓷工业5G智能制造工厂数字孪生可视化平台，推进行业数字化转型

陶瓷工业5G智能制造工厂数字孪生可视化平台，推进行业数字化转型

陶瓷工业5G智能制造工厂数字孪生可视化平台&#xff0c;推进行业数字化转型。在陶瓷工业领域&#xff0c;5G智能制造工厂数字孪生可视化平台的应用正在改变着行业的传统生产模式&#xff0c;推动着数字化转型的进程。本文将围绕这一主题展开探讨&#xff0c;分析数字孪生可视化…
阅读更多...
Unity GC + C# GC + Lua GC原理

Unity GC + C# GC + Lua GC原理

Unity垃圾回收原理 参考文章&#xff1a;垃圾回收 (计算机科学) - 维基百科&#xff0c;自由的百科全书 (wikipedia.org) 在计算机科学中&#xff0c;垃圾回收&#xff08;英语&#xff1a;Garbage Collection&#xff0c;缩写为GC&#xff09;是指一种自动的存储器管理机制。…
阅读更多...
配置之道：深入研究Netty中的Option选项

配置之道：深入研究Netty中的Option选项

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 配置之道&#xff1a;深入研究Netty中的Option选项 前言Option的基础概念ChannelOption与Bootstrap Option常见的ChannelOption类型ChannelConfig的使用Option的生命周期不同传输协议的Option 前言 在…
阅读更多...
最新文章

Copyright @ 2022~2023