• 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对象
                  }
  • 相关阅读:
    查看linux系统cup及内存信息
    caffe tutorial
    vector 初始化方法
    c++ 常用函数头文件
    caffe——全连接层inner_product_layer
    c++ 将vector转化为数组
    基于 Ubuntu 搭建 RoCE 实践环境
    基于QEMU使用 u-boot 拉取 Linux 内核
    Linux 网桥(Bridge)实践环境搭建
    使用 qemu 模拟器运行 aosp(基于 x86-64 Linux 内核)
  • 原文地址:https://www.cnblogs.com/wsj1/p/14506411.html
Copyright © 2020-2023  润新知