js文件下载blob

简介: js文件下载blob

使用axios文件下载


if (tableDataSource.selectedRowKeys.length > 0) {
        //本次请求你携带token
  axios.defaults.headers[
    'authorization'
  ] = `Bearer ${store.state.login.accessToken}`
  //你携带的token
  axios.defaults.headers['tenantId'] =
    store.state.login.tempTenant.id || ''
  axios
    .post(
      window.globalConfig.baseUrl +
        '/asset-manage-api/api/manage/asset/aa/bb',  //你请求的地址
      tableDataSource.selectedRowKeys,  //你携带的数组
      {
        responseType: 'blob', // blob流进行下载 
      }
    )
    .then(res => {
      let blob = new Blob([res.data], {
        type: 'applicationnd.ms-excel',
      })
       if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        window.navigator.msSaveOrOpenBlob(blob, 'fileName')
      } else {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', 'fileName')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
    })
} else {
  alert("请选择")
}


使用原生js下载文件


// 判断是否有这个属性
const createObjectURL = function (object) {
  return window.URL
    ? window.URL.createObjectURL(object)
    : window.webkitURL.createObjectURL(object)
}
// 使用promise判断是否是文件流
const checkBlob = function (blob) {
  return new Promise<void>((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.onload = function (res: any) {
      const data =
        res.target.result.substr(0, 1) == '{'
          ? JSON.parse(res.target.result)
          : { success: true }
      if (!data.success) {
        reject(data.msg)
      } else {
        resolve()
      }
    }
    fileReader.readAsText(blob)
  })
}
// 文件下载的主体方法
// callback是文件下载成功后的回调函数
// 
app.config.globalProperties.blobFileDownLoad = function (
  params,
  callback
) {
  if (!params.method) params.method = 'get'
  const xhr = new XMLHttpRequest()
  xhr.open(params.method, params.url, true)
  xhr.setRequestHeader(
    'Authorization',
    'Bearer ' + store.state.login.accessToken
  )
  xhr.responseType = 'blob'
  xhr.onload = function (e) {
    if (this.status == 200) {
      const blob = this.response
      checkBlob(blob)
        .then(() => {
          const filename = params.name + '.xls'
          const _window: any = window
          if (_window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename)
          } else {
            const a = document.createElement('a')
            const url = createObjectURL(blob)
            a.href = url
            a.download = filename
            document.body.appendChild(a)
            a.click()
            window.URL.revokeObjectURL(url)
          }
        })
        .catch(err => {
          window.$message.error(err)
        })
      callback()
    }
  }
  xhr.setRequestHeader('Content-type', 'application/json')
  xhr.send(params.data)
}


使用pots的方式进行下载


proxy.blobFileDownLoad(
  {
    url:
      window.globalConfig.baseUrl +
      '/asset-manage-api/api/manage/asset/aa/bb',
    method: 'post',
    // 需要转化一下哈
    data: JSON.stringify(tableDataSource.selectedRowKeys),
  },
  () => {
    // 成功后的回调
    console.log(1)
  }
)


使用get的方式进行下载哈


function downLoad(type) {
  proxy.blobFileDownLoad(
    {
      url:
        window.globalConfig.baseUrl +
        '/asset-manage-api/api/manage/asset/cc/qq?type=' +
        type,
      name:'文件名'
    },
    () => {
      console.log(1)
    }
  )
}
相关文章
|
1月前
|
存储 前端开发 JavaScript
JavaScript 中的 BLOB 数据结构的使用介绍
JavaScript 中的 BLOB 数据结构的使用介绍
|
11月前
|
JavaScript 前端开发 应用服务中间件
【前端项目笔记】原生js上传文件及文件转换成base64、blob类型
项目中经常会用到上传图片上传视频等功能,由于后端nginx限制,经常要进行文件转化才能上传,大文件可能还要进行切片上传处理。
506 1
|
JavaScript 对象存储
JS - 阿里云 OSS 文件下载通用办法(支持跨域)
JS - 阿里云 OSS 文件下载通用办法(支持跨域)
3606 0
JS - 阿里云 OSS 文件下载通用办法(支持跨域)
|
前端开发 API 对象存储
FileSaver.js源码学习,纯前端实现文件下载
FileSaver.js源码学习,纯前端实现文件下载
|
1月前
|
存储 自然语言处理 前端开发
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
89 1
|
1月前
|
存储 移动开发 自然语言处理
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(下)
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(下)
|
1月前
|
XML JavaScript 前端开发
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(上)
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(上)
107 0
|
1月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
|
1月前
|
JavaScript 前端开发
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
|
7月前
|
JavaScript
原生js实现文件下载并设置请求头header
原生js实现文件下载并设置请求头header