前端实现文件下载的两种方式

最新推荐文章于 2024-07-03 23:56:01 发布

weixin_34321753

最新推荐文章于 2024-07-03 23:56:01 发布

阅读量791

点赞数

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/u/1760791/blog/671360

版权

2019独角兽企业重金招聘Python工程师标准>>>

前端实现触发文件下载有两种思路：一种是利用window.location.href去拼接参数；另一种是使用隐藏的iframe+form去发送请求下载文档。

对于使用window.location.href这种方式从后下载链接只能使用get方式，且发送的中文参数值需要转码，后台接收参数也需要转码

对于使用iframe+form的方式就是直接使用表单去提交请求。使用post方式是非常爽的，后端无需处理中文参数，下面直接看具体的代码：

1.采用window.location.href加拼接url实现文件下载

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，如果参数多了这是一个很累的事情

不防改进一下代码让程序去自动拼装链接

/**
 *
 * @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";
    }
}

使用就变得简单了

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

2.采用影藏iframe+form实现文件下载

有了上面的例子这里就不废话了，直接上代码。

/**
         * 使用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,他的使用也很简单

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"
    }
}

转载于:https://my.oschina.net/u/1760791/blog/671360