基于Vue+elementUI的table表格的导出功能

一.导出

1.npm导入依赖包

npm install --save xlsx file-saver

2.element ui 表格

在引入elementUI后在页面上做出表格之后进行下一步，引入elementUI不做赘述

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <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>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

在el-table标签上绑定id

<el-table :data="tableData" style="width: 100%" id="out-table">

3.在需要的页面引入包

// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";

4.添加button按钮，绑定导出excel的方法

<button @click="exportExcel">点击导出</button>

5.在methods方法中写入导出方法

//定义导出Excel表格事件
exportExcel() {
        /* 从表生成工作簿对象 */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
        })
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: 'application/octet-stream' }),
            //设置导出文件名称
            'sheetjs.xlsx'
            )
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
        }

6.附加

        此时可能已经可以正常导出，但在实践中，浏览器报错

 原因是版本问题，可以重新认证一下

npm install --save xlsx@0.17.0
npm install --save file-saver@2.0.5

或者改一下引入

把import XLSX from 'xlsx'变成import * as XLSX from 'xlsx'

7.完成

二、下载后端传过来的表格
单链接下载方法

window.location.href = 下载链接

传参方式下载链接

<template>
    <el-button type="danger" icon="el-icon-download" size="mini" circle @click="checkDetail(scope.row.payFile)"></el-button>
</template>


<script>
    methods: {
      checkDetail(val) {
        if (val){
          window.location.href = val
        }
      }
    }
</script>

原文链接：https://blog.csdn.net/zhouzongxin94/article/details/120895109

三.导入