Vue封装一个导出Excel的组件或公共函数

Posted 2021-06-01 茶沐书香

封装为公共函数的方法

1、在项目的src\\utils文件夹下，新建toExcel.js文件，代码：

/* 导出Excel,封装为一个公共函数。这里是和element的table配合，导出table中的数据
 * 传入的参数为fileName，是要导出的数据的表格名称，即table的表名，一般用id=\'table\'  */
import XLSX, { WorkSheet } from "xlsx"
import FileSaver from "file-saver"
let toExcel = fileName =>{
    if (fileName.length==0) {
        return 0
    }
    let table = document.getElementById(fileName)
    let worksheet = XLSX.utils.table_to_sheet(table)
    let workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, \'sheet\')            
    XLSX.writeFile(workbook, \'excelFile.xlsx\')    
}
export {toExcel}

2、在vue组件中使用时，先引入

import {toExcel} from \'../../utils/toExcel.js\'

3、在按钮中调用该导出Excel的方法

<el-table id=\'table\' :data=\'tableData\'></el-table>
<el-button icon=\'el-icon-s-grid\' @click="toExcel(\'table\')">导出Excel</el-button>

注意，必须传递参数\'table\'。

4、相应按钮的点击

methods: {        
    toExcel(filename){    
        toExcel(filename)            
    }
}    

注意：外层的toExcel是相应按钮的点击事件，即相应@click="toExcel(\'table\')"，内层的toExcel是调用封装在utils中的toExcel公共函数，实现导出功能。

缺点：封装为函数，尽管也可以复用代码，但每次，仍需要写toExcel的方法，在按钮内，还需要写@click等，仍不是最高效的，应该封装为组件。