前端js 下载xls表格

最近在做的项目中，需要有一个将页面展示的数据下载下来的功能，做爬虫的我感觉到了前端知识的匮乏

面对需求，脑海中最先涌现出的是两个方向来实现

由后端把xls表格制作出来，然后前端只需点击 a标签即可完成下载
前端将页面数据或者 json数据稍作处理，制作成 .xls文件，然后导出

刚开始感觉，第一种方法实现起来或许更加顺手，但是考虑到后期服务器可能存在的压力，为了分散服务端压力，所以将这个功能交给浏览器来完成，使用第2种方法来实现

此处借鉴了这个大神的文章，感谢 js 实现纯前端将数据导出excel两种方式，亲测有效

‘
’
‘
’
下边代码实现的是将用于展示页面的 json数据，重复利用，转换成base64数据用于下载

function pageToExcel(jsonData){  //参数 jsonData 是从后端接收的接送数据：包含xls文件中所有要保存的数据// str 是xls文件内表格的标题let str = '<tr><td>序号</td><td>位置排名</td><td>图URL</td><td>标题</td><td>是否天猫</td><td>价格</td><td>销量</td><td>收获量</td><td>店铺</td><td>DSR</td><td>信用</td><td>发货地</td></tr>';for(let i = 0 ; i < jsonData.length ; i++ ){var goods = jsonData[i].goods;  //由于jsonData 内部有的元素是字典，所以提前转换var shop = jsonData[i].shop;var seller = jsonData[i].seller;var order = "第"+jsonData[i]['page_order']+"页 总排名：" + jsonData[i]['rank_order'];var DSR = "服务" +shop.dsr.service+ "描述"+shop.dsr.description+"物流"+shop.dsr.delivery;var num = i + 1;  //序号// str_ 行数据模板let str_ = '<tr><td>'+num+'</td><td>'+order+'</td><td>'+goods.picSrc+'</td><td>'+goods.title+'</td><td>'+goods.is_tmall+'</td><td>'+goods.price+'</td><td>'+goods.sales_count+'</td><td>'+goods.confirm_sales_count+'</td><td>'+shop.name+'</td><td>'+DSR+'</td><td>'+seller.sellerCredit+'</td><td>'+goods.shop_location+'</td></tr>';str += str_;}//Worksheet名let worksheet = 'Sheet1';  // let uri = 'data:application/vnd.ms-excel;base64,';let uri = 'data:application/vnd.ms-excel;base64,';//下载的表格模板数据let template = `<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>${str}</table></body></html>`;//下载模板var query  = document.getElementById('tb_search_key').value; var a = document.createElement("a");  //为了给xls文件命名，重新创建一个a元素a.href = uri + base64(template);  // 给a元素设置 href属性a.download =query + '.xls';   // 给a元素设置下载名称a.click();  // 点击a标签 下载文件}//输出base64编码
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }

这是结合自己项目中实际情况的代码，可以根据自己的实际应用场景，稍加修改
自己做个记录，希望能帮到你

下边是自己找的demo

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><style>/* 此样式仅用于浏览器页面效果，Excel不会分离表格边框，不需要此样式 */table {border-collapse: collapse;}</style>
</head>
<body><!-- 设置border="1"以显示表格框线 --><table border="1"><!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 --><caption>学生成绩表</caption><tr><!-- 可以使用rowspan和colspan来合并单元格 --><th rowspan="2">编号</th><th rowspan="2">学号</th><th rowspan="2">姓名</th><th rowspan="2">性别</th><th rowspan="2">年龄</th><th colspan="3">成绩</th></tr><tr><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>1</td><td>2016001</td><td>张三</td><td>男</td><td>13</td><td>85</td><td>94</td><td>77</td></tr><tr><td>2</td><td>2016002</td><td>李四</td><td>女</td><td>12</td><td>96</td><td>84</td><td>89</td></tr></table><a>导出表格</a><script>// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象var blob = new Blob([html], { type: "application/vnd.ms-excel" });var a = document.getElementsByTagName("a")[0];// 利用URL.createObjectURL()方法为a元素生成blob URLa.href = URL.createObjectURL(blob);// 设置文件名a.download = "学生成绩表.xls";</script>
</body>
</html>

前端js 下载xls表格相关推荐

vue后端返回数据流前端导出下载xls文件
后端返回数据流, 前端导出下载xls文件 export function exportMethod() {axios({method:'get',url: url+'params',responseT ...
前端js下载txt文本
前端js下载txt文本在web应用开发中下载为文本比较少,但是对于一些小说网站应用应该会比较多的! 闲话短说,直接上代码! 1.将下面代码这个保存为一个xxx.js var saveAs = s ...
前端原生下载excel表格
方式一 // html 部分--------<button @click="downloadExcel()">下载excel</button>// js 代 ...
js下载excel表格,下载pdf
常见我们会遇到下载一个excel表格模板或者下载一个可以查看的PDF文档. 下载excel表格或者下载一个pdf文档,主要是通过两点来实现的: 1- 在webpack里面配置loader 2- 设置下 ...
前端如何下载excel表格
1.1下载表单,需要自己配置,引用别人封装好的ts文件 import { downloadXlsxFile } from "./downloadFile"; //引入自定义xlxs ...
前端JS导出Excel表格可筛选列 table2excel
git地址 table2excel 本文参考了 (14条消息) table2excel 导出表格有边框,文字居中_狂吃狂吃的瘦子的博客-CSDN博客_table2excel 边框效果如图 ...
前端js下载文件压缩包
工作当中时常会遇到对文件的一些处理,比如下载表格.下载图片.下载文件等,这里说一种下载压缩包的方法. 其实也很简单,需要用到一款插件jszip,官方用法都是有的:https://www.npmjs.c ...
HSSFWorkbook下载xls表格模板及导入excel数据
效果图:(有列置灰.隐藏.下拉列表功能) 下载excel模板代码: private AjaxResult myBatchImportTemplateSelect(List<ProjectTask ...
前端js下载本地模板
做一件事,要认真,细心,耐心.记忆开始之初,父母,老师都开始教导的真理,现在工作了,这教导还在,但是这些事情却还是没有做好.昨天,老大审查代码,发现之前的写的下载模板过于复杂,而且在ie环境下还不能执 ...

前端js 下载xls表格

前端js 下载xls表格相关推荐

最新文章

热门文章