通过DataUrl或BlobUrl可以实现图片、文本文件、html不预览直接下载

1.Dataurl方式：

 // ./util.js
 // 图片转base64
 function image2base64(img) {  
  const canvas = document.createElement("canvas");  
  canvas.width = img.width;  
  canvas.height = img.height;  
  const ctx = canvas.getContext("2d");  
  ctx.drawImage(img, 0, 0, img.width, img.height);  
  const mime = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
  const dataUrl = canvas.toDataURL("image/" + mime);  
  return dataUrl;
 }
 // html页面，将a标签href属性动态赋值为dataUrl
 下载data:Url图片
 ...
 

2.BlobUrl 整体逻辑更复杂了，首先 文件 -> base64(dataUrl) -> blob -> blobUrl。

 // 第一步：首先需要将文件转换成base64，方法上面一样
 // 第二步：将base64转换成blob数据
 // DataUrl 转 Blob数据
    function dataUrl2Blob(dataUrl) {
      var arr = dataUrl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bStr = atob(arr[1]),
          n = bStr.length,
          unit8Array = new Uint8Array(n);
      while (n--) {
        unit8Array[n] = bStr.charCodeAt(n);
      }
      return new Blob([unit8Array], { type: mime });
    } 
 // 第三步： 将blob数据转换成BlobUrl
 URL.createObjectURL(imageBlobData);
 
 // 完整代码
  下载blobUrl图片
  ...
  const image2 = new Image();  
  image2.setAttribute("crossOrigin",'Anonymous');
  image2.src = '../files/test-download.png' + '?' + new Date().getTime();
  image2.onload = function() {  
    const imageDataUrl = image2base64(image2);
    const imageBlobData = dataUrl2Blob(imageDataUrl);
    const downloadDataUrlDom = document.getElementById('downloadBlobUrl');
    downloadDataUrlDom.setAttribute('href', URL.createObjectURL(imageBlobData));
    downloadDataUrlDom.setAttribute('download', 'download-data-url.png');
    downloadDataUrlDom.addEventListener('click', () => {
      console.log('下载文件');
    });
  }

二者总体来说都存在一些问题，不能直接下载图片和文本文件，但是毕竟这么简洁，你没进行任何多余的操作，存在问题合情合理。同时，上面的几种方式也看到了，dataUrl适合图片的下载，而blobUrl虽然要麻烦一些，但是对于文本文件的下载还是非常有用的，你可以直接把要下载的内容转换成blob数据，然后转换成blobUrl进行下载，适用于.txt，.json等文件类型。

如果下载的需求是特殊文件类型，如安装包，excel文件，并且可以存放在CDN又一个可访问的url链接。那么这种方式非常完美，当然，如果你可以接受上面所说的兼容性问题。同时如果你采用dataUrl或者blobUrl的时候，由于存在很多问题，比如cors之类的事情，建议可以使用这种方法，但是需要配合后端，也就是后端帮你转换好，你直接拿转换好的url来下载就行了。