在Vue里如何把网页的数据导出到Excel的方法


Posted in Javascript onSeptember 30, 2020

前言: 在做后台管理的时候,我们往往有需要把网页上面的数据导出到excel这样的需求,真实的企业项目里对应一些导出财务报表、员工信息、交易记录、考勤打卡记录…等等需求,本文将对此做探讨。

开始前补充: 网上是有些牛人已经把这个功能封装成组件了,但每个人的封装逻辑五花八门,组件的功能也很有限,不一定真能完全符合自己的业务需求,找相应的API也很麻烦,存在不太敢用,不会用等问题,那么本文将教你如何自己封装,如何自己自定义相关功能,如何自定义Excel的样式 ,尤其是导出excel后自定义样式,这在一些现存封装好的组件是不好实现的,本文可以实现!

本文导出Excel方法的优点: 网页上的table与导出Excel之后的table完全独立,也就是说你导出Excel之后的内容与网页没有直接联系,这意味着数据导出到Excel后有非常强的1定制性 ,实在不理解这句话也没关系,本文看完你自然就明白了。2能跨浏览器兼容,甚至是某E浏览器。3导出非常快,不卡顿!

一、使用脚手架创建一个Vue项目,在生成的src目录下创建exportToExcel.js文件(名称自取), 并且到App.vue里面快速模拟生成一份表格数据

1、我这里简单模拟网页上一份表格数据,使用的是iview的table组件,网页上展示的表格的组件你可以用你自己喜欢的组件,我这里做演示用,你完全可以不跟我一样;

<style lang="less">
</style>
<template>
 <div>
 <h2>这是一个使用iview的table组件,做展示用,你当然可以在自己的项目里用自己想要的任何table组件</h2>
 <Table :columns="column" :data="tableData"></Table> //iview的Table组件
 <Button @click="toExcel">导出表格数据到Excel</Button> //导出excel的按钮
 </div>
