vue 使用 js-file-download

最新推荐文章于 2023-12-20 10:52:10 发布

LeBron永鑫

最新推荐文章于 2023-12-20 10:52:10 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_44694720/article/details/119719487

本文介绍了如何在axios不支持下载请求的情况下，通过js-file-download模块封装下载功能。包括创建axios实例、添加请求和响应拦截器，并展示了如何根据响应头判断是否为文件下载或转换为字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios并不支持这种下载请求，因此要使用使用 js-file-download
安装

npm install js-file-download

封装请求

import axios from "axios";

const service = axios.create({
    responseType: 'arraybuffer'
})

//请求拦截器
service.interceptors.request.use(config => {
    config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
    return config;
},error => {
    alert(error);
})

//响应拦截器
service.interceptors.response.use(resp => {
    const headers = resp.headers;
    let reg = RegExp(/application\/json/);
    if(headers['content-type'].match(reg)){
        resp.data = unitToString(resp.data);
    } else{
        let fileDownLoad = require('js-file-download');
        let fileName = headers['content-disposition'].split(';')[1].split('filename=')[1];
        let contentType = headers['content-type'];
        fileName = decodeURIComponent(fileName);
        fileDownLoad(resp.data,fileName,contentType);
    }

},error => {
    alert(error);
})

function unitToString(unitArr) {
    let encodeStr = String.fromCharCode.apply(null,new Uint8Array(unitArr));
    let decodeStr = decodeURIComponent(escape(encodeStr));
    return JSON.parse(decodeStr);
}

let base = '';
export const downloadRequest = (url,params) => {
    return service({
        method: 'get',
        url: `${base}${url}`,
        data: params
    });
}

export default service;

main.js引入

import {downloadRequest} from "./utils/download";
Vue.prototype.downloadRequest = downloadRequest

请求发起，直接调用传入请求的接口地址即可

    //数据导出
    exportData(){
      this.downloadRequest('/employee/basic/export');
    },