当前位置：首页 > news >正文

vue 全局封装文件下载及导入

news 来源：原创 2024/5/18 5:46:19

根据响应数据进行文件的下载和处理，并在需要时调用回调函数进行进一步的处理或通知。

在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 = nameconst disposition = res.headers['content-disposition']if (!name && disposition) {const fileNames = disposition.substring(disposition.indexOf('filename=') + 9,disposition.length)fileName = fileNamesfileName = 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 csvDataif (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 = urllink.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{}}