a标签的href属性长度限制、连接download属性下载内容为空

错误场景：

在前端使用canvas的toDataURL方法生成base64数据，然后通过动态生成a标签并设置download属性和href属性实现下载

但是发现数据量太大时，a标签的href属性就不会生效，此时下载框会显示url为空

解决方案：

可以通过blob对象，以及URL.createObjectURL(blob);方法将数据转换为url连接，然后将生成的连接赋值给a标签的href属性实现下载

base64转blob:

将base64解码成二进制数据，然后通过Blob构造函数生成blob对象

function base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) {
  return new Promise((resolve, reject) => {
    // 使用 atob() 方法将数据解码
    let byteCharacters = atob(b64data);
    let byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      let slice = byteCharacters.slice(offset, offset + sliceSize);
      let byteNumbers = [];
      for (let i = 0; i < slice.length; i++) {
          byteNumbers.push(slice.charCodeAt(i));
      }
      // 8 位无符号整数值的类型化数组。内容将初始化为 0。
      // 如果无法分配请求数目的字节，则将引发异常。
      byteArrays.push(new Uint8Array(byteNumbers));
    }
    let result = new Blob(byteArrays, {
      type: contentType
    })
    result = Object.assign(result,{
      // 这里一定要处理一下 URL.createObjectURL
      preview: URL.createObjectURL(result),
      name: `XXX.png`
    });
    resolve(result)
  })
}
// 调用
let base64 = base64.split(',')[1]
base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => {
  // 转后后的blob对象
  console.log('blob', res)
})