base64 转文件并下载

最新推荐文章于 2023-11-27 14:54:17 发布

口袋里的神奇宝贝

最新推荐文章于 2023-11-27 14:54:17 发布

阅读量1.2k

点赞数

分类专栏： js expot base64 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45598686/article/details/119322785

版权

js 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

expot

1 篇文章 0 订阅

订阅专栏

base64

1 篇文章 0 订阅

订阅专栏

方法1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button id="exportBtn">导出</button>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
      var  exportBtn = document.getElementById('exportBtn')
      exportBtn.onclick = function () {  
        console.log(axios)
        
        axios.get('http://xxxx').then(function ({data}) {
        // data.content === 返回的base64 
          downloadFileByBase64(data.content, 'name.xlsx')
        })
      }
      // 下载文件
      const downloadFile = function (url, name) {
        var a = document.createElement("a")
        console.log(url)
        a.setAttribute("href", url)
        a.setAttribute("download", name)
        a.setAttribute("target", "_blank")
        let clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", true, true);
        a.dispatchEvent(clickEvent);
      }

      // base64转换
      const dataURLtoBlob = function (base64Str) {
        // 核心代码
        var bstr = atob(base64Str), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: 'application/vnd.ms-excel' }); // 文件对应type类型参照 见https://www.w3school.com.cn/media/media_mimeref.asp
      }
      // 方法调用 
      const downloadFileByBase64 = function (base64, name) {
        var myBlob = dataURLtoBlob(base64)
        var myUrl = URL.createObjectURL(myBlob)
        downloadFile(myUrl, name)
      }
</script>
</html>

不需要自己写下载方法，且兼容以下浏览器版本

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button id="exportBtn">导出</button>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://cdn.staticfile.org/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script>
      var  exportBtn = document.getElementById('exportBtn')
      exportBtn.onclick = function () {
      	//base64str == 返回的base64str
        downloadFileByBase64(base64str, 'name.xlsx')
        // axios.get('http://xxxx').then(function ({data}) {
        //   downloadFileByBase64(data.content, 'name.xlsx')
        // })
      }

      // base64转换
      const dataURLtoBlob = function (base64Str) {
        var bstr = atob(base64Str), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: 'application/vnd.ms-excel' }); // 文件对应type类型参照 见https://www.w3school.com.cn/media/media_mimeref.asp
      }

      // 方法调用 
      const downloadFileByBase64 = function (base64, name) {
        var myBlob = dataURLtoBlob(base64)
        var myUrl = URL.createObjectURL(myBlob)
        saveAs(myBlob, name)
      }
</script>
</html>

项目中引用

export function downloadBase64File(base64,name) {
  // 下载文件
  const downloadFile = function(url, name){
    var a = document.createElement("a")
    console.log(url)
    a.setAttribute("href",url)
    a.setAttribute("download",name)
    a.setAttribute("target","_blank")
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);  
    a.dispatchEvent(clickEvent);
  }
  
  // base64转换
  const dataURLtoBlob = function (base64Str) {
      var bstr = atob(base64Str), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: 'application/octet-stream' });
  }
  
  // 方法调用 
  const downloadFileByBase64 = function (base64,name){
      var myBlob = dataURLtoBlob(base64)
      var myUrl = URL.createObjectURL(myBlob)
      downloadFile(myUrl,name)
  }

  downloadFileByBase64(base64, name)
}

口袋里的神奇宝贝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
base64 转文件并下载

方法1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum.
复制链接

扫一扫