vue-以⽂件流-blob-的形式-下载-导出⽂件操作
vue项⽬中，经常遇到⽂件导出与下载，有时候是直接返回服务端的⽂件url，这样直接以a链接下载，或者windown.open对不同类型的⽂件进⾏下载或预览。但如果返回的是⽂件流，则需要做⼀些其他处理，具体形式如下：
1、⾸先要确定服务器返回的数据类型。
在请求头中加⼊： sponseType = 'blob'
有时候，不是所有接⼝都需要该类型，则可以对接⼝做⼀个判定：
// request
quest.use(
config => {  // 根据接⼝判定
if ( config.url === '/setting/exportData' ||
config.url.indexOf('export') > -1 ||
config.url.indexOf('Export') > -1) {
}
if (getToken()) {
config.headers['access_token'] = getToken()
}
return config
},
error => {
// Do something with request error
// console.log(error) // for debug
}
)
2、接⼝请求获取后端返回的⽂件流
// 导出
onExport() {
if (this.dataList === '') {
this.$message({
type: 'error',
message: '暂⽆数据导出'
})
return
chrome直接下载}
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: ssage
})
})
},
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 = ateElement('a') // 创建a标签
elink.download = fileName // a标签添加属性
elink.style.display = 'none'
elink.href = ateObjectURL(blob)
document.body.appendChild(elink)
elink.click() // 执⾏下载
veChild(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 = ateElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = ateObjectURL(blob)
document.body.appendChild(elink)
elink.click()
veChild(elink)
}
}
总结：⾄此，以⽂件流的形式导出⽂件的⼀种⽅式便已经实现。
补充知识：vue中使⽤⽂件流进⾏下载(new Blob)，不打开⼀个新页⾯下载
我就废话不多说了，⼤家还是直接看代码吧~
export function download (url, params, filename) {
Message.warning('导出数据中')
(url, {
params: params,
responseType:'arraybuffer',
}).then((r) => {
const content = r.data
const blob = new Blob([content],{type:'application/vnd.ms-excel'})
if ('download' ateElement('a')) {
const elink = ateElement('a')
elink.download = filename
elink.style.display = 'none'
elink.href = ateObjectURL(blob)
document.body.appendChild(elink)
elink.click()
veChild(elink)
Message.success('导出成功')
}
}).catch((r) => {
<(r)
<('导出失败')
})
}
以上这篇vue-以⽂件流-blob-的形式-下载-导出⽂件操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。