最近在做一个文件下载的功能,这里把做的过程中用的技术和坑简要总结下1. 单文件下载1.1 同源单文件针对单文件的情况下,同源的文件,可以通过 标签的 download 属性下载文件 const elt = document.createElement(‘a’); elt.setAttribute(‘href’, url); elt.setAttribute(‘download’, ‘file.png’); elt.style.display = ’none’; document.body.appendChild(elt); elt.click(); document.body.removeChild(elt);但是这个方案并不适用于非同源的资源,此时它相当于普通的超链接,点击会跳转到资源页面,而不是下载。1.2 非同源图片针对于非同源图片,可以考虑使用 canvas 将图片转换成 base64 编码之后再通过 标签的 download 属性下载function downloadPic(url) { const img = new Image; const canvas = document.createElement(‘canvas’); const ctx = canvas.getContext(‘2d’); img.onload = function() { canvas.width = this.width; canvas.height = this.height; ctx.drawImage(this, 0, 0); const elt = document.createElement(‘a’); elt.setAttribute(‘href’, canvas.toDataURL(‘image/png’)); elt.setAttribute(‘download’, ‘file.png’); elt.style.display = ’none’; document.body.appendChild(elt); elt.click(); document.body.removeChild(elt); }; img.crossOrigin = ‘anonymous’; img.src = url;}