vue+file-saver+xlsx导出table表格为excel

2021-10-14   阅读:158   分类:前端    标签: Vue

1、下载两个依赖

npm install file-saver xlsx --save-dev
cnpm install file-saver xlsx --save-dev //淘宝镜像

 2、封装成一个独立的组件outTable.vue

<template>
   <el-button size="mini" round type="primary" @click="exportExcel">导出Excel</el-button>
</template>
 
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
 props: {
   id: {
     type: String,
     default: 'Table'
   },
   name: {
     type: String,
     default: 'Table'
   }
 
 },
 data () {
   return {}
 },
 components: {},
 methods: {
   // 导出Excel表格
   exportExcel () {
     var xlsxParam = { raw: true }
     var wb = XLSX.utils.table_to_book(
       document.querySelector('#' + this.id),
       xlsxParam
     )
     var wbout = XLSX.write(wb, {
       bookType: 'xlsx',
       bookSST: true,
       type: 'array'
     })
     try {
       FileSaver.saveAs(
         new Blob([wbout], {
           type: 'application/octet-stream'
         }),
         this.name + '.xlsx'
       )
     } catch (e) {
       if (typeof console !== 'undefined') console.log(e, wbout)
     }
     return wbout
   }
 }
}
</script>

 3、使用//引入组件

import outTable from '@/components/outTable.vue'
//标签
 <outTable class="outTable" :id="outTableData.id" :name="outTableData.name"></outTable>
//注册组件
export default {
 components: {
   outTable
 },
   data () {
   return {
     outTableData: {
       id: 'outTable',
       name: '交易数据'
     },
   }
 },
 }
 
【腾讯云】爆款1核2G云服务器首年48元,还有iPad Pro、Bose耳机、京东卡等你来抽!

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/837.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×