前端js 下载xls表格

最新推荐文章于 2024-08-22 10:51:05 发布

chunhu4946

最新推荐文章于 2024-08-22 10:51:05 发布

阅读量286

点赞数

原文链接：https://my.oschina.net/u/3847239/blog/3056110

版权

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

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

。。。

由后端把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))) }

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

转载于:https://my.oschina.net/u/3847239/blog/3056110