vue3 导出excl文件

        后台管理系统经常有表格文件导出为excl的需求,在这里记录一下.

        这里用到了两个包(file-server,XLSX), 今天项目中遇到这个需求了,但是用这个导出的时候出了问题,在安装的时候没有指定包版本,安装了最新版本,导致XLSX引入报undefined的问题,可能是新版本不兼容的问题

        安装

npm install [email protected] [email protected] --save 

//引入文件
import FileSaver from 'file-saver'
import XLSX from 'xlsx'


 // 转换成excel时，使用原始的格式
            let xlsxParam = { raw: true }
                // 设置当前日期
            let time = new Date()
            let year = time.getFullYear()
            let month = time.getMonth() + 1
            let day = time.getDate()
            let name = year + '' + month + '' + day
                // console.log(name)
                /* generate workbook object from table */
                //  .excelTable要导出的是哪一个表格   注意这里的 excelTable 是要导出的表格的类名
            let wb = XLSX.utils.table_to_book(document.querySelector('.excelTable'), xlsxParam)
                /* get binary string as output */
            let wbout = XLSX.write(wb, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            })
            try {
                //  name+'.xlsx'表示导出的excel表格名字
                FileSaver.saveAs(
                    new Blob([wbout], { type: 'application/octet-stream' }),
                    name + '.xlsx'
                )
            } catch (e) {
                if (typeof console !== 'undefined') {
                    // console.log(e, wbout)
                    this.$message({
                        message: e + wbout,

                        type: 'error'
                    })
                }
            }
            return wbout