js 多媒体文件（图片，表格 等） 下载方法

项目中的 图片的 下载方式

 

import { message } from 'antd';

/**
 * 文件下载
 * @param apiPromise  promise 返回 接口返回的 文件 Blog
 * @param fileName    下载的文件名
 */
function downloadFile (apiPromise, fileName) {
    const hide = message.loading('导出中...', 0);
    apiPromise.then(
        response => {
            //关闭提示
            console.log('导出', response);
            // if (response.type === 'application/vnd.ms-excel') {
            if (response.type === 'application/vnd.ms-excel') {
                if (!response) {
                    return;
                }
                let url = window.URL.createObjectURL(response);
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', fileName || '导出文件');
                console.log(link);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                //关闭 loading
                hide();
                setTimeout(()=>{
                    message.success('导出成功')
                }, 1000);
            } else {
                console.log('导出发起失败');
                //关闭 loading
                hide();
                setTimeout(()=>{
                    message.error('导出失败')
                }, 1000);
            }
        }).catch(error => {
        //关闭 loading
        hide();
        console.warn('导出错误：', error);
        message.error('导出错误')
    });
}

/**

 */

/**
 * 多媒体 下载
 * @param url
 * @param fileName
 * @param blobType  默认为  MIME 类型列表 详见 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 *                  释： 图片的类型有多种  image/jpeg， image/png 。。。 等， 所有我们可以 通过传入 前半部分来（image） 确定是不是 下载了对应的文件
 */
function downloadEnhance(url, fileName='', blobType = 'image'){
    const hide = message.loading('下载中...', 0);
    var x = new XMLHttpRequest();
    // x.open("GET", "http://danml.com/wave2.gif", true);
    x.open("GET", url, true);
    x.responseType = 'blob';
    x.onload = function(e){
        console.log(x);
        if(x.response.type.includes(blobType)){
            var url = window.URL.createObjectURL(x.response)
            var a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            a.click();
            
            //关闭 loading
            hide();
            setTimeout(()=>{
                message.success('下载成功')
            }, 1000);
        }else {
            console.log('下载发起失败');
            //关闭 loading
            hide();
            setTimeout(()=>{
                message.error('下载失败')
            }, 1000);
        }
        
    }
    x.send();
}

export { downloadEnhance }

export default downloadFile;

 

downloadFile 函数的调用方式 需要通过 axios 进行，返回一个 Promise 对象 ，
例如：
新建一个 request.js
引入 axios：

import axios from 'axios';

配置 axios：

//axios配置
export const instance = axios.create({
    baseURL: serverUrl,
    // timeout: 5 * 1000,
    timeout: 10 * 1000,
    //withCredentials: true, //是否开启跨域
    headers: {
        'Content-Type': 'application/json'
    }
});

下载 文件的get请求

/**
 * get请求 下载文件
 * @param url   请求地址
 * @param params url参数
 * @return {Promise<AxiosResponse<T>>}
 */
export function getDown(url, params) {
    return instance.get(url, {
        params,
        responseType: 'blob'
    });
}

在其它文件的调用方法：

downloadFile(
    getDown('/api/....', {}'参数'),
    '我的下载'
)

推荐使用  downloadEnhance 这个方法，直接根据说明直接调用即可

 

还得回去写项目 先写到这吧。