js下载文件

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

今分享一下两个js下载文件的方法

方法一

利用axios下载首先接口设置返回的数据类型 responseType若不设置，会导致下载的文件可能打不开

export function download(){
    return request({ //封装过后的axios
        url:"",//后台接口地址
        method:"GET",//请求方式
        responseType:"blob"
    })
}

上面定义好方法后，这里使用

download().then(res=>{
    const blob = new Blob([res.data], {

    // 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel

    type: 'application/pdf;chartset=UTF-8'

    })

    //创建a标签

    const a = document.createElement('a')。

    // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载

    const URL = window.URL || window.webkitURL

    // 根据解析后的blob对象创建URL 对象

    const herf = URL.createObjectURL(blob)

    // 下载链接

    a.href = herf

    // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'

    a.download = "xxxxx.pdf"

    document.body.appendChild(a)

    a.click()

    document.body.removeChild(a)

    // 在内存中移除URL 对象

    window.URL.revokeObjectURL(herf)
})

方法二 自己封装请求区下载文件

download={
    downloadUr1File(url) {
        const xhr = new XMLHttpRequest();//调用XHR通过请求获取数据流
        xhr.open( 'GET", url, true );
        xhr.responseType = 'blob'; //响应类型blob字节流
        xhr.setRequestHeader( 'token ' , getToken());//传入token
        xhr.onload = () =>{
            if (xhr.status === 200) {
                //获取图片blob数据并保存responseURL
                var filename = xhr.responseURL.substring(xhr.responseURL.lastIndexOf("/")+1);
                this.saveAs(filename，xhr.response); //传入参数  filename 文件名   xhr.response 响应的blob
            }
        }
        xhr.send();//发送请求
    },
    saveAs(name，data) {
       var urlobject = window.URL;//window对象的URL对象是专门用来将blob或者file读取成
       var export_blob = new Blob([data]); //Blob对象可以看作是存放二进制数据的容器
       var save_link = document.createElement( 'a ');//创建a标签
       save_link.href = urlobject.createObjectURL(export_blob);//通过URL.createObjectURL;
       save_link.download = name;
       save_link.click();//触发a标签下载文件
    }
}

新手上来。自己理解写的 ，有错误的地方欢迎指出，感激不尽