仓库源文，站点原文

title: JavaScript多文件下载 categories:

• JavaScript
• 前端杂烩
• 网络交互 tags:
• tech
• cnblogs
• 多文件下载 warning: true mark: hot date: 2014-02-12 09:50:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2014/02/12/multiple-download-with-javascript.html from: 博客园

<a href="http://barretlee.com/test.rar">file</a>

文本： data:text/plain;这里是正文内容。
图片： data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA....
       data:image/png;base64,/9j/4AAQSkZJRgABAQEA....

Base64格式
data:[][;charset=][;base64],
Base64 在CSS中的使用：
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
Base64 在HTML中的使用：
<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....">

<h4>3. Blob 流</h4>

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob

h5Down = document.createElement("a").hasOwnProperty("download");
var h5Down = !/Trident|MSIE/.test(navigator.userAgent); // Trident 标识 IE11

<h4>1. a 标签 download 属性的使用</h4>

function downloadFile(fileName, content){
    var aLink = document.createElement("a"),
        evt = document.createEvent("HTMLEvents");

    evt.initEvent("click");
    aLink.download = fileName;
    aLink.href = content;

    aLink.dispatchEvent(evt);
}

downloadFile("barretlee.html", "./");

function downloadFile(fileName, content){
    var aLink = document.createElement('a');
      , blob = new Blob([content])
      , evt = document.createEvent("HTMLEvents");

    evt.initEvent("click");

    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

// 将文件在一个 window 窗口中打开，并隐藏这个窗口。
var win = window.open("path/to/file.ext", "new Window", "width=0,height=0");
// 在 win 窗口中按下 ctrl+s 保存窗口内容
win.document.execCommand("SaveAs", true, "filename.ext");
// 使用完了，关闭窗口
win.close();

function IEdownloadFile(fileName, contentOrPath){
    var ifr = document.createElement('iframe');

    ifr.style.display = 'none';
    ifr.src = contentOrPath;

    document.body.appendChild(ifr);

    // 保存页面 -> 保存文件
    ifr.contentWindow.document.execCommand('SaveAs', false, fileName);
    document.body.removeChild(ifr);
}

var isImg = contentOrPath.slice(0, 10) === "data:image"；

// dataURL 的情况
isImg && ifr.contentWindow.document.write("<img src="" +
        contentOrPath + "">");

Downer("./file/test.txt");

Downer(["./file/test.txt","./file/test.txt"]);

Downer({
    "1.txt":"./file/test.txt",
    "2.jpg":"./file/test.jpg"
});

Downer({     //这是一个很长的 dataURI，我用负的text-indent隐藏了，可直接复制    "data64.jpg" : "data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAYADsDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9NgKKK8w8beO/EMVzGdJ08W2jW2t2WnXGpLdx+e7PPEkii3eJgYj5mwsJFkzkquAC3VFc0lFf10/UOlz1CivO9H+LEmreP7jw8mlBrLfPDa6nC1y0cksX30Z2t1hGCHBEcsjAqQVHOJPCfjnxFc+HNU1rxPpmh6Vp9mt232i01WWXmGV0IdXt0CrhD8+45xnaM4A00uZ9rgtZcq3vb5noFLXCfDz4j3vjbT9XM+hSabqdhtItWFxGswZCybTc28DjJDAkx7fRjzi/qmv6zH8LdR1m6sP+Ef12PSprprPzkufssyxMwXeBtfBA5xg0OLi2n/Vwh+8aUep1gFLXGeKhqmj+FtGmt9fvvtVvfWMc9w0VsWvUkuI43WUeVtAIcnMYQggYI6Hs6lqwk7pPuNrkPEHwn8N+KNRkvdQh1BpZJY7ho7fVru3haWPbslMUcqpvXYhD7d2VU54FFFNNxd1uPyJIfhb4dt/EkOuxwXy6hBNJPD/xNLryImkz5myHzPLUNkllC4J5IyAaWP4W+GY7+/uzp7yy3sc8UiTXc0kUazHdMIo2cpDvPLeWFyeTRRRd9wH6B8NNB8NyapJZx38kmpxrFePe6pdXbTKAQMmaRjkAkZHOMDOAKmbwLp9n8Pp/CGkr/Zmm/wBnyadbjLS+QjIUB+ZstjPdsn1oopOTfUa91prdf1+hFrfhnWNb0HSLCTVrGOaC6tbi+mXT323CwyrJtiXzv3RZkXljJgZ4PWuooopNtkpWVkf/2Q==" });

function download(path) {
    var ifrm = document.getElementById(frame);
    ifrm.src = "download.php?path="+path;
}

<?php
   header("Content-Type: application/octet-stream");
   header("Content-Disposition: attachment; filename=".$_GET['path']);
   readfile($_GET['path']);
?>

<filesmatch "\.(zip|rar)$"="">
Header set Content-Disposition attachment
</filesmatch>

<p>意思是只要请求的是 zip 或者 rar 类型的文件，那么就添加一个 <code>Content-Disposition:attachment</code> 的响应头。这样就可以在 php 代码中省略麻烦的操作。</p>

<h3>五、小结</h3>

<p>由于行文仓促，文中会有不少错误，对多文件下载有更好的提议，希望提出来共同分享！</p>

<p>实现多文件下载的方式肯定不止上面提到的几种，而且我这里封装的代码并没有在FF safari opera 中实现，因为他们还没兼容 download 属性，具体情况可以查看 <a href="http://caniuse.com/#feat=download" target="_blank">caniuse</a> 。建议在项目中把这样的事情交给后端，几句代码可以搞定。</p>

<h3>六、参考资料</h3>