前端實現文件下載的兩種方式

時間 2019-12-23

標籤前端實現文件下載兩種方式简体版

原文原文鏈接

前端實現觸發文件下載有兩種思路：一種是利用window.location.href去拼接參數；另外一種是使用隱藏的iframe+form去發送請求下載文檔。javascript

對於使用window.location.href這種方式從後下載連接只能使用get方式，且發送的中文參數值須要轉碼，後臺接收參數也須要轉碼html

對於使用iframe+form的方式就是直接使用表單去提交請求。使用post方式是很是爽的，後端無需處理中文參數，下面直接看具體的代碼：前端

1.採用window.location.href加拼接url實現文件下載java

var name = encodeURI(encodeURI('張三'));//對於get方式的請求中文必須轉碼，不然後臺會亂碼
var age = 30;
var gender = 1;

var url = "baidu.com?name="+ name + "&age=" + age+"&gender="+gender;
window.location.href = url;

不少初學前端的會這樣寫也沒有錯誤，可是發現問題了，每次都須要手寫拼url，若是參數多了這是一個很累的事情jquery

不防改進一下代碼讓程序去自動拼裝連接後端

/**
 *
 * @param url
 * @param params
 */
function download(url, params) {
    if (params instanceof Object && !(params instanceof Array)) {
        var pm = params || {};
        var arr = [];
        arr.push(url);
        var j = 0;
        for (var i in pm) {
            if (j === 0) {
                arr.push("?");
                arr.push(i + "=" + pm[i]);
            } else {
                arr.push("&" + i + "=" + pm[i]);
            }
            j++;
        }
        window.location.href = arr.join("");
    } else {
        throw "param is not plain Object";
    }
}

使用就變得簡單了app

var url = "baidu.com";
var params = {
    name:encodeURI(encodeURI('張三')),
    age:1
}
download(url,params);

2.採用影藏iframe+form實現文件下載post

有了上面的例子這裏就不廢話了，直接上代碼。url

/**
         * 使用post方式
         * @param url
         * @param params
         *  params is javascript plain object
         */
        download function (url, params) {
            var $iframe, iframeDoc, iframeHtml;
            if (($iframe = $('#download_iframe')).length === 0) {
                $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                ).appendTo("body");
            }
            iframeDoc = $iframe[0].contentWindow || $iframe[0].contentDocument;
            if (iframeDoc.document) {
                iframeDoc = iframeDoc.document;
            }
            iframeHtml = "<html><head></head><body><form method='POST' action='" + url + "'>"
            Object.keys(params).forEach(function (key) {
                iframeHtml += "<input type='hidden' name='" + key + "' value='" + data[key] + "'>";
            });
            iframeHtml += "</form></body></html>";
            iframeDoc.open();
            iframeDoc.write(iframeHtml);
            $(iframeDoc).find('form').submit();
        }

依賴與jquery,他的使用也很簡單code

var url = "baidu.com";
var params = {
    name:'張三',
    age:1
}
//參數無需對中文處理
download(url,params);

上面已經很好使用了，可是有些時候咱們並不須要使用jquery庫，因此採用原生的javascript去實現

/**
 *
 * @param url
 * @param params
 */
function download(url, params) {
    if (params instanceof Object && !(params instanceof Array)) {
        var downloadFrame = document.getElementById('ownloadFrame');
        if (downloadFrame === null) {
            downloadFrame = document.createElement('iframe');
            downloadFrame.src = "about:blank";
            downloadFrame.style.display = 'none';
            downloadFrame.id = "downloadFrame";
            downloadFrame.name = "downloadFrame";
            document.body.appendChild(downloadFrame);
        }
        var frameDocument = downloadFrame.contentWindow.document;
        frameDocument.open();
        frameDocument.close();
        var downloadForm = frameDocument.createElement("form");
        downloadForm.setAttribute("target", "downloadFrame");
        downloadForm.setAttribute("method", "POST");
        downloadForm.setAttribute("action", url);
        for (var key in params) {
            var hiddenField = frameDocument.createElement("input");
            hiddenField.setAttribute('type', "hidden");
            hiddenField.setAttribute('name', key);
            hiddenField.setAttribute('value', params[key]);
            downloadForm.appendChild(hiddenField);
        }
        downloadFrame.appendChild(downloadForm);
        downloadForm.submit();
    } else {
        throw "param is not plain Object"
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。