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

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.mzph.cn/web/35276.shtml

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

相关文章

【人工智能学习之图像操作(二)】

【人工智能学习之图像操作&#xff08;二&#xff09;】 图像上的运算图像混合按位运算 图像的几何变换仿射变换透视变换膨胀操作腐蚀操作开操作闭操作梯度操作礼帽操作黑帽操作 图像上的运算 图像上的算术运算&#xff0c;加法&#xff0c;减法&#xff0c;图像混合等。 加减…

【FPGA项目】System Generator算法板级验证-快速搭建外围测试电路

&#x1f389;欢迎来到FPGA专栏~System Generator算法板级验证-快速搭建外围测试电路 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;FPGA学习之旅 文章作者技术和水平有限&#xff0c;如果文…

Unity接入微信小游戏授权

官方授权流程图&#xff1a; https://res.wx.qq.com/wxdoc/dist/assets/img/authorize.4981f7f3.png 这里是一个非自定义隐私授权弹窗模式的流程Demo //获取玩家微信头像等数据 public static void GetWXUserInfo() {//授权Action action null;action new Action(()>{Get…

【微服务网关——中间件实现】

1.中间件的意义 避免成为if狂魔提高复用、隔离业务调用清晰、组合随意 2.实现原理 中间件一般都封装在路由上&#xff0c;路由是URL请求分发的管理器中间件选型 基于链表构建中间件 基于责任链的实现缺点&#xff1a;实现复杂&#xff0c;调用方式不灵活 使用数组构建中间件 控…

大模型笔记1: Longformer环境配置

论文: https://arxiv.org/abs/2004.05150 首先保证电脑上配置了git. git环境配置: https://blog.csdn.net/Andone_hsx/article/details/87937329 3.1、找到git安装路径中bin的位置&#xff0c;如&#xff1a;D:\Program Files\Git\bin 找到git安装路径中git-core的…

PostgreSQL 连接器:在 SeaTunnel 中的应用与优势

在现代企业中&#xff0c;数据已经成为核心资产&#xff0c;基于开源数据集成平台SeaTunnel&#xff0c;工程师如何高效地连接和管理这些数据源&#xff0c;直接关系到企业的竞争力和运营效率。 本文将给大家介绍如何通过 JDBC PostgreSQL 数据源连接器&#xff0c;在 SeaTunne…

第15周:RNN心脏病预测

目录 前言 二、前期准备 2.1 设置GPU 2.2 导入数据 2.2.1 数据介绍 2.2.2 导入代码 2.2.3 检查数据 三、数据预处理 3.1 划分训练集与测试集 3.2 标准化 四、构建RNN模型 4.1 基本概念 4.2 搭建代码 五、编译模型 六、训练模型 七、模型评估 总结 前言 &#…

直播怎么录制视频?直播视频,3种录制方法

“今晚我最喜欢的游戏博主要进行直播&#xff0c;但我可能还要加班。怎么办&#xff0c;不想错过直播的内容&#xff01;电脑怎么才能进行直播录制视频啊&#xff1f;谁能教教我&#xff1f;” 在数字化的今天&#xff0c;直播已经成为人们获取信息和娱乐的重要途径。有时&…

执行yum命令报错Could not resolve host: mirrors.cloud.aliyuncs.com; Unknown error

执行yum命令报错 [Errno 14] curl#6 - "Could not resolve host: mirrors.cloud.aliyuncs.com; Unknown error 修改图中所示两个文件&#xff1a; vim epel.repo vim CentOS-Base.repo 将所有的http://mirrors.cloud.aliyuncs.com 修改为http://mirrors.aliyun.com。 修改…

【高考志愿】土木工程

目录 一、专业介绍 1.1 专业概述 1.2 培养目标 1.3 课程设置 二、专业优势 三、就业方向 四、报考建议 五、土木工程学科排名 高考志愿选择土木工程是一个涉及多方面因素的决策过程。以下是对土木工程专业的详细分析&#xff0c;以帮助您做出更明智的选择&#xff1a; …

