首頁 > web前端 > js教程 > 如何使用客戶端程式設計強制瀏覽器下載圖片?

如何使用客戶端程式設計強制瀏覽器下載圖片?

Patricia Arquette
發布: 2024-11-09 05:56:02
原創
215 人瀏覽過

How to Force Browser Downloads for Images Using Client-Side Programming?

使用客戶端程式強制瀏覽器下載圖片

背景

實作影像下載

單獨使用客戶端編程,可實現影像下載,如下所示:

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    if (element.innerHTML == "Image") {
        var name = element.nameProp;
        var address = element.href;
        saveImageAs1(element.nameProp, element.href);
        return false; // Prevent default action and stop event propagation
    }
    else
        return true;
};

function saveImageAs1(name, address) {
    if (confirm('you wanna save this image?')) {
        window.win = open(address);
        setTimeout('win.document.execCommand("SaveAs")', 100);
        setTimeout('win.close()', 500);
    }
}
登入後複製
此程式碼攔截影像元素上的按一下事件,並提示使用者使用「另存為」對話方塊將其儲存。

Excel 下載案例

對於 Excel 下載,瀏覽器在內部處理下載過程。它們根據 MIME 類型識別文件類型,並觸發適當的下載行為,無需任何額外的程式設計。

HTML5 'download' 屬性

但是,較新的瀏覽器支援 的「下載」屬性元素,它提供了更方便的方式來啟動圖片下載:

<a href="http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>
登入後複製
此屬性提示瀏覽器使用提供的檔案名稱或原始檔案名稱(如果未指定)下載映像。請注意,出於安全考慮,自 2018 年起不再支援使用此方法的跨來源下載。

以上是如何使用客戶端程式設計強制瀏覽器下載圖片?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板