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

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="">
```

这篇好文章是转载于：编程之路