下载数据url文件
我玩的是一个完全基于JavaScript的zip / unzip工具，任何人都可以从浏览器访问的想法。 他们可以直接拖动他们的zip到浏览器，它会让他们下载所有的文件。 他们也可以通过拖入单个文件来创build新的zip文件。
我知道最好是在服务器端做，但这个项目只是一个有趣的。
如果我利用各种可用的方法，将文件拖到浏览器应该很容易。 （Gmail风格）
编码/解码应该没问题。 我见过一些as3 zip库，所以我相信我应该没问题。
我的问题是最后下载文件..
window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 这在Firefox中工作正常，但不是在铬。
我可以使用<img src="data:jpg/image;ba.." />在文件中embedded文件，但文件不一定是图片。 他们可以是任何格式。
任何人都可以想到另一种解决scheme或某种工作？
思路：
-
试试
<a href="data:...." target="_blank">（未经testing） -
使用downloadify而不是数据url（也适用于IE）
如果您还想给文件一个build议的名称（而不是默认的“下载”），您可以在Chrome，Firefox和一些IE版本中使用以下内容：
function downloadURI(uri, name) { var link = document.createElement("a"); link.download = name; link.href = uri; document.body.appendChild(link); link.click(); document.body.removeChild(link); delete link; }
下面的例子显示了它的用法：
downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");
想分享我的经验，并帮助别人卡住下载不工作在Firefox和更新的答案到2014年。下面的片段将在Firefox和铬都工作，它会接受一个文件名：
// Construct the <a> element var link = document.createElement("a"); link.download = thefilename; // Construct the uri var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data link.href = uri; document.body.appendChild(link); link.click(); // Cleanup the DOM document.body.removeChild(link); delete link;
有几个解决scheme，但他们依赖于HTML5，尚未完全在一些浏览器中实现。 以下示例在Chrome和Firefox中进行了testing（部分工作）。
- Canvas示例与保存到文件的支持。 只需将您的
document.location.href设置为数据URI即可。 - 锚下载的例子 。 它使用
<a href="your-data-uri" download="filename.txt">指定文件名。
这里是一个纯粹的JavaScript解决scheme，我testing了在Firefox和Chrome中工作，但不在IEXPLORER中：
function downloadDataUrlFromJavascript(filename, dataUrl) { // Construct the a element var link = document.createElement("a"); link.download = filename; link.target = "_blank"; // Construct the uri link.href = dataUrl; document.body.appendChild(link); link.click(); // Cleanup the DOM document.body.removeChild(link); delete link; }
跨浏览器的解决scheme发现，
downloadify – >需要flash
databounce – >在iexplorer 10和11testing不适用于我，需要一个servlet和一些自定义（错误地检测导航器，我必须设置iexplorer在兼容模式下testing，默认字符集在servlet中，JavaScript选项对象具有正确的servletpath绝对path…）不是iexplorer它打开文件在同一个窗口。
download.js http://danml.com/download.html另一个类似但未经testing的库，声称是纯粹的javascript，不需要servlet也不需要flash，只能在iexplorer 10和11上运行
结合@owencm和@ Chazt3n的答案，该function将允许从IE11，Firefox和Chrome下载文本。 （对不起，我没有访问Safari或Opera，但如果你尝试它，请添加注释。）
initiate_user_download = function(file_name, mime_type, text) { // Anything but IE works here if (undefined === window.navigator.msSaveOrOpenBlob) { var e = document.createElement('a'); var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text); e.setAttribute('href', href); e.setAttribute('download', file_name); document.body.appendChild(e); e.click(); document.body.removeChild(e); } // IE-specific code else { var charCodeArr = new Array(text.length); for (var i = 0; i < text.length; ++i) { var charCode = text.charCodeAt(i); charCodeArr[i] = charCode; } var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type}); window.navigator.msSaveOrOpenBlob(blob, file_name); } } // Example: initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');
// ======================================== // == Download dataURL == // = Downloads a dataURL in a local file == // = Include this header if you use it! == // = Namaste! == // == By zibri@zibri.org == // ======================================== function download(dataurl, filename) { var a = document.createElement("a"); a.href = dataurl; a.setAttribute("download", filename); var b = document.createEvent("MouseEvents"); b.initEvent("click", false, true); a.dispatchEvent(b); return false; } download("data:text/html,HelloWorld!", "helloWorld.txt");
也可以通过JavaScript启动数据URL下载。 请参阅https://stackoverflow.com/a/13696029/271577获取此类解决scheme（以及文本链接示例）。;
你的问题实质上归结为“不是所有的浏览器都支持这个”。
你可以尝试一个解决方法，并从Flash对象提供解压缩的文件，但是那么你会失去纯JS的纯度（无论如何，我不知道你是否目前可以“拖动文件到浏览器”没有某种Flash的解决方法 – HTML5function可能是？）
对于在IE中遇到问题的人：
请在这里得到答案： 在IE中保存本地canvas
dataURItoBlob = function(dataURI) { var binary = atob(dataURI.split(',')[1]); var array = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], {type: 'image/png'}); } var blob = dataURItoBlob(uri); window.navigator.msSaveOrOpenBlob(blob, "my-image.png");
