JS端實現圖片、視頻時直接下載而不是打開預覽

項目中的附件列表，通常情況都需要提供下載、刪除的功能，功能本身沒有什么要說的，都是基本功能，使用瀏覽器的的下載功能，也都是用window.open(url)，或者window.location.href=url的方式，url即為附件下載接口，瀏覽器自動解析，如果是圖片、視頻、txt等格式的會直接預覽文件，而不是像docx、xlsx一樣直接下載，項目中為了功能明確，將預覽單獨加了一個查看按鈕，下載按鈕要實現無論什么文件格式都直接下載。

 

有兩種方式處理：
一.后台接口層面處理：（比較常見）
響應頭中添加標識：
Response.AddHeader("Content-Disposition", "attachment; filename=" +
HttpUtility.UrlEncode(annotation.FileName, System.Text.Encoding.UTF8));

添加后，瀏覽器就會全都直接下載，不區分文件格式

 

二.前端JS使用XMLHttpRequest結合download.js處理

1）首先頁面中需要引用download.js

download官方：http://danml.com/download.html  

http://danml.com/js/download2.js

 

2）公共方法

 /*
        * 使用download.js 強制瀏覽器下載圖片、視頻等文件
        * @param {any} url url鏈接地址
        * @param {any} strFileName 文件名
        * @param {any} strMimeType 文件類型
        * dzl
        * 2020年5月8日
         */
        function downloadfile(url, strFileName, strMimeType) {
            var xmlHttp = null;
            if (window.ActiveXObject) {
                // IE6, IE5 瀏覽器執行代碼
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } else if (window.XMLHttpRequest) {
                // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
                xmlHttp = new XMLHttpRequest();
            }
            //2.如果實例化成功，就調用open（）方法：
            if (xmlHttp != null) {
                xmlHttp.open("get", url, true);
                xmlHttp.responseType = 'blob';//關鍵
                xmlHttp.send();
                xmlHttp.onreadystatechange = doResult; //設置回調函數
            }
            function doResult() {
                if (xmlHttp.readyState == 4) { //4表示執行完成
                    if (xmlHttp.status == 200) { //200表示執行成功
                        download(xmlHttp.response, strFileName, strMimeType);
                    }
                }
            }
        }

注意： xmlHttp.responseType = 'blob';是關鍵，必須要設置

3）下載按鈕點擊事件中調用公共方法

downloadfile(url, filename, getFileType(filename))

 

附上根據文件名的尾綴 返回文件類型的公共方法:

/*
 * 根據文件名的尾綴 返回文件類型
 * @param {any} fileName 文件名
 * dzl
 * 2020年5月9日
 */
function getFileType(fileName) {
    // 后綴獲取
    let suffix = '';
    // 獲取類型結果
    let result = '';
    try {
        const flieArr = fileName.split('.');
        suffix = flieArr[flieArr.length - 1];
    } catch (err) {
        suffix = '';
    }
    // fileName無后綴返回 false
    if (!suffix) { return false; }
    suffix = suffix.toLocaleLowerCase();
    // 圖片格式
    const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
    // 進行圖片匹配
    result = imglist.find(item => item === suffix);
    if (result) {
        return 'image';
    }
    // 匹配txt
    const txtlist = ['txt'];
    result = txtlist.find(item => item === suffix);
    if (result) {
        return 'txt';
    }
    // 匹配 excel
    const excelist = ['xls', 'xlsx'];
    result = excelist.find(item => item === suffix);
    if (result) {
        return 'excel';
    }
    // 匹配 word
    const wordlist = ['doc', 'docx'];
    result = wordlist.find(item => item === suffix);
    if (result) {
        return 'word';
    }
    // 匹配 pdf
    const pdflist = ['pdf'];
    result = pdflist.find(item => item === suffix);
    if (result) {
        return 'pdf';
    }
    // 匹配 ppt
    const pptlist = ['ppt', 'pptx'];
    result = pptlist.find(item => item === suffix);
    if (result) {
        return 'ppt';
    }
    // 匹配 視頻
    const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
    result = videolist.find(item => item === suffix);
    if (result) {
        return 'video';
    }
    // 匹配 音頻
    const radiolist = ['mp3', 'wav', 'wmv'];
    result = radiolist.find(item => item === suffix);
    if (result) {
        return 'radio';
    }
    // 其他 文件類型
    return 'other';
}

 

部分技術參考：

https://www.cnblogs.com/allen0118/p/12793501.html

https://blog.csdn.net/u014643351/article/details/99303871