js根据base64下载文件-Toy模板网

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

项目中有个下载模板的需求，接口直接给返回的是一个base64，如图

js 下载base64,js,vue,javascript,前端,开发语言
这里的bytes不是流格式，而是一个base64格式的，这就导致我们需要先将base64转为了流，然后通过new Blob方式下载文件就行，下面看代码

// base64转换
const base64ToArrayBuffer = (base64) => {
  var binaryString = window.atob(base64)
  var binaryLen = binaryString.length
  var bytes = new Uint8Array(binaryLen)
  for (var i = 0; i < binaryLen; i++) {
    var ascii = binaryString.charCodeAt(i)
    bytes[i] = ascii
  }
  return bytes
}

定义了一个base64转二进制流的方法，接下来开始根据得到的二进制流下载文件（new Blob登场）

const saveByteArray = (reportName, byte) =>{
   const link = document.createElement('a') // 创建a标签
    const blob = new Blob([byte], {
      type: 'application/vnd.ms-excel;charset=utf-8',
    }) // response就是接口返回的文件流
    const objectUrl = URL.createObjectURL(blob)
    link.href = objectUrl
    link.download = reportName
    link.click() // 下载文件
    URL.revokeObjectURL(objectUrl)
}

saveByteArray接收俩个参数 reportName，byte。reportName是下载文件的名称，byte是二进制流，接下来就是根据请求后端的接口获取模板信息（也就是base64）
js 下载base64,js,vue,javascript,前端,开发语言

const uploadfile = async () => {
    let params = { // 请求参数
      dataName: props.dataName,
      dataId: props.dataId,
    }
    let res = await quotaDataDownloadTemplate({ data: params })
    // 这个接口返回的res就是上面图中的信息具体
    const { bytes, fileName } = res
    const sampleArr = base64ToArrayBuffer(bytes); // 这里先调用base64ToArrayBuffer将base64转为二进制流
    saveByteArray(fileName, sampleArr) // 然后将文件名称和数据流直接给到saveByteArray方法进行下载
}

齐活儿，如果后端的模板信息返回的直接就是流数据，那么我们就可以直接通过saveByteArray方法来下载了，就不需要base64ToArrayBuffer了，所有这里需要和接口人员确定好他返回的是二进制流还是base64就行文章来源地址https://www.toymoban.com/news/detail-581612.html

到了这里，关于js根据base64下载文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！