zoukankan      html  css  js  c++  java
  • 获取后端传来的文件地址,将该文件转为Blob对象进行下载

    1、前言:

      如果后端传来的是Blob二进制流,

      

      二进制流就长这个样子,可以利用 new Blob() 获取blob对象:

      let blob = new Blob([data.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })

      提示:type的值为application/vnd.openxmlformats-officedocument.wordprocessingml.document表示docx文件,application/msword表示doc文件,具体在这里查:常见 MIME 类型列表

      但是一般情况下想要获取后端传来的二进制流都会在请求头中添加 responseType: 'blob' 设置响应数据为blob格式

    2、实操

      1)下载插件:npm i axios file-saver

      2)封装一个点击下载的函数:

        getFile(url) {
          axios({
            headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') },
            method: 'get',
            url,
            responseType: 'blob'
          })
            .then(data => {
              let blob = new Blob([data.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
              saveAs(blob, '自定义名称.xxx')
            })
            .catch(error => {
              console.warn(error.toString())
            })
        },

        解释:

          1、saveAs() 方法中第一个参数是blob对象,第二个参数是设置文件名和后缀名。变量blob在实例化之前就已经是blob对象了,这里只是对格式进行了重新定义,用原来的data.data也可以进行下载

          2、使用 window.URL.createObjectURL() 将实例化后的blob对象放进来,可以得到一个blob类型的地址(格式:blob:https://192.168.10.51:8080/dbad6f81-13ad-4af9-85d4-3c0bc81e53f6),可以使用 window.open(url) 下载这个文件,但是这种方式不能重命名,不如 saveAs() 方法用的爽

          3、如果在请求的时候没有设置 responseType: 'blob',那么 new Blob() 的作用就提现出来啦

            

            BUT!!!还是请加上 responseType: 'blob'

           4、调用 getFile() 传入文件url进行下载

  • 相关阅读:
    android git问题File not found: git.exe
    asp.net 连接数据库的问题总结
    asp.net记账本
    asp.net对数据库增删改操作
    asp.net 连接数据库操作
    第九、十周周记
    作业四-兴趣问题清单
    价值观作业
    第七周周记
    第三次作业问卷调查
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14120777.html
Copyright © 2011-2022 走看看