通过 Blob 对二进制流文件下载实现文件保存下载

这篇具有很好参考价值的文章主要介绍了通过 Blob 对二进制流文件下载实现文件保存下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原理前端将二进制文件做转换实现下载:请求后端接口->接收后端返回的二进制流(通过二进制流(Blob)下载, 把后端返回的二进制文件放在 Blob 里面)->再通过file-saver插件保存

需求背景

业务:下载模板文件

页面上使用:

<span @click="downloadFile">下载当前文件模板</span>

downloadFile() {
	let dowloadUrl
	if (this.dowloadUrl) {
	    dowloadUrl = this.dowloadUrl 
	}else if (this.fullPathUrl) {
	    dowloadUrl = this.fullPathUrl
	}
   downloadGet(dowloadUrl, `${this.fileName}.csv`, {})
},

通过 Blob 对二进制流文件下载实现文件保存下载,前端

保存文件:

import { saveAs } from 'file-saver'

发起请求通用方法(更改 axios 的 responseType):

本次业务需求中,直接使用 以下form标签形式下载(浏览器直接解析直接下载)会有文件访问权限问题,所以转换为发起axios请求接收二进制流的方式。

<!-- <form v-show="false" id="templateForm" :action="templateUrl" method="get" /> -->

(post请求仅供参考,本次业务需求中没有用到)

// 通用下载方法,blob形式--【post请求】
export function download(url, params, filename, config) {
  downloadLoadingInstance = Loading.service({
    text: '正在下载数据,请稍候',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  return service
    .post(url, params, {
      transformRequest: [
        (params) => {
          return tansParams(params)
        }
      ],
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob', // 指定响应类型为二进制数据
      ...config
    })
    .then(async(data) => {
      const isLogin = await blobValidate(data)
      if (isLogin) {
        const blob = new Blob([data])
        saveAs(blob, filename)
      } else {
        const resText = await data.text()
        const rspObj = JSON.parse(resText)
        const errMsg =
          errorCode[rspObj.code] || rspObj.msg || errorCode['default']
        Message.error(errMsg)
      }
      downloadLoadingInstance.close()
    })
    .catch((r) => {
      console.error(r)
      Message.error('下载文件出现错误,请联系管理员!')
      downloadLoadingInstance.close()
    })
}

本次业务需求中,后端接口定义的get请求,所以前端发起axios-get请求:

// 通用下载方法,blob形式--【get请求】
export function downloadGet(url, filename, config) {
  downloadLoadingInstance = Loading.service({
    text: '正在下载数据,请稍候',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  return service
    .get(url, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob',// 指定响应类型为二进制数据
      ...config
    })
    .then(async(data) => {
      const isLogin = await blobValidate(data)
      if (isLogin) {
        const blob = new Blob([data])
        saveAs(blob, filename)
      } else {
        const resText = await data.text()
        const rspObj = JSON.parse(resText)
        const errMsg =
          errorCode[rspObj.code] || rspObj.msg || errorCode['default']
        Message.error(errMsg)
      }
      downloadLoadingInstance.close()
    })
    .catch((r) => {
      console.error(r)
      Message.error('下载文件出现错误,请联系管理员!')
      downloadLoadingInstance.close()
    })
}

封装的方法:

/**
* 参数处理
* @param {*} params  参数
*/
export function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName]
    var part = encodeURIComponent(propName) + '='
    // if (value !== null && value !== "" && typeof (value) !== "undefined") {
    if (value !== null && typeof (value) !== 'undefined') {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && value[key] !== '' && typeof (value[key]) !== 'undefined') {
            const params = propName + '[' + key + ']'
            var subPart = encodeURIComponent(params) + '='
            result += subPart + encodeURIComponent(value[key]) + '&'
          }
        }
      } else {
        result += part + encodeURIComponent(value) + '&'
      }
    }
  }
  return result
}

// 验证是否为blob格式
export async function blobValidate(data) {
  try {
    const text = await data.text()
    JSON.parse(text)
    return false
  } catch (error) {
    return true
  }
}


// errorCode.js: 
export default {
  '401': '认证失败,无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误,请反馈给管理员'
}

点击"下载"按钮:

通过 Blob 对二进制流文件下载实现文件保存下载,前端
通过 Blob 对二进制流文件下载实现文件保存下载,前端
通过 Blob 对二进制流文件下载实现文件保存下载,前端

相关技术

Blob
概念: Blob 对象表示一个不可变的, 原始数据的类文件对象,它的数据可以按文本或二进制格式进行读取。

