js工具函數之根據url地址下載

 

對於一些瀏覽器不支持打開的文件都好辦些。能打開的包括 html文件，pdf和圖片等要特殊處理

下載使用a標籤。

a標籤下有一個download屬性

此屬性指示瀏覽器下載 URL 而不是導航到它，因此將提示用戶將其保存爲本地文件。如果屬性有一個值，那麼此值將在下載保存過程中作爲預填充的文件名（如果用戶需要，仍然可以更改文件名）。此屬性對允許的值沒有限制，但是 / 和 \ 會被轉換爲下劃線。大多數文件系統限制了文件名中的標點符號，故此，瀏覽器將相應地調整建議的文件名。

注意:

• 此屬性僅適用於同源 URL。
• 儘管 HTTP URL 需要位於同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用戶下載使用 JavaScript 生成的內容（例如使用在線繪圖 Web 應用程序創建的照片）。
• 如果 HTTP 頭中的 Content-Disposition 屬性賦予了一個不同於此屬性的文件名，HTTP 頭屬性優先於此屬性。
• 如果 HTTP 頭屬性 Content-Disposition 被設置爲inline（即 Content-Disposition='inline'），那麼 Firefox 優先考慮 HTTP 頭 Content-Dispositiondownload 屬性。

 

對於圖片下載推薦

1. PC端，使用 download 。
2. 移動端， 長按保存圖片。

以下對於js下載文件類工具函數

function download (url) {
    var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
    if (isChrome || isSafari) {
        var link = document.createElement('a');
        link.href = url;
        if (link.download !== undefined) {
            var fileName = url.substring(url.lastIndexOf('/') + 1, url.length);
            link.download = fileName;
        }
        if (document.createEvent) {
            var e = document.createEvent('MouseEvents');
            e.initEvent('click', true, true);
            link.dispatchEvent(e);
            return true;
        }
    }
    if (url.indexOf('?') === -1) {
        url += '?download';
    }
    window.open(url, '_self');
    return true;
}

其他情況都與後臺的請求頭有關，告知瀏覽器需要以什麼格式是讀取還是下載。後臺的請求說了算。。除了前端設置外。後臺的設置至關重要！！！