1.首先npm组件到src项目中

npm install --save xlsx file-saver

 2.创建一个新的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
    }
};

3.在main.js中引用(注意文件路径)

//导出组件 文件路径为你创建js文件的路径
import outToExcel from "@/components/ExportExcelUtils/outToExcel";
// 全局方法挂载 outToExcel(随意名称) = outToExcel(引入的名称);
Vue.prototype.outToExcel = outToExcel;
// 全局组件挂载 (随意名称,挂载的名称)
Vue.component('outToExcel', outToExcel)
Vue.use(outToExcel)

4.在vue方法中进行调用

<template>
<div>
<el-table id="table"></el-table>  
</template>
</div>

<script>
export default {
   data() {
    return{
     params:{}
    };
},
create(){

},
methods:{
/** 导出按钮操作 */
      handleExport() {
         //参数一:生成excel的文件名     参数二:表格的id
         this.outToExcel.exportExcel("文件名.xlsx","#table");
       
      }
    }
};
</script>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