如何使用JavaScript动态创建并下载XML文件？

Question

我收到了以下需求：

网页上有一个链接。当用户点击这个链接时，它应该即时创建一个文件，并弹出下载框。如何使用JavaScript实现这一功能？

- Rahul

---

如果文件已经存在，只需创建到文件URL的链接。如果不是这种情况，我相信您必须使用服务器端代码来完成此操作。 - Peter Olson

创建 XML 字符串是容易的一部分。使在浏览器中合成的内容变成可“下载”文件是很困难的，如果不是不可能的话，要做到在所有（合理的）浏览器上都能正常工作。 - Pointy

Answer 1

您可以像此示例中所示使用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();

- Juan

---

太好了！你甚至可以设置文件名和文件类型（MIME类型）。 - 7ochem

这是此帖子中所有其他答案中最好的答案。谢谢! :) - M Zeinstra

这在Mac Firefox中无法工作，并且在Mac Safari中打开带有内容的选项卡而不是下载。 - Jerry

尝试将"text/plain"更改为"application/octet-stream"。 - Juan

你为什么要声明两次 pom？ - Kubuntuer82

Answer 2

尝试了Andreas的建议后，我想再加一些东西：

脚本：

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

你有一个像这样的链接，注意新的 download 属性，使用它你可以设置文件名。

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

它至少可在Chrome 27和Firefox 21中使用。

欢迎改进 :-)

- Mikel

---

这是一个很棒的答案，值得赞扬。它也不像被接受的答案那样基于非标准JS。+1。 - Michael

Answer 3

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

- Andreas Gohr

Answer 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。

- rmflow

Answer 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); 

}

- Omar BOUFTINI

---

虽然这段代码可能解决了问题，但是包括解释它如何以及为什么解决了问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请[编辑]您的答案以添加解释并指出适用的限制和假设。 - Dharman