趣测系统搭建APP源码开发,娱乐丰富生活的选择!

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 趣测系统提供了一个集合多种有趣测试的平台&#xff0c;如心理测试和星座测试等&#xff0c;这些测试内容富有趣味性和娱乐性&#xff0c;能够帮助大众在忙碌的生活中找到放松和娱乐的时刻…

yolov5驾驶员不规范行为检测

1 项目介绍 1.1 摘要 随着汽车工业的迅速发展和交通拥堵的加剧&#xff0c;驾驶员在行车过程中的不规范行为成为了导致交通事故频发的重要因素之一。为了减少交通事故的发生&#xff0c;保障道路安全&#xff0c;提高驾驶员的行车安全意识&#xff0c;本研究致力于实现驾驶员…

5. PyTorch+NCCL源码编译

系列文章 第1章 多机多卡运行nccl-tests 和channel获取第2章 多机多卡nccl-tests 对比分析第3章 使用tcpdump抓取rdma数据包第5章 PyTorchNCCL源码编译 目录 系列文章前言一、本地环境二、安装cudnn三、使用pytorch自带NCCL库进行编译安装1. 源码编译2. 查看版本和all_reduce测…

【机器学习】机器学习重要方法——迁移学习:理论、方法与实践

文章目录 迁移学习&#xff1a;理论、方法与实践引言第一章 迁移学习的基本概念1.1 什么是迁移学习1.2 迁移学习的类型1.3 迁移学习的优势 第二章 迁移学习的核心方法2.1 特征重用&#xff08;Feature Reuse&#xff09;2.2 微调&#xff08;Fine-Tuning&#xff09;2.3 领域适…

【启明智显分享】典型的HMI应用实现方案:帮你更好地主控选型!

HMI是操作者与机器/系统间资讯传递和交换的主要桥梁。HMI系统通常能提供丰富的资讯&#xff0c;例如温度、压力、制造流程步骤以及材料的计量数据。还能显示设备中物料的确切位置或储存槽内的液位数据等讯息。无论是在工业自动化还是医疗、商业等重要行业领域&#xff0c;HMI都…

【前端项目笔记】6 参数管理

参数管理 效果展示&#xff1a; 在开发功能之前先创建分支goods_params cls 清空终端 git branch 查看所有分支 git checkout -b goods_params 新建分支goods_params git push -u origin goods_params 把本地的新分支推送到云端origin并命名为goods_params 参数管理需要维…

C# 语言类型全解

总目录 C# 语法总目录 C# 语言类型全解 C# 语言类型一.预定义类型1. 数值类型1.1数值类型字面量表示1.2 获取某个值的类型1.3 float 和 double 类型的特殊值 2. 算术运算checked 和 unchecked 运算符3. 位运算符4. 比较运算和条件运算 二.字符串和字符类型简述(1) 字符类型基本…

如何确定MySQL中哪些列适合做索引

1、查询频率 频繁出现在WHERE子句、JOIN条件、ORDER BY子句或GROUP BY子句中的列是创建索引的候选列。 2、数据唯一性 具有唯一性约束的列&#xff08;如主键、唯一索引&#xff09;是创建索引的理想选择&#xff0c;因为它们可以确保查询的快速返回。 如果列中的值大部分都…

一个易于使用、与Android系统良好整合的多合一游戏模拟器

大家好&#xff0c;今天给大家分享的是一个易于使用、与Android系统良好整合的多合一游戏模拟器 Lemuroid。 Lemuroid 是一个专为Android平台设计的开源游戏模拟器项目&#xff0c;它基于强大的Libretro框架&#xff0c;旨在提供广泛的兼容性和卓越的用户体验。 项目介绍 Lem…

如何安装多版本CUDA?

首先聊一个题外话&#xff1a;前几天在csdn上看到的一个话题”安装pytorch一定要去nvidia官网下载安装cuda和cudnn吗&#xff1f;“ 我相信任何一个刚开始接触或者从事深度学习的炼丹者都会从安装cuda开始&#xff0c;现在网上随便一搜如何安装pytorch&#xff0c;蹦出来教程提…