vue页面中,通过接口获取json返回值,并导出到Excel中;

news/2024/6/29 21:07:33

vue页面中,通过接口获取json返回值,并导出到Excel中;

注意事项:

  • 1、json中的key翻译成对应标题;
  • 2、过滤掉json中不需要的字段;

1、接口返回的json:

{"errcode": 0,"data": {"total": 3,"items": [{"hospital": "医院1","department": "心内科","num": 10},{"hospital": "医院2","department": "心内科","num": 4},{"hospital": "医院3","department": "体检","num": 3}]},"errmsg": "成功"
}

2、安装 xlsx 库:

npm install xlsx

3、定义方法:

<template><div><button @click="handleExportXls">导出Excel</button></div>
</template><script>
import * as XLSX from 'xlsx'export default {data() {return {titleMapping: { // key映射成对应的titlehospital: '医院',department: '科室',num: '数量',},excludedKeys: ['num'], // 需要过滤的key};},methods: {handleExportXls() {console.log('导出到Excel')try {const res= await axios.get('YOUR_API_URL');if (res.errcode == 0) {console.log(res.data.items)var chartList = res.data.itemsconsole.log('数据长度:' + chartList.length)const transformedData = res.data.items.map((item) => {const transformedItem = {}for (const key in item) {this.excludedKeys.forEach((key) => delete item[key]) //过滤掉不需要的keyif (key in this.titleMapping) {//key映射成对应的标题transformedItem[this.titleMapping[key]] = item[key]}}return transformedItem})this.exportToExcel(transformedData)}} catch (error) {console.error(error);}},exportToExcel(listData) {const worksheet = XLSX.utils.json_to_sheet(listData)const workbook = XLSX.utils.book_new()XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')const excelBuffer = XLSX.write(workbook, {bookType: 'xlsx',type: 'array',})const data = new Blob([excelBuffer], { type: 'application/octet-stream' })const fileName = '报表.xlsx'if (window.navigator && window.navigator.msSaveOrOpenBlob) {// For IEwindow.navigator.msSaveOrOpenBlob(data, fileName)} else {// For other browsersconst url = window.URL.createObjectURL(data)const link = document.createElement('a')link.href = urllink.download = fileNamelink.click()window.URL.revokeObjectURL(url)}},}
};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

Node.js单点登录SSO详解:Session、JWT、CORS让登录更简单

文章目录 一、SSO介绍1、使用SSO的好处 二、中间件介绍1、Express安装导入使用 2、cors安装导入配置 3、express-session安装导入配置使用 4、jsonwebtoken安装导入使用 5、jwt和session对比 三、SSO实现方案1、安装依赖2、结构3、实现原理 三、示例代码1、nodejs端 server/ind…

黑苹果EFI详细配置说明

先上网址: https://dortania.github.io/OpenCore-Install-Guide/installer-guide/opencore-efi.html 1: 了解作用 ACPI作用: 总结: ACPI是UEFI引导方式和操作系统之间的硬件抽象接口,概述了硬件设备,如 USB 控制器、CPU 线程、嵌入式控制器、系统时钟等 硬件设备识别和驱动:…

MySQL实训--原神数据库

原神数据库 er图DDL/DML语句查询语句存储过程/触发器 er图 DDL/DML语句 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;DROP TABLE IF EXISTS artifacts; CREATE TABLE artifacts (id int NOT NULL AUTO_INCREMENT,artifacts_name varchar(255) CHARACTER SET utf8 COLLATE …

linux笔记10--编辑器之神VIM

文章目录 1. 简单介绍① 为什么叫vim② linux常见的编辑器③ 注意事项④ 其它 2. 操作模式的划分① 两种 -- 国际上普通模式(命令操作模式)插入模式 ② 三种 -- 国内普通模式如何进入与退出界面 插入模式如何进入与退出界面 命令模式如何进入与退出界面常见的命令模式 ③ 区别④…

idea中使用springboot进行开发时遇到的工程结构问题汇总

idea中的工程结构和eclipse中不同&#xff0c;但是配置的内容都是一样的。 IDEA中也就是这个页面&#xff0c;快捷键ctrlaltshifts 如果在eclipse中&#xff0c;经常会遇到jre和jdk不正确的情况&#xff0c;但IDEA中这个问题很少&#xff0c;但是IDEA中会经常由于未正常配置根…

UDP编程

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 UDP是面向消息的协议&#xff0c;如果通信时不需要建立连接&#xff0c;数据的传输自然是不可靠的&#xff0c;UDP一般用于多点通信和实时的数据业务…