Blob 构造函数

const aBlob = new Blob(array, option)

第一个参数是一个类数组, 必填
第二个参数非必填有两个属性: type, 表示MIME类型, 默认值是’'。还有一个是endings 表示 /n 换行符如何被写入,默认值是’transparent’保持不变, 还有’native’按照宿主机的换行符

总结

前端实现文件的下载主要有两种方式:(1)直接打开下载链接(通过浏览器解析方式直接下载);(2)通过 Blob 对二进制流文件下载。实际用那种方法可以看后端的返回值和请求方式

其他:

根据返回值构造 Blob 函数并转换成 URL ,动态创建 a 标签打开 URL参考:
https://huaweicloud.csdn.net/63a55dc4b878a545459452ae.html文章来源地址https://www.toymoban.com/news/detail-697043.html

到了这里,关于通过 Blob 对二进制流文件下载实现文件保存下载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js使用xlsx生成二进制文件用于上传(不下载)

    业务中经常会处理各种数据,本文介绍了前端通过 xlsx 库将数据转换为 excel 文件用于上传的实现。

    2024年02月13日
    浏览(60)
  • flask.send_file实现文件下载、文件传输和二进制流传输

    在使用flask框架时,我们有时需要向前端传输文件。或者需要用户访问一个url时直接下载文件。这时可以使用flask.send_file()函数来实现相关的操作。 path_or_file:需要发送的文件路径或者二进制文件对象 mimetype:文件的MIME类型,如果没有设置,会尝试根据文件名进行检测 as_at

    2024年02月12日
    浏览(72)
  • 解决前端二进制流下载的文件(例如:excel)打不开的问题

    1. 现在后端请求数据后,返回了一个二进制的数据,我们要把它下载下来。 这是响应的数据: 2. 这是调用接口的地方:  使用了file-saver插件:github地址 3. 这时如果直接下载的话,打开文件就会失败 4. 这时就必须要在调接口的时候做一下处理 responseType: \\\'arraybuffer\\\', 这个必须

    2024年02月04日
    浏览(128)
  • uniapp开发小程序-pc端小程序下载后端接口的二进制流文件

    fileName 包含文件名+后缀名,比如 test.png 这种格式 api.DownloadTmtFile 后端接口返回的是文件的二进制流 值得注意的是,微信开发者工具中是测试不了 wx.saveFileToDisk 的,需要真机或者体验版测试

    2024年02月04日
    浏览(64)
  • 文件流互相转换(blob转base64,二进制流)

    跟用input上传文件的获取到的差不多 用URL.createObjectURL(blob)转化后是这样

    2024年02月10日
    浏览(56)
  • html 二进制 blob 给图片赋值

    1、html 二进制流 (非base64),给图片赋值             var reader = new FileReader();             reader.onload = function (e) {               var img = document.querySelector(\\\'#canvas_img\\\');               img.src = e.target.result;             };             // data 二进流             reader.readAs

    2023年04月21日
    浏览(55)
  • C++:通过ofstream写入二进制文件内容

    C++:通过ifstream读取二进制文件内容_c++ ifstream 二进制读取-CSDN博客 介绍了读取二进制文件的方法。 本文介绍一下写入二进制数据到文件的方法: 1.通过write

    2024年01月19日
    浏览(51)
  • Vue前端渲染blob二进制对象图片的方法

    近期做开发,联调接口。接口返回的是一张图片,是对二进制图片处理并渲染,特此记录一下。 本文章是转载文章,原文章:Vue前端处理blob二进制对象图片的方法 接口response是下图 显然,获取到的是一堆乱码,前端需要将其解析出来,百度之后发现解析二进制文档流的写法

    2024年02月15日
    浏览(64)
  • uniapp小程序中处理blob二进制流数据

    小程序中是不支持blob格式数据的,new Blob()会报错Blob未定义 处理方法是转成base64格式: 首先,请求中要带上responseType: \\\"arraybuffer\\\",保证返回的数据格式是arraybuffer 使用uni.arrayBufferToBase64() 转化成base64格式,后续根据业务处理数据即可。 在这个代码中,数据是一张png格式的二维

    2024年02月04日
    浏览(48)
  • Vue前端处理blob二进制对象图片的方法

    近期在做开发的时候遇到一个问题,前端传递一个参数,后端返回一张图片,前端再将该图片展示出来,由于是第一次处理二进制图片对象,特此记录一下。 首先,已知后端接口无误,传递参数可以正常返回图片    前端调用接口,打印并查看获取到的响应数据:     显然

    2024年02月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包