后端不提供文件流接口,前台js使用a标签实现当前表格数据(数组非blob数据)下载成Excel

前言:开发过程中遇到的一些业务场景,如果第三方不让使用,后端不提供接口,就只能拿到table数据(Array),实现excel文件下载。

废话不多说,直接上代码,方法后续自行封装即可:

function downLoadExcel(){console.log("下载excel");var table = [{index:"1",name:"Jerry",username:"杰瑞1",father:"你爸爸"},{index:"2",name:"Jerry",username:"杰瑞2",father:"你爸爸"},{index:"3",name:"Jerry",username:"杰瑞3",father:"你爸爸"},{index:"4",name:"Jerry",username:"杰瑞4",father:"你爸爸"},{index:"5",name:"Jerry",username:"杰瑞5",father:"你爸爸"},{index:"6",name:"Jerry",username:"杰瑞6",father:"你爸爸"},{index:"7",name:"Jerry",username:"杰瑞7",father:"你爸爸"},{index:"8",name:"Jerry",username:"杰瑞8",father:"你爸爸"},{index:"9",name:"Jerry",username:"杰瑞9",father:"你爸爸"},{index:"10",name:"Jerry",username:"杰瑞10",father:"你爸爸"},{index:"11",name:"Jerry",username:"杰瑞11",father:"你爸爸"},{index:"12",name:"Jerry",username:"杰瑞11",father:""},]console.log("长度",table.length)console.log("数据源是什么1",JSON.parse(JSON.stringify(table)))let JSONData = JSON.parse(JSON.stringify(table));let ShowLabel = ['序号', '英文名', '中文名','父亲','母亲','儿子','孙子','外公','外婆'];//先转化jsonlet arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;console.log("数据源是什么",arrData)// 给数组内容换好位置arrData.forEach(item => {let obj = {index: item.index,name: item.name ? item.name : '',username: item.username,father:item.father?item.father:'',};table.push(obj);});let excel = '<table>';//设置表头let row = '<tr>';for (let i = 0; i < ShowLabel.length; i++) {row += '<td>' + ShowLabel[i] + '</td>';}//换行excel += row + '</tr>';//设置数据for (let i = 0; i < (table.length)/2; i++) {console.log("遍历了"+i+"次")let row = '<tr>';for (let index in table[i]) {let value = table[i][index];if (index === 'imei') {// 当数字超过一定长度就科学计数法可以使用style='mso-number-format:"\@"'// 这个属性指定某单元格的数据格式,避免Excel自动转换格式row += `<td style='mso-number-format:\"\\@\"'>${value}</td>`;} else {row += '<td>' + value + '</td>';}}excel += row + '</tr>';}excel += '</table>';let excelFile ="<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";excelFile +='<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';excelFile += '; charset=UTF-8">';excelFile += '<head>';excelFile += '<!--[if gte mso 9]>';excelFile += '<xml>';excelFile += '<x:ExcelWorkbook>';excelFile += '<x:ExcelWorksheets>';excelFile += '<x:ExcelWorksheet>';excelFile += '<x:Name>';excelFile += '{worksheet}';excelFile += '</x:Name>';excelFile += '<x:WorksheetOptions>';excelFile += '<x:DisplayGridlines/>';excelFile += '</x:WorksheetOptions>';excelFile += '</x:ExcelWorksheet>';excelFile += '</x:ExcelWorksheets>';excelFile += '</x:ExcelWorkbook>';excelFile += '</xml>';excelFile += '<![endif]-->';excelFile += '</head>';excelFile += '<body>';excelFile += excel;excelFile += '</body>';excelFile += '</html>';let uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);let link = document.createElement('a');link.href = uri;link.style = 'visibility:hidden';link.download = '表格下载.xls';document.body.appendChild(link);link.click();document.body.removeChild(link);console.log("下载成功");}

效果截图:
在这里插入图片描述

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

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

相关文章

Retrofit类型安全的HTTP客户端库

简介 Retrofit是Square公司开发的一个类型安全的HTTP客户端库&#xff0c;用于Android和Java平台&#xff0c;它使得与Web服务的交互变得更加简单快捷。Retrofit将HTTP API转换成Java接口&#xff0c;让你可以用更简洁的代码形式调用RESTful API&#xff0c;Android网络编程重点…

物联网设备安装相关知识整理

拓扑图 对于ADAM-4150先接设备的整体的供电。 ADAM-4150就涉及到几个电子元器件的连接&#xff0c;一个是485-232的转换器&#xff0c;一个是将RS-232转换为USB的转接口&#xff0c;因为现在的计算机很多都去掉了RS-232接口而使用USB接口。 4150右侧有个拨码&#xff0c;分别两…

无需科学上网:轻松实现国内使用Coze.com平台自己创建的Bot(如何实现国内免费使用GPT-4o/Gemini等最新大模型)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 如何在国内使用 Coze.com 创建的 Bot 📒📝 创建Bot📝 实现国内使用📝 测试⚓️ 相关链接 ⚓️📖 介绍 📖 Coze.com 是一个强大的平台,允许用户创建各种类型的 Bot。然而,许多国内用户可能会遇到访问问题,导致无法…

100多个ChatGPT指令提示词分享

当前&#xff0c;ChatGPT几乎已经占领了整个互联网。全球范围内成千上万的用户正使用这款人工智能驱动的聊天机器人来满足各种需求。然而&#xff0c;并不是每个人都知道如何充分有效地利用ChatGPT的潜力。其实有许多令人惊叹的ChatGPT指令提示词&#xff0c;可以提升您与ChatG…

健康与生活助手:Kompas AI的高效应用

一、引言 在现代社会&#xff0c;随着生活节奏的加快和工作压力的增加&#xff0c;人们的健康问题日益凸显。健康管理已经成为每个人关注的重点。Kompas AI作为一款智能助手&#xff0c;通过其先进的人工智能技术&#xff0c;为用户提供全面的健康管理服务&#xff0c;帮助用户…

解锁5G新营销:视频短信的优势与全方位推广策略

随着5G时代的全面来临&#xff0c;企业的数字化转型步伐日益加快&#xff0c;视频短信作为新兴的数字营销工具&#xff0c;正逐步展现出其巨大的潜力。视频短信群发以其独特的形式和内容&#xff0c;将图片、文字、视频、声音融为一体&#xff0c;为用户带来全新的直观感受&…

React实现H5手势密码

监测应用进入前后台 在JavaScript中&#xff0c;监听H5页面是否在前台或后台运行&#xff0c;主要依赖于Page Visibility API。这个API在大多数现代浏览器中都是支持的&#xff0c;包括苹果的Safari和谷歌的Chrome&#xff08;也就基本覆盖了Android和iOS平台&#xff09;。下…

第三十三篇-Ollama+AnythingLLM基本集成

AnythingLLM AnythingLLM专属私有知识库,可以使用本地OllamaLLM模型&#xff0c;可以上传文件&#xff0c;基于文件回答问题 启动ollama 参考 第二十五篇-Ollama-离线安装 第二十四篇-Ollama-在线安装 下载安装AnythingLLM https://useanything.com/downloadAnythingLLMDe…

我们是否需要AI服务器?推动人工智能繁荣发展的AI服务器

揭穿人工智能服务器的炒作 人工智能的研究已经有几十年了&#xff0c;早在 1960 年代&#xff0c;生成式人工智能就已应用于聊天机器人。然而&#xff0c;2022 年 11 月 30 日发布的 ChatGPT 聊天机器人和虚拟助手席卷了 IT 界&#xff0c;让 GenAI 成为家喻户晓的术语&#x…

vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint

plugins: [ ‘vue’ ], rules: { } } ##### 第三步 安装 vite-plugin-eslint// 该包是用于配置vite运行的时候自动检测eslint规范&#xff0c;不符合页面会报错 pnpm add vite-plugin-eslintlatest -D // 安装最新版eslint-plugin-vue pnpm add eslint-plugin-vuelatest -D ###…

