根据响应数据进行文件的下载和处理,并在需要时调用回调函数进行进一步的处理或通知。
- 在utils创建一个名为download.js的文件
import {Message} from 'element-ui'
// 接收多个参数:res(响应数据)、name(文件名)、fileType(文件类型)、lookType(是否预览)、callbackFunc和callback。
export function downLoadFile(res, name, fileType, lookType, callbackFunc, callback) {
// 判断是否传入了文件名name,如果没有指定文件名但是响应头中包含了content-disposition,则从响应头中获取文件名
let fileName = name
const disposition = res.headers['content-disposition']
if (!name && disposition) {
const fileNames = disposition.substring(
disposition.indexOf('filename=') + 9,
disposition.length
)
fileName = fileNames
fileName = decodeURI(fileName)
fileName = fileName.replace(/\"/g, '')
}
// 创建了一个FileReader对象,并设置了onload事件处理函数。
// 在这个事件处理函数内部,先尝试将文件数据解析为JSON格式,如果解析成功且返回的数据中code等于200,
// 则调用callbackFunc函数,并将解析后的数据传递给它。
let fileReader = new FileReader()
fileReader.onload = function () {
try {
let jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据,后台转换失败
if (jsonData.code == 200) {
callbackFunc(jsonData, callback)
} else {
if (jsonData.message) {
Message({
message: jsonData.message || 'Error',
type: 'error'
})
callbackFunc(jsonData)
}
}
} catch (err) {
// 如果解析JSON失败,则根据文件类型创建相应的Blob对象,并根据文件类型和查看类型进行不同的处理。
// 例如,如果文件类型为PDF并且查看类型为预览,则在新窗口中打开PDF文件;
// 否则根据浏览器兼容性使用不同的方式进行文件下载。
let csvData
if (fileType == 'pdf') {
csvData = new Blob([res.data], {type: 'application/pdf'})
} else if (fileType == 'zip') {
csvData = new Blob([res.data], {type: 'application/zip'})
} else if (fileType == 'excel') {
csvData = new Blob([res.data], {type: 'application/vnd.ms-excel'})
} else {
csvData = new Blob([res.data])
}
if (fileType == 'pdf' && lookType == 'preview') {
var url = window.URL.createObjectURL(csvData)
window.open(url, '_blank') // 新窗口打开,借用浏览器去打印
} else {
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(csvData, fileName)
}
} else {
const url = window.URL.createObjectURL(csvData)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = `${fileName}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
// 如果定义了callbackFunc,且之前没有调用过,则调用callbackFunc并传入一个表示错误的对象 {code:'error'}
if (callbackFunc != undefined) {
callbackFunc({code: 'error'}, callback)
}
}
}
fileReader.readAsText(res.data)
}
- 页面引用
import { downLoadFile } from '@/utils/download'
// callback传入的是刷新页面的请求
handleDown(callback) {
let response // 接口请求返回的结果
downLoadFile(response,'','','',this.handleUploadData,callback)
},
handleUploadData(response,callback) {
try {
if(response.code == 200) {
this.$commonMessage.message({
type: 'success',
message: '导入成功!'
})
callback&&callback()
} else if(response.code=='error') {
this.$commonMessage.message({
type: 'error',
message: '信息有误'
})
callback&&callback()
} else {
}
}catch{
}
}