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

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

• 在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{
    }

}

代码007普通

打赏 收藏 海报 链接