移动端js下载 base64 图片

图片下载

后端给的图片格式是 base64 码（'data:image/jpeg;base64,xxxxxxxxx' ）

一、直接 a 标签下载

  const a = document.createElement('a')
  const filename = 'picName.jpeg'
  a.href = picSrc  // picSrc  是图片 base64 码，可以直接给 img 的 src 属性，展示图片
  a.download = filename
  document.body.appendChild(a)
  a.click()
  setTimeout(() => {
    document.body.removeChild(a)
  }, 1000)

但是 这个方法，在 PC端浏览器 是可以的，但在手机移动端浏览器上，不行，文件下载失败。

二、在 a 标签的基础上，使用 blob 和 URL.createObjectURL

  let blob = base64ToBlob(picSrc)  // 转码
  const filename = 'picName.jpeg'
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  document.body.appendChild(a)
  a.href = url
  a.download = filename
  a.click();
  window.URL.revokeObjectURL(url)
  document.body.removeChild(a)

/**
 * base64转blob
 * @param {String} code base64个数数据
 * @return {undefined}
 * @author xxx
 */
base64ToBlob (code) {
  let parts = code.split(';base64,');
  let contentType = parts[0].split(':')[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;
  let uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new window.Blob([uInt8Array], {type: contentType});
}

let blob = base64ToBlob(dataUrl);

a标签直接下载dataurl的资源在移动端确实不行，已经踩过坑，可以通过URL.createObjectURL(blob)，方法转换成url赋值给href就可在移动端实现下载

blob在webviewe里面好像也不能下载

参考： https://juejin.cn/post/6844903763312902151