论文阅读--Cross-view Transformers for real-time Map-view Semantic Segmentation

一种新的2D维度的bev特征提取方案&#xff0c;其通过引入相机先验信息&#xff08;相机内参和外参&#xff09;构建了一个多视图交叉注意力机制&#xff0c;能够将多视图特征映射为BEV特征。 cross view attention&#xff1a;BEV位置编码由根据相机标定结果&#xff08;内参和…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 密码解密(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…

Python-gui开发之Pycharm+pyside6/Pyqt6环境搭建

Python-gui开发之Pycharm+pyside6/Pyqt6环境搭建 软件版本一、软件安装1、Python安装2、Pycharm安装3、pyside6或pyqt6安装①安装pyside6②安装PyQt6和pyqt6-tools二、Pycharm项目配置1、插件安装2、新建项目以及环境配置3、包管理安装三、在Pycharm中配置PySide61、pyside6 Qt…

[leetcode hot 150]第十五题,三数之和

题目&#xff1a; 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复…

CRMEB多商户阿里云集群部署流程

注意: 1.所有服务创建时地域一定要选择一致,这里我用的是杭州K区 2.文件/图片上传一定要用类似oss的云文件服务, 本文不做演示 一、 创建容器镜像服务&#xff0c;容器镜像服务(aliyun.com) ,个人版本就可以 先创建一个命名空间然后创建一个镜像仓库查看并记录镜像公网地址创建…

