使用a标签进行下载
<ahref="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">下载</a>
出现的问题
如果使用a标签指向一个图片，
你会发现点击链接时它会直接在浏览器中打开图片并显示.
并不是下载到本地，与我们的初衷相违背
我们应该如何去解决这个问题了。
尝试了将图片转成Base64或者Blob的办法
function downloadImgByBlob(url) { var img = new Image() img.onload = function() { var canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height var ctx = canvas.getContext('2d') // 将img中的内容画到画布上 ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 将画布内容转换为Blob canvas.toBlob((blob) => { // blob转为同源url var blobUrl = window.URL.createObjectURL(blob) // 创建a链接 var a = document.createElement('a') a.href = blobUrl a.download = '' // 触发a链接点击事件，浏览器开始下载文件 a.click() }) } img.src = url // 必须设置，否则canvas中的内容无法转换为blob img.setAttribute('crossOrigin', 'Anonymous') } function downloadImgByBase64(url) { var img = new Image() img.onload = function() { var canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height var ctx = canvas.getContext('2d') // 将img中的内容画到画布上 ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 将画布内容转换为base64 var base64 = canvas.toDataURL() // 创建a链接 var a = document.createElement('a') a.href = base64 a.download = '' // 触发a链接点击事件，浏览器开始下载文件 a.click() } img.src = url // 必须设置，否则canvas中的内容无法转换为base64 img.setAttribute('crossOrigin', 'Anonymous') }
出现的问题
上述两种方法效果都不太理想。因为这两种方法仅支持生成jpeg和png格式图片。如果是gif图，仅能显示第一帧的内容
通过XMLHttpRequest()请求图片链接
<button @click="myFileDownLoad"> 下载</button> myFileDownLoad(){ var x=new XMLHttpRequest(); x.open("GET", "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986179278,1118313821&fm=27&gp=0.jpg", true); x.responseType = 'blob'; x.onload=function(){ var url = window.URL.createObjectURL(x.response) var a = document.createElement('a'); a.href = url a.download = '你的下载' a.click() } x.send(); }
该示例的思路是，通过XMLHttpRequest()请求图片链接，然后获取返回的Blob。那结合
上面下载图片的方法，就能下载图片了:
通过这种方法下载图片，gif图也能够显示正常了。
注意，上述方法能够兼容大部分浏览器，但是不兼容IE浏览器(不支持download属性)。要兼容IE浏览器需要用其他办法。
下载的链接好像要是https的才行 （我下载的都是https的图片）
ps:语法
objectURL = URL.createObjectURL(object);
参数object；用于创建 URL 的 File 对象、Blob 对象或者 MediaSource(媒体资源) 对象。
返回值：该URL可用于指定源 object的内容
文件下载 既可以下载图片又可以任意文件类型[xls，word,mp4]
function downLoad(item) { //filePathUrl是一个https的地址哈。 if (item.filePathUrl) { // 下载https的图片 let fileType = item.fileName.split('.').pop() let canDownFileType = ['jpg', 'png', 'gif', 'webp', 'jpeg'] if (canDownFileType.indexOf(fileType) != -1) { // 下载的是图片 var x = new XMLHttpRequest() x.open('GET', item.filePathUrl, true) x.responseType = 'blob' x.onload = function (e) { var url = window.URL.createObjectURL(x.response) var a = document.createElement('a') a.href = url a.download = item.fileName //图片的下载名称 a.click() } x.send() } else { // // 下载的是文件类型的， var url = item.filePathUrl var xhr = new XMLHttpRequest() xhr.open('GET', url, true) xhr.responseType = 'blob' xhr.onload = function () { if (xhr.status === 200) { var blob = xhr.response var link = document.createElement('a') var body: any = document.querySelector('body') link.href = window.URL.createObjectURL(blob) link.download = item.fileName link.style.display = 'none' body.appendChild(link) link.click() body.removeChild(link) } } xhr.send() } } else { window.$message.error('资源地址不存在') } }
继续优化可以通过http下载任意文件
function downLoad = (url, item) => { var xhr = new XMLHttpRequest() xhr.open('GET', url, true) xhr.responseType = 'blob' xhr.onload = function () { if (xhr.status === 200) { var blob = xhr.response var link = document.createElement('a') var body: any = document.querySelector('body') link.href = window.URL.createObjectURL(blob) link.download = item.name link.style.display = 'none' body.appendChild(link) link.click() body.removeChild(link) } } xhr.send() }
