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

server/2025/1/16 7:45:21/

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.ppmy.cn/server/53218.html

相关文章

使用nvm命令进行node和npm版本下载以及切换

下载以及安装nvm方式 https://blog.csdn.net/ppz8823/article/details/130862191 1.查看nvm版本 nvm -v2.查看node 和 npm版本 node -v npm -v3.使用nvm查看已下载的node版本 nvm ls4.使用nvm 查看可使用的在线node版本 nvm list available4.下载想要使用的node版本&#x…

Java基础知识整理笔记

目录 1.关于Java概念 1.1 谈谈对Java的理解&#xff1f; 1.2 Java的基础数据类型&#xff1f; 1.3 关于面向对象的设计理解 1.3.1 面向对象的特性有哪些&#xff1f; 1.3.2 重写和重载的区别&#xff1f; 1.3.3 面向对象的设计原则是什么&#xff1f; 1.4 关于变量与方…

数据库管理-第212期 上期SQL性能优化勘误与扩展(20240624)

数据库管理212期 2024-06-24 数据库管理-第212期 上期SQL性能优化勘误与扩展&#xff08;20240624&#xff09;1 环境2 方案1问题3 问题引申总结 数据库管理-第212期 上期SQL性能优化勘误与扩展&#xff08;20240624&#xff09; 作者&#xff1a;胖头鱼的鱼缸&#xff08;尹海…

智慧校园-缴费管理系统总体概述

在构建现代化教育环境的过程中&#xff0c;智慧校园缴费管理系统脱颖而出&#xff0c;成为提升校园财务管理效率与服务质量的关键一环。缴费管理系统需要精心设计&#xff0c;通过科技力量&#xff0c;让原本繁琐的缴费流程变得简单快捷&#xff0c;同时增强家校之间的互动与信…

js函数闭包解析

闭包是JavaScript中非常重要的概念&#xff0c;理解闭包对于编写高质量的代码是至关重要的。本文将详细解析闭包的概念&#xff0c;并提供一些代码示例来帮助读者更好地理解闭包的使用。 什么是闭包&#xff1f; 闭包是指在一个函数内部定义的函数&#xff0c;该函数可以访问包…

百问网全志D1h开发板投屏功能实现

投屏功能实现 D1系列号称点屏神器&#xff0c;不仅能点屏&#xff0c;还能用于投屏。 源码准备 百问网为 【百问网D1h开发板】提供了投屏功能需要使用的源码&#xff0c;直接git下载即可&#xff1a; git clone https://github.com/DongshanPI/DongshannezhaSTU_DLNA_Scree…

蓝桥杯 经典算法题 查找两个总和为特定值的索引

题目&#xff1a; 给定一个数组&#xff0c;找到两个总和为特定值的索引。 例如给定数组 [1, 2, 3, -2, 5, 7]&#xff0c;给定总和 7&#xff0c;则返回索引 [1, 4]。 若有多组符合情况则输出索引对中小索引最小的一组。 题解: 本题可以通过暴力枚举&#xff0c;枚举每两…

GIT-LFS使用

0.前言 目前git仓库有很多很大的文件需要管理&#xff0c;但是直接上传&#xff0c;每次clone的文件太大&#xff0c;所有准备使用git-lfs解决。 1、下载和安装 Git LFS 1.1、直接下载二进制包&#xff1a; Releases git-lfs/git-lfs GitHub 安装 Git LFS sudo rpm -ivh…