如何使用 javascript 即时创建和下载 XML 文件？答案

【问题标题】：How to create and download an XML file on the fly using javascript?如何使用 javascript 即时创建和下载 XML 文件？
【发布时间】：2011-02-28 14:51:37
【问题描述】：

我有如下要求：

网页上有一个链接。当用户单击链接时，它应该动态创建一个文件并弹出一个下载框。用java脚本怎么做？

【问题讨论】：

如果该文件已经存在，只需创建一个指向该文件 URL 的链接。如果不是这样，我很确定您必须使用服务器端代码来执行此操作。
创建 XML 字符串是很容易的部分。使在浏览器中合成的东西成为“可下载”文件是困难的，如果不是不可能的话，它可以在所有（合理的）浏览器中工作。

标签： javascript xml excel

【解决方案1】：

您可以使用 this example 中所示的 blob。

您可以使用以下代码创建一个 JavaScript 函数：

var xmltext = "<sometag><someothertag></someothertag></sometag>";

var filename = "file.xml";
var pom = document.createElement('a');
var bb = new Blob([xmltext], {type: 'text/plain'});

pom.setAttribute('href', window.URL.createObjectURL(bb));
pom.setAttribute('download', filename);

pom.dataset.downloadurl = ['text/plain', pom.download, pom.href].join(':');
pom.draggable = true; 
pom.classList.add('dragout');

pom.click();

【讨论】：

这太棒了！您甚至可以设置文件名和文件类型（mime 类型）。
这是这篇文章中所有其他答案的最佳答案。谢谢！ :)
这在 mac firefox 中不起作用并打开带有内容的选项卡，而不是在 mac safari 中下载
尝试为 application/octet-stream 更改 'text/plain'
你为什么要声明pom两次？

【解决方案2】：

在尝试安德烈亚斯所说的之后，我会添加一些东西：

脚本：

function createAndOpenFile(){
    var stupidExample = '<?xml version="1.0" encoding="utf-8"?><aTag>something</aTag>';
    document.open('data:Application/octet-stream,' + encodeURIComponent(stupidExample));
}

你有一个这样的链接，注意the new download atribute，你把文件名放在里面。

<a href="#" onclick="createAndOpenFile()" download="file.xml">Donwload</a>

它至少在 Chrome 27 和 Firefox 21 中有效。

欢迎改进:-)

【讨论】：

这是一个很好的答案，赞。它也不像公认的答案那样基于非标准 JS。 +1。

【解决方案3】：

您可以创建一个数据 URI。大多数现代浏览器应该能够理解它。见http://en.wikipedia.org/wiki/Data_URI_scheme

【讨论】：

【解决方案4】：

如果用户信任您，您可以直接在他的文件系统中创建 XML 文件。 Mozilla Firefox 的示例代码：

function mozillaSaveFile(filePath,content)
{
    if(window.Components) {
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
            file.initWithPath(filePath);
            if(!file.exists())
                file.create(0,0664);
            var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
            out.init(file,0x20|0x02,00004,null);
            out.write(content,content.length);
            out.flush();
            out.close();
            return true;
        } catch(ex) {
            return false;
        }
    }
    return null;
}

如果你需要对所有浏览器的支持，请看http://www.tiddlywiki.com是如何实现的

编辑：这不适用于 Firefox 17+，因为更改权限被认为是不安全的并被删除。更多详情请看这里：https://bugzilla.mozilla.org/show_bug.cgi?id=546848#c57

【讨论】：

【解决方案5】：

decodeRequest(textToDecode) {

    var decodedString = atob(textToDecode);

    var fileName = "fileName1"+'_RQ';
    var fileType = '.xml';

    var blob = new Blob([decodedString], { type: fileType });

    var a = document.createElement('a');
    a.download = fileName;
    a.href = URL.createObjectURL(blob);
    a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500); 

}

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案添加解释并说明适用的限制和假设。