Vue下载文件的两种方法以及文件流处理

点击按钮下载文件

1.文件流形式

   pdfHeaders: {
                'Authorization': localStorage.getItem('Access-Token').replace(/"/g, ''),
                'Content-Type': 'application/json',
            },      
    
downLoad(){
             let getUrl = ''
            if (process.env.NODE_ENV === "development") {
                getUrl = `测试地址`
            } else if (process.env.NODE_ENV === "production") (
                getUrl = `生产地址`
            )
            //打开合同协议为文件流的方法
            axios({
                method: 'post',
                url: getUrl,
                data: this.formData,
                responseType: 'blob',
                headers: this.pdfHeaders,

            }).then(response => {
 let decodedString = decodeURIComponent(response.headers['content-disposition'].split(';')[1].split('=')[1]);  文件名在响应头里，需要后端设置Access-Control-Expose-Headers: Content-Disposition
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', '协议模版.pdf'); // 设置下载的文件名
                document.body.appendChild(link); // 需要添加到文档中
                link.click(); // 触发下载
                document.body.removeChild(link); // 下载后移除链接
            })
}

2.文件为链接形式

a标签不能直接下载非同源的文件，因此需要特殊处理

     getAuthAgreementUrl(this.formData).then(res => {
                let x = new XMLHttpRequest();
                x.open("GET", res.data(链接地址), true);
                x.responseType = 'blob';
                 x.onload = function (e) {
                    var url = window.URL.createObjectURL(x.response)
                     var a = document.createElement('a');
                     a.href = url
                     a.download = '文件名';
                     a.click()
                 }
                 x.send();
             })

PS：如果有mock.js记得取消引入，mock.js会重写请求

3.Blob对象转换成String字符串

reader.onload中的定义的变量如何抛出去

第一种 在外部定义方法    
let reader = new FileReader();
                    reader.readAsText(response.data, 'utf-8');
                    reader.onload = e => {
                        this.showError(reader.result)
          }

    //报错处理
        showError(response) {
            let temp = JSON.parse(response);
            let errorMes = ''
            errorMes = temp.message
            this.errorMesShow = errorMes
            this.$message.error(this.errorMesShow)
        },



第二种Promise抛出去：
function uploadFile(file) {    
        return new Promise(function(resolve, reject) {    
        let reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload = function() {
            resolve(this.result)
        }
    })
}
uploadFile(file).then(function(result){
})