在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 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
javascript获取元素的计算样式
May 24 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
JS监听组合按键思路及实现过程
Apr 17 Javascript
详解vue 组件注册
Nov 20 Vue.js
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
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
PHP解析RSS的方法
2015/03/05 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python 数据加密代码
2008/12/24 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
python写一个md5解密器示例
2018/02/23 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
七一表彰活动方案
2014/01/18 职场文书
安全生产先进个人材料
2014/02/06 职场文书
精神文明建设标语
2014/06/16 职场文书
地震捐款倡议书
2014/08/29 职场文书
新教师培训心得体会
2014/09/02 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
十八大标语口号
2014/10/09 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
python某漫画app逆向
2021/03/31 Python
Python使用openpyxl批量处理数据
2021/06/23 Python