• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

js 预览,下载返回的base64文件流

武飞扬头像
前端coder
帮助2


function dataURLtoBlob(dataurl) {
  var arr = dataurl?.split(','), mime = arr && arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr && arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

function downloadFile(url, name) {
  var a = document.createElement("a") //新建一个a链接
  a.setAttribute("href", url) // a链接的url为图片的url
  a.setAttribute("download", name)
  a.setAttribute("target", "_blank")
  let clickEvent = document.createEvent("MouseEvents");
  clickEvent.initEvent("click", true, true);
  a.dispatchEvent(clickEvent);
}

function downloadFileByBase64(base64, name) {
  var myBlob = dataURLtoBlob(base64);
  var myUrl = URL.createObjectURL(myBlob); //创建图片的临时url
  downloadFile(myUrl, name)
}

获取前缀

const getBase64Type = (type) => {
  switch (type) {
    case 'txt': return 'data:text/plain;base64,'
    case 'doc': return 'data:application/msword;base64,'
    case 'docx': return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'
    case 'xls': return 'data:application/vnd.ms-excel;base64,'
    case 'xlsx': return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'
    case 'pdf': return 'data:application/pdf;base64,'
    case 'pptx': return 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,'
    case 'ppt': return 'data:application/vnd.ms-powerpoint;base64,'
    case 'png': return 'data:image/png;base64,'
    case 'jpg': return 'data:image/jpeg;base64,'
    case 'gif': return 'data:image/gif;base64,'
    case 'svg': return 'data:image/svg xml;base64,'
    case 'ico': return 'data:image/x-icon;base64,'
    case 'bmp': return 'data:image/bmp;base64,'
    case 'ofd': return 'data:application/octet-stream;base64,'
  }
}

```


使用 
```
  downloadFileByBase64(getBase64Type(temp)   file.fileData, name)
```

预览

```
// 需要有图片前缀
<img :src="data.img" alt="">
```

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhchbjj
系列文章
更多 icon
同类精品
更多 icon
继续加载