成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端實(shí)現(xiàn)圖片下載

MingjunYang / 1648人閱讀

摘要：測(cè)試說(shuō)明位位位位服務(wù)端實(shí)現(xiàn)下載通過(guò)修改響應(yīng)頭，告訴瀏覽器這個(gè)請(qǐng)求回來(lái)的是個(gè)附件。控制用戶請(qǐng)求所得的內(nèi)容存為一個(gè)文件的時(shí)候提供一個(gè)默認(rèn)的文件名，文件直接在瀏覽器上顯示或者在訪問時(shí)彈出文件下載對(duì)話框。

測(cè)試說(shuō)明

Chrome 65.0.3325.181 (64 位)

Chrome 69.0.3497.92 (64 位)

IE 11.0.9600.19002 (64 位)

Firefox 61.0.1 (64 位)

服務(wù)端實(shí)現(xiàn)下載

通過(guò)修改 HTTP 響應(yīng)頭，告訴瀏覽器這個(gè)請(qǐng)求回來(lái)的是個(gè)附件。以七牛為例子：

這里需要注意兩處：

Content-disposition 是 MIME 協(xié)議的擴(kuò)展，MIME 協(xié)議指示 MIME 用戶代理如何顯示附加的文件?？刂朴脩粽?qǐng)求所得的內(nèi)容存為一個(gè)文件的時(shí)候提供一個(gè)默認(rèn)的文件名，文件直接在瀏覽器上顯示或者在訪問時(shí)彈出文件下載對(duì)話框。

Access-Control-Allow-Origin 跨域資源共享設(shè)置

前端方案 通過(guò) 的 download 屬性 
下載圖片

拋開瀏覽器兼容性，還有幾點(diǎn)限制：

href 所指向的地址，必須與當(dāng)前網(wǎng)站同源，否則

chrome 65.0.3325.181 下測(cè)試，只能下載不能改名

chrome 69.0.3497.92 中已經(jīng)嚴(yán)格遵循同源策略的限制，如果加載了非同源的內(nèi)容，download 屬性將失效，等效導(dǎo)航功能。

Firefox 61.0.1同上

其它限制

通過(guò) js 動(dòng)態(tài)創(chuàng)建 并設(shè)置 download 屬性

原理和限制同上，代碼如下：（不支持IE）

function download(url, name) {
    const aLink = document.createElement("a")
    aLink.download = name 
    aLink.href = url 
    aLink.dispatchEvent(new MouseEvent("click", {}))
}

以導(dǎo)出 canvas 圖片為例：

const canvas = document.getElementById("canvas")
download(canvas.toDataURL("image/png"), "name.png")
通過(guò) js 創(chuàng)建

網(wǎng)上有很多文章都提到這個(gè)方案，但是這里不推薦：

document.execCommand("SaveAs") 中 SaveAs 是個(gè)非標(biāo)準(zhǔn)值，主要用來(lái)兼容 ie 不支持 標(biāo)簽 download 屬性的場(chǎng)景

window.frames["iframeName"].document 受到同源策略的影響，如果圖片地址跨域，是無(wú)法訪問的 的屬性和方法

參考

header中Content-Disposition的作用與使用方法

Does execCommand SaveAs work in Firefox?

在瀏覽器端用JS創(chuàng)建和下載文件 In JavaScript on 2014年01月03日

How to clone or re-dispatch DOM events?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91416.html

相關(guān)文章

  • node實(shí)現(xiàn)文件下載不得不說(shuō)的那些事兒

    摘要：如果像本例中這樣的場(chǎng)景會(huì)遇到這樣一個(gè)問題，詳見鏈接當(dāng)請(qǐng)求參數(shù)過(guò)長(zhǎng)或?yàn)榱税踩?，就需要用到下載。寫到這里自己都忍不住想錘自己，給自己挖坑不說(shuō)，這樣來(lái)回請(qǐng)求下載，流量，真的是敗家。 這幾天一直在做遠(yuǎn)程文件下載的事，現(xiàn)在總算有了解決，特來(lái)記錄一下踩過(guò)的坑和想揍自己的心 需求 應(yīng)用場(chǎng)景是這樣的，底層邏輯數(shù)據(jù)請(qǐng)求接口是由Java寫的，也就是說(shuō)原始文件存在Java服務(wù)端,返回時(shí)有加密措施 由于工作...

    Coly 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-06-06）-下載文件&下載進(jìn)度

    摘要：前端最基礎(chǔ)的就是。一個(gè)朋友的問題，監(jiān)測(cè)下載進(jìn)度。這節(jié)主要是講如何使用，以及前端下載的核心操作。下載文件，并顯示進(jìn)度條。下載文件，并顯示進(jìn)度條下載文件上面已經(jīng)實(shí)現(xiàn)了，那我們先說(shuō)說(shuō)如何顯示進(jìn)度條。實(shí)現(xiàn)代碼如下，我們操作成讀流，然后統(tǒng)計(jì)長(zhǎng)度。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（H...

    sPeng 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-06-06）-下載文件&下載進(jìn)度

    摘要：前端最基礎(chǔ)的就是。一個(gè)朋友的問題，監(jiān)測(cè)下載進(jìn)度。這節(jié)主要是講如何使用，以及前端下載的核心操作。下載文件，并顯示進(jìn)度條。下載文件，并顯示進(jìn)度條下載文件上面已經(jīng)實(shí)現(xiàn)了，那我們先說(shuō)說(shuō)如何顯示進(jìn)度條。實(shí)現(xiàn)代碼如下，我們操作成讀流，然后統(tǒng)計(jì)長(zhǎng)度。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（H...

    freecode 評(píng)論0 收藏0

  • 精彩文章大合集- 收藏集 - 掘金

    摘要：發(fā)布應(yīng)用市場(chǎng)的平臺(tái)搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點(diǎn)個(gè)開源不易。作者將原素材文章進(jìn)行了新內(nèi)容的添加和重新排列，但是因?yàn)槲恼赂咝У拇a編寫技巧總結(jié)前端掘金本文總結(jié)了代碼編寫技巧，來(lái)提升你的和代碼。 收藏安卓開發(fā)中非常實(shí)用優(yōu)秀的庫(kù)! 有圖有真相! - Android - 掘金本來(lái)是打算收藏工具類的,但轉(zhuǎn)念一想,已經(jīng)有這么多優(yōu)秀的庫(kù)了,就沒必要再去重復(fù)造輪子了,便歸納工作中比...

    ermaoL 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<