怎么用Vue导出excel表格功能

怎么用Vue导出excel表格功能
这次给大家带来怎么用Vue导出excel表格功能，用Vue导出excel表格的注意事项有哪些，下面就是实战案例，一起来看一下。

这次给大家带来怎么用Vue导出excel表格功能，用Vue导出excel表格的注意事项有哪些，下面就是实战案例，一起来看一下。

引言：

最近使用vue在做一个后台系统，技术栈 vue + iView ，在页面中生成表格后， iView可以实现表格的导出，不过只能导出csv格式的，并不适合项目需求。

如果想要导出Excel

在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js

npm install -S file-saver 用来生成文件的web应用程序

npm install -S xlsx 电子表格格式的解析器

npm install -D script-loader 将js挂在在全局下

表结构

渲染页面中的表结构是由 columns 列 和 tableData 行，来渲染的 columns 为表头数据 tableData 为表实体内容

columns1: [   {   title: '序号',   key: 'serNum'   },   {   title: '选择',   key: 'choose',   align: 'center',   render: (h, params) => {    if (params.row.status !== '1' && params.row.status !== '2') {    return h('p', [     h('checkbox', {     props: {      type: 'selection'     },     on: {      'input': (val) => {      console.log(val)      }     }     })    ])    } else {    return h('span', {     style: {     color: '#587dde',     cursor: 'pointer'     },     on: {     click: () => {      // this.$router.push({name: '', query: { id: params.row.id }})     }     }    }, '查看订单')    }   }   },   ...  ],