溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue項目中如何實現以blob形式導出文件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
1、首先要確定服務器返回的數據類型。
在請求頭中加入： config.responseType = 'blob'
有時候，不是所有接口都需要該類型，則可以對接口做一個判定：
// request攔截器
service.interceptors.request.use(
config => { // 根據接口判定
if ( config.url === '/setting/exportData' ||
config.url.indexOf('export') > -1 ||
config.url.indexOf('Export') > -1) {
config.responseType = 'blob' // 服務請求類型
}
if (getToken()) {
config.headers['access_token'] = getToken()
}
return config
},
error => {
// Do something with request error
// console.log(error) // for debug
Promise.reject(error)
}
)2、接口請求獲取后端返回的文件流
// 導出
onExport() {
if (this.dataList === '') {
this.$message({
type: 'error',
message: '暫無數據導出'
})
return
}
const fd = new FormData()
fd.append('id', this.id)
var exportFileName = '導出文件名' //設置導出的文件名，可以拼接一個隨機值
exportData(fd)
.then(res => {
// res.data 是后端返回的文件流
// 調用 downloadUrl 處理文件
downloadUrl(res.data, exportFileName)
})
.catch(err => {
this.$message({
type: 'error',
message: err.message
})
})
}, 3、文件處理downloadUrl--該方法可以寫為公共方法以便調用
// 使用iframe框架下載文件--以excel為例，可修改type與fileName選擇文件類型
export function downloadUrl(res, name) {
const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 構造一個blob對象來處理數據
const fileName = name + '.xlsx' // 導出文件名
const elink = document.createElement('a') // 創建a標簽
elink.download = fileName // a標簽添加屬性
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click() // 執行下載
URL.revokeObjectURL(elink.href) // 釋放URL 對象
document.body.removeChild(elink) // 釋放標簽
}4、在ie瀏覽器中存在兼容性問題，對downloadUrl做一些調整
// 使用iframe框架下載文件 -兼容性考慮
export function downloadUrl(res, name) {
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
// for IE
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
const fileName = name + '.xlsx'
window.navigator.msSaveOrOpenBlob(blob, fileName)
} else {
// for Non-IE (chrome, firefox etc.)
const fileName = name + '.xlsx'
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
}
}總結：至此，以文件流的形式導出文件的一種方式便已經實現。
補充知識：vue中使用文件流進行下載(new Blob),不打開一個新頁面下載
我就廢話不多說了，大家還是直接看代碼吧~
export function download (url, params, filename) {
Message.warning('導出數據中')
return axios.get(url, {
params: params,
responseType:'arraybuffer',
}).then((r) => {
const content = r.data
const blob = new Blob([content],{type:'application/vnd.ms-excel'})
if ('download' in document.createElement('a')) {
const elink = document.createElement('a')
elink.download = filename
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
Message.success('導出成功')
}
}).catch((r) => {
console.error(r)
Message.error('導出失敗')
})
}關于vue項目中如何實現以blob形式導出文件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
