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

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

背景

實作影像下載

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

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中文網其他相關文章！