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)
    }
  )
}
相关文章
|
9月前
|
存储 自然语言处理 前端开发
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
详谈JavaScript 二进制家族:Blob、File、FileReader、ArrayBuffer、Base64
297 1
|
9月前
|
存储 移动开发 自然语言处理
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(下)
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(下)
158 0
|
9月前
|
XML JavaScript 前端开发
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(上)
谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64(上)
208 0
|
9月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
|
9月前
|
JavaScript 前端开发
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
|
JavaScript
原生js实现文件下载并设置请求头header
原生js实现文件下载并设置请求头header
203 0
|
JavaScript 前端开发 应用服务中间件
【前端项目笔记】原生js上传文件及文件转换成base64、blob类型
项目中经常会用到上传图片上传视频等功能,由于后端nginx限制,经常要进行文件转化才能上传,大文件可能还要进行切片上传处理。
711 1
|
JavaScript
js:File大文件分片为小文件Blob
js:File大文件分片为小文件Blob
125 0
js:File大文件分片为小文件Blob
|
Web App开发 存储 JSON
JS的二进制家族:Blob的具体介绍
Data URL对大家来说并不陌生,Web性能优化有一项措施:把小图片用base64编码直接嵌入到HTML文件中,实际就是利用了Data URL来获取图片数据。
|
存储 XML 前端开发
JS的二进制家族:Blob、ArrayBuffer和Buffer
ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同
JS的二进制家族:Blob、ArrayBuffer和Buffer

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    46
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55