vue导出Excel

vue导出Excel表格全局函数（简洁明了）

vue导出excel全局函数（简洁明了）

将导出到Excel功能封装成一个公用js函数，供其他vue页面复用。

1.安装Excel插件

npm install --save xlsx file-saver

2.编写公用js函数

htmlToExcel.js 代码如下：

import FileSaver from 'file-saver';
import 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
    }
}

3.在main.js中引入全局函数

//全局导出excel
import htmlToExcel from './assets/js/htmlToExcel'
Vue.prototype.htmlToExcels = htmlToExcel;

4.具体vue文件里调用

<el-table :data="tableData" border style="width: 100%" id="vcfResult">
    <el-table-column prop="geneName" label="基因名" width="180"></el-table-column>
    <el-table-column prop="chromosomeName" label="染色体名" width="180"></el-table-column>
    <el-table-column prop="StartingPoint" label="起点" width="180"></el-table-column>
    <el-table-column prop="End" label="终点" width="180"></el-table-column>
  </el-table>
 <el-button @click="exportEXCEL()">导出EXCEL</el-button>
   methods: {
	    exportEXCEL() {
 		 this.htmlToExcels.exportExcel("vcf查询结果"+".xlsx", "#vcfResult");

    }
  },

方法简单明了 具体导出word，pdf见博客详情