</template>
<script>
import transform from './exportToExcel.js'  //这个方法来源于二步骤封装的方法,往下看
export default {
 name:'App',    //这是一个父组件,名称为App.vue
 data(){
 return {
  tableData:[],  //表格数据
  column:[]			 //表格的列
 }		
 },
 methods:{
 toExcel(){
 //调用我们封装好的方法,传3个参数过去,分别为:数据,文件名,回到函数(可根据自己需求决定回调是否需要)
  transform(this.tableData, '我是文件名', this.callback) 
 },
 callback(info){
  console.log(info)
 }
 },
 created(){
 //模拟网络请求
 this.tableData = [
  {index:1,name:'我是1号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:2,name:'我是2号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:3,name:'我是3号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:4,name:'我是4号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:5,name:'我是5号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:6,name:'我是6号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:7,name:'我是7号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:8,name:'我是8号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:9,name:'我是9号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:10,name:'我是10号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:11,name:'我是11号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:12,name:'我是12号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:13,name:'我是13号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:14,name:'我是14号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:15,name:'我是15号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}
 ]
 this.column = [
  {key:'index',title:'序号',width:120},
  {key:'name',title:'姓名',width:120},
  {key:'age',title:'年龄',width:120},
  {key:'sex',title:'性别',width:120},
  {key:'hobby',title:'爱好',width:120},
  {key:'hair',title:'发量',width:120},
  {key:'salaried',title:'薪水',width:120}
  ]
 }
}
</script>

在Vue里如何把网页的数据导出到Excel的方法

二、进入exportToExcel.js文件,写导出业务逻辑代码,也就是上面对应的transform这个方法

书写思路:采用HTML字符串拼接的方法,拼接出一个table,即可显示到Excel;换句话来说使用HTML的语法写出来的table能展示到excel上面,还能携带样式!请用心看完拼接过程,拼接看懂了,你会90%了!

var idTmr;
//自己定义一个函数transform,在里面写我们的业务逻辑
function transform(table, name, callback) { //table为表格数据,name为导出文件名,
      //callback为导出完毕回调,方便你知道导出完成了(可根据自己需求决定是否需要)
 let tableInnerHTML = ''
 let headerData = ['序号','姓名','年龄','性别','爱好','发量','薪水']
 let bodyData = table  //这里对应是表格数据,我们只需要传过来即可
 //拼接完全使用thead、tbody、tr、td、th,并且相应的tr、th、td里可以写一些类似colspan(决定占几列)
 //rowspan(决定占几行)的属性、可以用作合并行、合并列等高级操作
 tableInnerHTML += '<thead><tr>'; //头部部分开始拼接!
 tableInnerHTML += `<th colspan=${headerData.length} 
 				style='background:#CCFFFF;border:solid;'>` + "程序员的将来" + "</th></tr>"
 tableInnerHTML += '<tr>' 
 headerData.forEach(item => {   
   tableInnerHTML += "<th rowspan='1' style='background:#FFFFCC;border:solid'>"
   			 + item + "</th>"
  })
 tableInnerHTML += '</tr></thead>';  //头部部分结束
 tableInnerHTML += '<tbody>'   //身体部分开始
 bodyData.forEach(item => {      
 tableInnerHTML += "<tr>"
  tableInnerHTML += "<td align='center' style='border:solid'>" + item.index + "</td>"
  tableInnerHTML += "<td align='center' style='border:solid'>" + item.name + "</td>"
  tableInnerHTML += "<td align='center' style='border:solid'>" + item.age + "</td>"
  tableInnerHTML += "<td align='center' style='border:solid'>" + item.sex + "</td>"
  tableInnerHTML += "<td align='center' style='border:solid'>" + item.hobby + "</td>"
  tableInnerHTML += "<td align='center' style='border:solid'>" + item.hair + "</td>"
  tableInnerHTML += "<td align='center' style='border:solid'>" + item.salaried + "</td>"
  tableInnerHTML += "</tr>"
 })
  tableInnerHTML += '</tbody>'; //身体结束
//------------OK,到此为止拼接工作做完,也就是基本的数据已经被拼接成表格了--------------------
//tip开始(下面还有个tip结束的位置)
/*-------从tip开始到tip结束的过程是判断浏览器类型步骤,做兼容性处理!对于你来说你完全可以不用
		 深入理解这里面的逻辑,直接复制到自己的项目里去,不会存在任何浏览器兼容性的问题!*/
 function getExplorer() {
  var explorer = window.navigator.userAgent;
  if (explorer.indexOf('MSIE') >= 0) {
   return 'ie';  // ie
  } else if (explorer.indexOf('Firefox') >= 0) {
   return 'Firefox'; // firefox
  } else if (explorer.indexOf('Chrome') >= 0) {
   return 'Chrome'; // Chrome
  } else if (explorer.indexOf('Opera') >= 0) {
   return 'Opera';  // Opera
  } else if (explorer.indexOf('Safari') >= 0) {
   return 'Safari'; // Safari
  };
 };

 if (getExplorer() !== 'Safari' && name.substr(-1, 4) !== '.xls') {
  name += '.xls';
 }
 if (getExplorer() === 'ie') {
  var curTbl = table;
  var oXL = new ActiveXObject('Excel.Application');
  var oWB = oXL.Workbooks.Add();
  var xlsheet = oWB.Worksheets(1);
  var sel = document.body.createTextRange();
  sel.moveToElementText(curTbl);
  sel.select();
  sel.execCommand('Copy');
  xlsheet.Paste();
  oXL.Visible = true;
  try {
var fname=oXL.Application.GetSaveAsFilename('Excel.xls', 'Excel Spreadsheets (*.xls), *.xls');
  } catch (e) {
   print('Nested catch caught ' + e);
  } finally {
   oWB.SaveAs(fname);
   // oWB.Close(savechanges = false);
   oXL.Quit();
   oXL = null;
   idTmr = setInterval(Cleanup(), 1);
  }
 } else {
  tableToExcel(tableInnerHTML, name, callback); /*在这调用下面的一个方法,传入拼接完成
          	 的表格,文件名,回调函数。该方法是干嘛的请往下看*/
 }
 //tip结束
} //此括号结束,我们自己封装的transform方法也结束了!90%的逻辑完成了!

/*下面的两个函数对于你来说你也完全不用深入理解里面的逻辑,你只要知道,他是在帮助你做转换,帮助你
 将拼接好的HTML字符串模板真正地转换并且输出到Excel里面去,直接当成固定书写方法,直接拿来用即可*/
function Cleanup() {
 window.clearInterval(idTmr);
}
let tableToExcel = (function () {
 let template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>';
 let format = function (s, c) {
  return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; });
 };
 return function (table, name, callback) {
  let ctx = { worksheet: name || 'Worksheet', table: table };
  let blob = new Blob([format(template, ctx)]);
  let a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = name;  //这里这个name就是对应的文件名!
  a.click();
  a.remove();
  callback('success'); /*这里调用我们自己传入的回调方法,这样导出Excel完成后你就能
  						 在外面知道导出完毕,并且再往下做自己其他的逻辑*/
 };
})();
export default transform; //导出自己封装的transform方法

