您好,登錄后才能下訂單哦!
小編給大家分享一下如何解決H5的a標(biāo)簽的download屬性下載service上的文件出現(xiàn)跨域問題,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
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; }; ```
看完了這篇文章,相信你對(duì)“如何解決H5的a標(biāo)簽的download屬性下載service上的文件出現(xiàn)跨域問題”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。