后端不提供文件流接口,前台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 = ['序号', '英文名', '中文名','父亲','母亲','儿子','孙子','外公','外婆'];
    //先转化json
    let 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.mfbz.cn/a/727715.html

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

相关文章

Openldap集成Kerberos

文章目录 一、背景二、Openldap集成Kerberos2.1kerberos服务器中绑定Ldap服务器2.1.1创建LDAP管理员用户2.1.2添加principal2.1.3生成keytab文件2.1.4赋予keytab文件权限2.1.5验证keytab文件2.1.6增加KRB5_KTNAME配置 2.2Ldap服务器中绑定kerberos服务器2.2.1生成LDAP数据库Roo…

天才简史——Diederik P. Kingma与他的Adam优化器

一、了解Diederik P. Kingma 发生日期&#xff1a;2024年6月18日 前几日&#xff0c;与实验室同门一同前往七食堂吃饭。饭间&#xff0c;一位做随机优化的同门说他看过一篇被引18w的文章。随后&#xff0c;我表示不信&#xff0c;说你不会数错了吧&#xff0c;能有1.8w次被引都…

家用电器信息管理系统

摘 要 随着互联网的快速发展&#xff0c;传统家电行业受到冲击&#xff0c;逐渐向智能家居市场转型。因此&#xff0c;智能家居无疑是一个有着巨大市场需求和新兴发展空间的新兴产业&#xff0c;也是人们追求安全、便捷、舒适的生活方式的必然趋势。互联网推动了我国传统家居产…

百度安全X盈科全球数据合规服务中心:推进数据安全及合规智能化创新领域深化合作

6月19日&#xff0c;百度安全与盈科全球数据合规服务中心举行合作签约仪式&#xff0c;双方将充分发挥各自优势&#xff0c;在数据安全及合规智能化创新领域深化合作&#xff0c;在遵守国家法律法规和顺应市场规则的前提下&#xff0c;推动地方经济社会发展&#xff0c;促进企业…

【数据结构与算法】树,二叉树 详解

给出树的不同的几种表示形式。 邻接矩阵&#xff1a;这是一种二维数组&#xff0c;其中的元素表示两个节点之间是否存在边。这种表示形式适用于稠密图&#xff0c;但对于稀疏图可能会浪费很多空间。邻接表&#xff1a;这是一种数组和链表的组合结构。数组的每个元素都是一个链…

24年计算机等级考试22个常见问题解答❗

24年9月计算机等级考试即将开始&#xff0c;整理了报名中容易遇到的22个问题&#xff0c;大家对照入座&#xff0c;避免遇到了不知道怎么办&#xff1f; 1、报名条件 2、报名入口 3、考生报名之后后悔了&#xff0c;不想考了&#xff0c;能否退费&#xff1f; 4、最多能够报多少…

开源!在goview中实现cesium的低代码可视化编辑

大家好&#xff0c;我是日拱一卒的攻城师不浪&#xff0c;专注可视化、数字孪生、前端、nodejs、AI学习、GIS等学习沉淀&#xff0c;这是2024年输出的第19/100篇文章&#xff1b; 前言 前阵子写了一篇goview二开的文章教程&#xff0c;很多小伙伴留言对goview嵌套cesium并实现…

c++学习-----内存管理

1. C/C内存分布 我们先来看下面的一段代码和相关问题 答案揭晓&#xff1a; 这里很多人会误认为*char2在常量区&#xff0c;这其实是错误的 因为&#xff1a; 首先在内存字符常量区分配一块内存空间放下”abcd\0”&#xff0c;然后在栈中分配一块连续的内存空间&#xff0c;…

Qt扩展-轻量数学公式计算

轻量数学公式计算 一、概述二、代码结构三、简单使用四、解析支持1. 操作数2. 运算符3. 括号 一、概述 这个是我写得简单的一个数学计算公式工具。easy-math-parser 是一个用C编写的简单工具包&#xff0c;支持四个操作字符串的计算工具&#xff0c;灵感来自Muparser。 在这个…

四川古力未来科技有限公司抖音小店解锁电商新机遇

