vue 表格列表实现 excel导出

前言：实现列表数据导出为excel      后端不提供导出接口   仅有返回的列表功能

参考文章：

vue实现导出excel_不安分的蜗牛的博客-CSDN博客_vue导出excel文件

vue导出Excel表格（超级简洁）_想见你只想见你的博客-CSDN博客_vue导出excel

目录

 

实现前的功能界面：

 实现步骤：

1.添加导出按钮（并绑定单击事件），并给表格添加id(原因见步骤5)

2. 下载依赖

3.在src文件夹中新建文件夹excel ，并编写htmlToExcels.js文件

 4.然后在main.js里面引入刚刚写好的那个js文件

5.在 导出 按钮所在的页面编写代码（在methods里面添加 exportExcel方法）

 6.完成该功能

---

 

实现前的功能界面：

 实现步骤：

1.添加导出按钮（并绑定单击事件），并给表格添加id(原因见步骤5)

        <div class="btn1">
          <button type="button" class="btn btn-info" style="margin-right: 10px;" @click="handleOpenAddDevice">添加设备</button>
          <button type="button" class="btn btn-success" style="margin-right: 10px;">导入</button>
          <button type="button" class="btn btn-danger" @click="exportExcel()">导出</button>
        </div>

2. 下载依赖

npm install --save xlsx file-saver

3.在src文件夹中新建文件夹excel ，并编写htmlToExcels.js文件

 在 htmlToExcels.js 下编写咱们的代码(可全部复制)

import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'
export default {
  // 导出Excel表格
  exportExcel(name, tableName) {
    //name表示生成excel的文件名     tableName表示表格的id
    var sel = XLSX.utils.table_to_book(document.querySelector(tableName))
    var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
    try {
      FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, selIn) 
    }
    return selIn
  }
};

 4.然后在main.js里面引入刚刚写好的那个js文件

//全局导出excel
import htmlToExcels from './excel/htmlToExcels'
Vue.prototype.htmlToExcels = htmlToExcels

5.在 导出 按钮所在的页面编写代码（在methods里面添加 exportExcel方法）

    exportExcel(){
      this.htmlToExcels.exportExcel("监控点管理列表.xlsx", "#vcfResult");
        //第一个引号里面是表格导出时的名字
        //第二个是表格的id，这个插件是通过id导出的

    }

 6.完成该功能