1.通過點(diǎn)擊下載多媒體文件(圖片/視頻/文件等)
最簡(jiǎn)單的方式：
<a href='url' download="filename.ext">下載文件</a>
如果url指向同源資源，是正常的。
如果url指向第三方資源，download會(huì)失效，表現(xiàn)和不使用download時(shí)一致——瀏覽器能打開的文件，瀏覽器會(huì)直接打開，不能打開的文件，會(huì)直接下載。瀏覽器打開的文件，可以手動(dòng)下載。
解決方案一：將文件打包為.zip/.rar等瀏覽器不能打開的文件下載。
解決方案二：通過后端轉(zhuǎn)發(fā)，后端請(qǐng)求第三方資源，返回給前端，前端使用file-saver等工具保存文件。
如果url指向的第三方資源配置了CORS，download屬性無效，但可以獲取文件下載到本地，無法修改修改文件名。
2.解決方法
1. 借助HTML5 Blob實(shí)現(xiàn)文本信息文件下載
const downloadRes = async (url, name) => { let response = await fetch(url) // 內(nèi)容轉(zhuǎn)變成blob地址 let blob = await response.blob() // 創(chuàng)建隱藏的可下載鏈接 let objectUrl = window.URL.createObjectURL(blob) let a = document.createElement('a') //地址 a.href = objectUrl //修改文件名 a.download = name // 觸發(fā)點(diǎn)擊 document.body.appendChild(a) a.click() //移除 setTimeout(() => document.body.removeChild(a), 1000)}2.圖片格式
如果我們想下載一張圖片，可以把這張圖片轉(zhuǎn)換成base64格式，然后下載。
```export const downloadImg = async (url, name) => { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); let a = document.createElement('a'); a.href = dataURL; a.download = name; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); canvas = null; }, 1000); }; img.src = url;};```以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
