Vue 下载 blob 流文件

Vue 下载 blob 流文件

下载 Excel

      // 下载文件
      showFile(item) {
        this.$http({
          method: 'post',
          url: '/fileApi/downLoadFile',
          responseType: 'blob',
          data: {
            'flieName': item.fileName
          },
        }).then(data => {
          if (!data) {
            return
          }
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(new Blob([data.data], {
            type: "application/x-xls"
          }))
          link.target = '_blank'
          link.download = decodeURI('123.xlsx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      },

下载 txt

  // 下载文件
  showFile(item) {
    this.$http({
      method: 'post',
      url: '/fileApi/downLoadFile',
      responseType: 'blob',
      data: {
        'flieName': item.fileName
      },
    }).then(data => {
      if (!data) {
        return
      }
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(new Blob([data.data],))
      link.target = '_blank'
      link.download = decodeURI('文件名.txt')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
  },

下载 zip

  // 下载文件
  showFile(item) {
    this.$http({
      method: 'post',
      url: '/fileApi/downLoadFile',
      responseType: 'blob',
      data: {
        'flieName': item.fileName
      },
    }).then(data => {
      if (!data) {
        return
      }
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(new Blob([data.data], {
        type: "application/zip"
      }))
      link.target = '_blank'
      link.download = decodeURI('123.zip')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
  },

下载图片

		this.$http({
          url: '请求的接口',
          method: 'get',   // get请求，post改为post
          responseType: 'blob',
          params: {   // 这是提交的参数，如果是post 的就是 data
            id: '123456',
            index: 'img'
          }
        }).then(({ data }) => {
          let blob = new Blob([data]);   // 返回的文件流数据
          let url = window.URL.createObjectURL(blob);  // 将他转化为路径
          this.mapSrc = url  // 将转换出来的路径赋值给变量，其实和上一步结合就可以
          }
        })