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图片...const image = new Image(); image.setAttribute("crossOrigin",'Anonymous'); image.src = '../files/test-download.png' + '?' + new Date().getTime(); image.onload = function() { const imageDataUrl = image2base64(image); const downloadDataUrlDom = document.getElementById('downloadDataUrl'); downloadDataUrlDom.setAttribute('href', imageDataUrl); downloadDataUrlDom.setAttribute('download', 'download-data-url.png'); downloadDataUrlDom.addEventListener('click', () => { console.log('下载文件'); }); }复制代码
如下图,可以看到不再是预览文件,而是直接下载文件了。这里面有一些坑,比如canvas.toDataUrl的一些问题以及解决办法,我就不多说了,大家自己去看看。
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('下载文件'); }); } 复制代码
【总结】: Chrome在兼容性上更胜一筹,但是二者总体来说都存在一些问题,不能直接下载图片和文本文件,但是毕竟这么简洁,你没进行任何多余的操作,存在问题合情合理。同时,上面的几种方式也看到了,dataUrl适合图片的下载,而blobUrl虽然要麻烦一些,但是对于文本文件的下载还是非常有用的,你可以直接把要下载的内容转换成blob数据,然后转换成blobUrl进行下载,适用于.txt,.json等文件类型。