Vue实现导出excel表格功能-创新互联-成都快上网建站

Vue实现导出excel表格功能-创新互联

引言:

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比王屋网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式王屋网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖王屋地区。费用合理售后完善,10多年实体公司更值得信赖。

最近使用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('div', [
     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 }})
     }
     }
    }, '查看订单')
    }
   }
   },
   ...
  ],

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站标题:Vue实现导出excel表格功能-创新互联
URL标题:http://kswjz.com/article/psidc.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流