在数字化浪潮席卷全球的今天&#xff0c;电商行业正以前所未有的速度蓬勃发展。四川古力未来科技有限公司紧跟时代步伐&#xff0c;积极拥抱变革&#xff0c;在抖音平台上开设小店&#xff0c;为品牌发展注入了新的活力。那么&#xff0c;四川古力未来科技有限公司抖音小店究竟…

go sync包(一) 互斥锁(一)

Sync包 sync包是go提供的用于并发控制的方法&#xff0c;类似于Java的JUC包。 &#xff08;图片来自《go设计与实现》&#xff09; 互斥锁 Mutex Go 语言的 sync.Mutex 由两个字段 state 和 sema 组成。 state 表示当前互斥锁的状态。sema 是用于控制锁状态的信号量。 ty…

同城跑腿多合一系统源码小程序支持安卓+IOS+公众号+H5

&#x1f680; 同城跑腿多合一小程序&#xff1a;便捷生活新选择 &#x1f4a8; 一、引言&#xff1a;走进便捷新纪元 在这个快节奏的现代生活中&#xff0c;时间成了最宝贵的财富。而“同城跑腿多合一小程序”正是为了满足大家对于便捷、高效生活的追求而诞生的。它不仅是一款…

6.2 事件的创建,修改和删除

6.2.1 事件的概述 事件(Event)是在指定时刻才被执行的过程式数据库对象。 事件通过MySQL中一个很有特色的功能模块——事件调度器(Event Scheduler)进行监视&#xff0c;并确定其是否需要被调用。 MySQL的事件调度器可以精确到每秒钟执行一个任务&#xff0c;比操作系统的计…

python离线安装第三方库、及其依赖库(单个安装,非批量移植)

文章目录 1.外网下载第三方库、依赖库2.内网安装第三方库3.补充附录内网中离线安装python第三方库,这时候只能去外网手动下载第三方库,再传回内网进行安装。 问题是python第三方库往往有其前置依赖包,你很难清楚某个第三方库依赖的是哪些依赖包,更难受的是依赖包可能还有其…

Samtec制造理念系列二 | 差异变量管理的意义与挑战

【摘要/前言】 制造高端电子产品是非常复杂精密的过程。制作用于演示或原型的一次性样品可能具有挑战性&#xff0c;但真正的挑战在于如何以盈利的方式持续生产。 这就是Samtec风险投资研发工程总监Aaron Tucker在一次关于生产高密度微小型连接器的挑战的演讲中所强调的观点。…

深度学习之计算机视觉

神经网络简介 全连接层和卷积层的根本区别在于权重在中间层中彼此连接的方式。图5.1描述了全连接层或线性层是如何工作的。 在计算机视觉中使用线性层或全连接层的最大挑战之一是它们丢失了所有空间信息&#xff0c;并且就全连接层使用的权重数量而言复杂度太高。例如&#xf…

中文分词词云图

目录 一、分词1、分词方式方法2、分词优缺点 二、jieba使用示例1、引入库2、切分模式3、加载自定义字典 三、词的可视化1、读取数据2、数据处理3、统计词频4、去除停用词5、词云图1、pyecharts绘图2、WordCloud绘图 一、分词 1、分词方式方法 以构词规则为出发点的规则分词 全…

平安养老险黄山中支开展“反洗钱电影送下乡”活动

为不断增强反洗钱教育宣传的精准性和有效性&#xff0c;提升乡村群众的洗钱风险防范意识&#xff0c;6月18日&#xff0c;在中国人民银行黄山市分行的部署和指导下&#xff0c;平安养老保险股份有限公司&#xff08;以下简称“平安养老险”&#xff09;黄山中心支公司、平安人寿…

服务器主机托管服务内容科普

在现代信息技术快速发展的背景下&#xff0c;服务器主机托管服务已成为众多企业、机构和个人不可或缺的一部分。本文将为您详细科普服务器主机托管服务的内容&#xff0c;帮助您更好地理解和选择适合自己的托管方案。 一、硬件与基础设施 服务器主机托管服务首先提供了硬件和网…

HTML静态网页成品作业(HTML+CSS)—— 家乡成都介绍网页(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有4个页面。 二、作品演示 三、代…