• post 文件下载二进制流


    downLoadReport({
            id:'9003'
          },{responseType:'blob'}).then((res) => {
            let data = res.data
            let url = window.URL.createObjectURL(new Blob([data]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', 'test.rar')

            document.body.appendChild(link)
            link.click()
          })
     
    handleClick(str){
          downLoadReport({
            id:str.id
          },{responseType:'blob'}).then((response) => {
            // debugger
            // let data = res.data
            // let url = window.URL.createObjectURL(new Blob([data]))
            // let link = document.createElement('a')
            // link.style.display = 'none'
            // link.href = url
            // link.setAttribute('download', 'test.rar')

            // document.body.appendChild(link)
            // link.click()
            var blob = new Blob([response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
            var downloadElement = document.createElement('a');
            var href = window.URL.createObjectURL(blob); // 创建下载的链接
            downloadElement.href = href;
            downloadElement.download = 'xx'+'.pdf'; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          })
        },
     
     
    handleClick(str){
          downLoadReport({
            id:str.id
          },{responseType:'blob'}).then((response) => {
            // debugger
            // let data = res.data
            // let url = window.URL.createObjectURL(new Blob([data]))
            // let link = document.createElement('a')
            // link.style.display = 'none'
            // link.href = url
            // link.setAttribute('download', 'test.rar')

            // document.body.appendChild(link)
            // link.click()
            var blob = new Blob([response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
            var downloadElement = document.createElement('a');
            var href = window.URL.createObjectURL(blob); // 创建下载的链接
            downloadElement.href = href;
            downloadElement.download = '表格'+'.xlsx'; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          })
        },
    {type: 'application/pdf'}
     
     
     

    Axios.post(url, {/*传入的参数*/}, { responseType: 'blob'} /*设置返回值的类型,这里设置文件流blob的形式*/)
    .then(res => {
    let blob = new Blob([res.data], {
    type: 'application/xlsx;charset=utf-8'/*application/xlsx // 这里写要下载的文件格式;charset=utf-8*/
    });
    // 获取后端返回的文件名 --> 后端配合response.setHeader("Content-disposition", "attachment; filename=xxxx.xlsx") 设置的文件名
    // 注意: 有时候axios返回的res.headers里面可能不包含content-disposition字段
    //这是因为默认情况下,header只会暴露Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma这6个字段
    // 此时需要后端设置response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")将content-disposition字段暴露出去
    let fileName = res.headers['content-disposition'].split(';')[1];
    fileName = decodeURI(fileName).substring(9)
    let eleLink = document.createElement('a');
    // eleLink.download = '模板.xlsx' // 这里写的是下载文件的名称
    eleLink.download = fileName // 这里是后端返回的文件名称
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    // URL.createObjectURL(blob)会创建URL对象,返回一个下载文件的地址
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 释放URL对象
    URL.revokeObjectURL(eleLink.href)
    // 然后移除
    document.body.removeChild(eleLink);
    })
    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
    Axios.get(url, { params: {}, responseType: 'blob' }).then(res => {
    let blob = new Blob([res.data], {
    type: 'application/xlsx;charset=utf-8'
    });
    // 获取后端返回的文件名 --> 后端配合response.setHeader("Content-disposition", "attachment; filename=xxxx.xlsx") 设置的文件名
    // 注意: 有时候axios返回的res.headers里面可能不包含content-disposition字段
    //这是因为默认情况下,header只会暴露Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma这6个字段
    // 此时需要后端设置response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")将content-disposition字段暴露出去
    let fileName = res.headers['content-disposition'].split(';')[1];
    fileName = decodeURI(fileName).substring(9)
    let eleLink = document.createElement('a');
    // eleLink.download = '模板.xlsx' // 这里写的是下载文件的名称
    eleLink.download = fileName // 这里是后端返回的文件名称
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    URL.revokeObjectURL(eleLink.href)
    document.body.removeChild(eleLink);
    })

    vue对后台返回的二进制流进行下载(vue+axios)

    1.设置axios的数据返回类型为blob

    responseType:“blob”

    2.接收后台返回的二进制流数据res

                var blob = new Blob([res.data]); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
                var contentDisposition = res.headers["content-disposition"]; //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                var patt = new RegExp("filename=([^;]+\.[^\.;]+);*");
    
                var result = patt.exec(contentDisposition);
                  var filename = result[1];
                  if (window.navigator.msSaveOrOpenBlob) {
                 	 //兼容ie
                    navigator.msSaveBlob(blob, filename);
                  } else {
                  	var downloadElement = document.createElement("a");
                  	var href = window.URL.createObjectURL(blob); //创建下载的链接
                  	var reg = /^["](.*)["]$/g;
                  	downloadElement.style.display = "none";
                  	downloadElement.href = href;
                  	downloadElement.download = decodeURI(filename.replace(reg, "$1")); //下载后文件名
                 	 document.body.appendChild(downloadElement);
                  	downloadElement.click(); //点击下载
                  	document.body.removeChild(downloadElement); //下载完成移除元素
                 	 window.URL.revokeObjectURL(href); //释放掉blob对象
                  }
  • 相关阅读:
    Script:Diagnostic ORA01000 maximum open cursors exceeded
    Script:Generating CREATE USER DDL Statements
    How many LMS processes for Oracle Rac 9i?
    ORA4030 PGA Usage Diagnostic Script
    Oracle Supplemental 补全日志介绍
    Oracle内部错误ORA600:[1112]
    Tune Very Large Hash Join
    How to increase System Change Number by manual
    Audit Logon above 9i
    Oracle学习笔记:创建logical standby
  • 原文地址:https://www.cnblogs.com/wsj1/p/14506411.html
Copyright © 2020-2023  润新知