vue+element实现Table导出为Excel文件

最新推荐文章于 2023-08-03 08:22:37 发布

peachmaple

最新推荐文章于 2023-08-03 08:22:37 发布

阅读量269

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_44731038/article/details/124575147

版权

Vue.js Excel导出 XLSX库 file-saver 表格数据

关键词由CSDN通过智能技术生成

首先安装一下依赖
npm install xlsx file-saver -S
npm install script-loader -S -D

<template>
 <div>
  <el-table :data="tableData" style="width: 100%" id='out-table' > 
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
  <el-button type="primary" @click="exportExcel">导出为Excel</el-button>
 </div>
</template>

ps：超文本标记语言 XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 就是导出表格的名字，可以修改！

<script>
// 引入依赖
import FileSaver from 'file-saver'
//如果报错就修改为 >> import * as XLSX from 'xlsx'
import XLSX from 'xlsx' 
export default {
 data() {
  return {
   tableData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
    }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
    }]
   }
  },
 methods:{
  exportExcel () {
   var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
   var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
   try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
   } catch (e) { 
     if (typeof console !== 'undefined') console.log(e, wbout) 
     }
   return wbout
  },
 }
}