上效果:

在Vue里如何把网页的数据导出到Excel的方法

三、封装工作完成了,再回过头来看 二 步骤在使用自己封装的transform方法,只需要传入需要导出的数据、文件名、回调即可,到这里你应该理解了:

1、什么是网页与Excel完全分离,因为你Excel只受你数据的影响,你传过来什么数据它最终就根据你传来的数据,拼接成你想要的表格,不受网页影响(有些人封装的导出Excel组件是和网页密切关联,首先肯定在网页上需要有一份真正被渲染好的表格存在,然后再在对应的地方使用对应的接口,传入对应的属性等等…不作过多探讨),本文其实也在网页上渲染了一份表格截图给你们看了,但这完全是演示用,看到这里为止我相信你也完全相信,网页上的表格如果我不需要,完全不用渲染,因为我只是需要它的数据而已,只要接口返回了数据,那么我就调用封装的transform方法传入数据,即可开始导出excel
2、导出Excel同时携带样式,你返回步骤三看看我们在拼接td、tr、th的时候,我想要写什么样式直接像在HTML里写内联样式一样,直接上style,在style里写你想写的样式,什么背景颜色,字体,边框,缩进等等,自己去尝试吧,很香的!
3、在部分需求中可能有些高级操作导出的某列自身可能会占据(2列、3列、4列、…列),某行会占据(2行、3行、4行、…行)只需学习上面的写法,设置colspan、rowspan属性即可
4、导出真的快,这点如果你没有用过一些别人封装好的导出Excel组件库,你真的无法感受,你只需知道哪怕数据成百上千,使用这个方法导出真的流畅!!!!

四、最后补充,本文是在教你如何封装将网页上的数据导出到Excel的方法,不是在封装组件!!!我们是在封装一个方法,一个函数,这意味着什么?你完全可以不用在Vue里使用,哪怕是Jquery、React等其他前端框架,你只需要将封装好的方法引入即可,不说了,太牛 * 了!!!

到此这篇关于在Vue里如何把网页的数据导出到Excel 的文章就介绍到这了,更多相关Vue数据导出到Excel 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
jQuery实现二级导航菜单的示例
Sep 30 #jQuery
javascript canvas封装动态时钟
Sep 30 #Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 #Javascript
Vue实现穿梭框效果
Sep 30 #Javascript
原生js实现表格翻页和跳转
Sep 29 #Javascript
vue实现井字棋游戏
Sep 29 #Javascript
js实现移动端图片滑块验证功能
Sep 29 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
vue实现分页栏效果
2019/06/28 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python妙用之编码的转换详解
2017/04/21 Python
Python制作刷网页流量工具
2017/04/23 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python K近邻算法的kd树实现
2018/09/06 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python 文件数据读写的具体实现
2020/01/24 Python
python中提高pip install速度
2020/02/14 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
暑期社会实践方案
2014/02/05 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
防火标语大全
2014/10/06 职场文书
冰雪公主观后感
2015/06/16 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android