第一步:下载两个插件npm install file-saver xlsx -S 并引用
import FileSaver from ‘file-saver’
import XLSX from ‘xlsx’
第二步 写个方法调用即可其中sonTable是表格的id,两步即可完成,这么下载的表格就是表格的数据,比较死板。
如果要改变数据下载,最好写个子组件,子组件样式隐藏,每次选择数据后传入子组件渲染表格,然后在下载表格,这样就能随心所欲的改数据下载表格了。xlsxParam 这个很重要,不然转的excel会各种格式不一样
exportExcel(excelName) {
var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
var wb = XLSX.utils.table_to_book(document.querySelector('#sonTable'),xlsxParam)
/* get binary string as output */
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), excelName+'.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
},