Ubuntu server 24 (Linux) 安装lua + 卸载软件

1 apt 安装 # sudo apt update #查看可安装的lua版本 sudo apt-get install luaversion # sudo apt-get install lua5.3 #查看版本 testiZbp1g7fmjea77vsqc5hmmZ:/data/soft$ lua -v Lua 5.3.6 Copyright (C) 1994-2020 Lua.org, PUC-Rio2 Ubuntu卸载软件 #查找lua已安装…

计算机毕业设计Python+Spark音乐推荐系统 音乐数据分析 音乐可视化 音乐爬虫 音乐大数据 大数据毕业设计 大数据毕设

2023届本科生毕业论文&#xff08;设计&#xff09;开题报告 知识图谱音乐推荐系统 学 院&#xff1a; XXX 专 业&#xff1a; XXX 年 级 班 级&#xff1a; XXX 学 生 姓 名&#xff1a; XXX 指 导 教 师&#xff1a; XXX 协助指导教师&#xff1a; …

生成对抗网络——CGAN(代码+理解)

目录 一、CGAN模型介绍 二、CGAN训练流程 1. 初始化 2. 数据准备 3. 输出模型计算结果 4. 计算损失 5. 反向传播和优化 6. 迭代训练 三、CGAN实现 1. 模型结构 &#xff08;1&#xff09;生成器&#xff08;Generator&#xff09; &#xff08;2&#xff09;判别器…

【深度学习】GELU激活函数是什么?

torch.nn.GELU 模块在 PyTorch 中实现了高斯误差线性单元&#xff08;GELU&#xff09;激活函数。GELU 被用于许多深度学习模型中&#xff0c;包括Transformer&#xff0c;因为它相比传统的 ReLU&#xff08;整流线性单元&#xff09;函数能够更好地近似神经元的真实激活行为。…

如何使用ChatGPT辅助设计工作

文章目录 设计师如何使用ChatGPT提升工作效率&#xff1f;25个案例告诉你&#xff01;什么是 prompt&#xff1f;咨询信息型 prompt vs 执行任务 prompt编写出色 prompt 的基本思路撰写 prompt 的案例和技巧1、将 ChatGPT 视作专业人士2、使用 ChatGPT 创建表单3、使用 ChatGPT…