<template><div><el-button size="mini" type="primary" @click="exportData">導出</el-button></div> </template>

?在methods里面定義方法

exportData(){this.$loading({ fullscreen: true, lock: true, text: '拼命加載中...' })//以下是接口調用sjzp.downloadBillExcel(checkObjectPropEmpty(param)).then((response) => {this.$loading().close()//調用 new FileReader 對象的方法let reader = new FileReader()reader.readAsText(response.data, 'utf-8')reader.onload = (e) => {try {const response = JSON.parse(reader.result)this.$message({showClose: true,message: response.errMsg || '導出失敗',type: 'error'})} catch (e) {let filename =response.headers['content-disposition'].split('filename=')[1]filename = decodeURI(decodeURI(filename))download(response.data, filename, 'text/plain')}}}) }

方法名 參數 描述

abort none 中斷讀取

readAsBinaryString file? ? ?將文件讀取為二進制，通常我們將它傳遞到后端，后端可以通過這段字符串存儲文件。

readAsDataURL? file? ? ? ?將文件讀取為一段以data開頭的字符串，這個字符串實質上就是DataURL,DataURL是一種直接將小文件嵌入文檔的方案，這里的小文件通常是指圖像與html等格式的文件。

readAsText? file , 'utf-8'? ? 將文件讀取為文本，該方法有2個參數第二個是文本的編碼方式，默認值為'utf-8'。

?事件? ?描述

onabort? ?中斷時觸發

onerror? ? 出錯時觸發

onload? ? ?文件讀取成功完成時觸發

onloadend? 文件讀取完成時觸發，無論成功還是失敗

onloadstart? 讀取開始時觸發

onprogress? 讀取中

總結

以上是生活随笔為你收集整理的Vue导出excel文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。