怎么用Vue导出excel表格功能

发布日期： 2018-04-08 阅读量： 作者： 网络

这次给大家带来怎么用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 }})
     }
     }
    }, '查看订单')
    }
   }
   },
   ...
  ],

# excel # 功能 # 表格

上一篇: IntTo Float64 JSON转换之谜

下一篇: 对于开发者来说，PHP 最实用、最值得关注的新特性有哪些？

怎么用Vue导出excel表格功能

随便看看