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); // 下载后移除链接
            })
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
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();
             })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
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){
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.