如何将包含XML的Javascript变量的内容保存到本地磁盘?

16 浏览
0 Comments

如何将包含XML的Javascript变量的内容保存到本地磁盘?

有没有办法在客户端上创建一个文本文件,并提示用户下载,而不需要与服务器进行任何交互?\n我知道我不能直接写入到他们的机器上(出于安全考虑),但我可以创建该文件并提示他们保存吗?

0
0 Comments

问题的原因是作者想要将包含XML的Javascript变量保存到本地磁盘上。为了解决这个问题,作者提供了一个不使用jQuery或其他库的解决方案。

解决方法如下:

1. 首先,定义一个名为`save`的函数,该函数接受文件名和数据作为参数。

2. 使用`Blob`对象创建一个包含数据的Blob实例,设置其类型为"text/csv"。

3. 检查浏览器是否支持`window.navigator.msSaveOrOpenBlob`方法,如果支持,则调用该方法将Blob保存为文件。

4. 如果不支持`msSaveOrOpenBlob`方法,则创建一个``元素。

5. 将``元素的`href`属性设置为通过`window.URL.createObjectURL`方法创建的Blob的URL。

6. 将``元素的`download`属性设置为文件名。

7. 将``元素添加到文档的`body`元素中。

8. 触发``元素的点击事件。

9. 将``元素从文档的`body`元素中移除。

对于一些特殊情况,可能需要在移除``元素后调用`URL.revokeObjectURL`方法来释放对象URL。根据`URL.createObjectURL`的文档,每次调用`createObjectURL`都会创建一个新的对象URL,即使已经为同一个对象创建了一个对象URL。为了最佳性能和内存使用,可以在不再需要这些对象URL时显式释放它们。

在Chrome中,实际上不需要将元素附加到`body`元素上即可使其工作。

需要注意的是,浏览器有一个大小限制,Chrome浏览器的限制是2MB。如果需要处理更大的文件,需要考虑其他的解决方案。

在Firefox 48上,移除``元素后调用`revokeObjectURL()`方法会导致下载窗口永远不会出现,下载也不会开始。移除对`revokeObjectURL()`方法的调用可以解决这个问题。

对于AngularJS 1.x应用程序,可以在创建URL时将其添加到一个数组中,并在组件的$onDestroy函数中清除这些URL。

为了解决将包含XML的Javascript变量保存到本地磁盘上的问题,可以使用上述提供的解决方案。该解决方案适用于IE 10+、Firefox和Chrome浏览器,并且不需要使用jQuery或其他库。需要注意的是,在某些情况下,可能需要在移除元素后调用`URL.revokeObjectURL`方法来释放对象URL。

0
0 Comments

如何将JavaScript变量(包含XML)的内容保存到本地磁盘?

问题的出现原因:用户想要将JavaScript变量中的XML内容保存到本地磁盘。

解决方法:可以使用数据URI。浏览器的支持程度有所不同。示例如下:

text file

octet-stream是为了强制下载提示。否则,它可能会在浏览器中打开。

对于CSV文件,可以使用以下方式:

CSV Octet

可以尝试jsFiddle演示。

这不是一个跨浏览器的解决方案,但绝对值得一看。例如,IE的支持限制在数据URI上。IE 8的大小限制为32KB,而IE 7及更低版本根本不支持。

是的,在任何IE版本中都无法使用这种方法,因为数据URI在a元素中不被允许。

在Chrome版本19.0.1084.46中,此方法会生成以下警告:“资源被解释为文档,但以MIME类型text/csv传输:“data:text/csv,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A”。不会触发下载。

是的,显然它在Chrome中不起作用,即使使用octet-stream也不行。

它现在在Chrome中可以工作(测试了v20和v21),但在IE9中不起作用(可能只是jsFiddle的问题,但我对此表示怀疑)。

我接受这个答案,因为似乎没有其他方法可以实现这一点...

在ie8和ie9中不起作用,因为这些浏览器只支持图像的数据URI。

正如naren在他的答案中指出的那样,Firefox需要在文档中存在链接才能进行下载。

在Safari(7.0.4)中根本不起作用。另外,到Chrome 36.0.1985.97 beta为止,似乎无法使用下载属性为文件命名。

而且,在Chrome 37.0.2062.120中,当base64字符串过长时,浏览器会崩溃。

我像是-谁能以维基百科的方式链接到浏览器兼容性-哦,好吧 🙂

正确的字符集几乎肯定是UTF-16,除非你有将其转换为UTF-8的代码。JavaScript在内部使用UTF-16。如果你有一个文本或CSV文件,请使用'\ufeff'开始字符串,这是UTF-16BE的字节顺序标记,文本编辑器将能够正确读取非ASCII字符。

好的观点。可以制作UTF-8的数据URL(我的示例就是一个),但制作UTF-16的可能更容易。但从技术上讲,JavaScript更接近于UCS-2。

数据URI有大小限制吗?

是的,至少在某些浏览器中(例如IE 8)。

是否有办法为src是数据URI的图像提供一个可理解的名称?

在Samsung浏览器(默认移动浏览器)中不起作用。

只需添加download="txt.csv"属性,以便拥有正确的文件名和扩展名,并告诉操作系统如何处理它。

而且还有一个大小限制。据说对于Chrome,限制为2MB。

在Chrome上效果很好。base64似乎是传递PDF文件的最佳解决方案 🙂

使用download="filename.txt"属性和javascript .click()方法,可以自动化该过程。

在Microsoft Edge 40.15063.674.0和Internet Explorer 11.674.15063.0中不起作用。我使用了来自的答案,它可以工作。

我正在尝试使用这种方法将textarea的值作为文本文件下载,但是在下载的文本文件中,textarea中的换行符没有显示出来。有什么建议吗?这是我如何形成href的方式:'data:application/octet-stream,' + encodeURIComponent(document.getElementById("editor").value).replace("\n","%0A")。(我添加了replace函数,希望那可能是问题所在)。

在Firefox中不再起作用;顶级数据URI已被阻止以确保“安全性”。

0
0 Comments

如何将包含XML的Javascript变量的内容保存到本地磁盘?

这个问题的原因是,用户希望将Javascript变量中的XML内容保存到本地磁盘,以便将其用作本地文件。

解决方法是使用HTML5的新特性,在支持HTML5的浏览器中可以简单地实现。以下是解决方法的代码示例:

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

上述代码创建了一个``元素,并使用`setAttribute`方法设置元素的`href`属性和`download`属性。然后,将该元素附加到页面的``元素上。通过调用`click`方法触发下载操作,然后将元素从页面中移除。

此外,还可以使用HTML、CSS和Javascript的组合来实现更复杂的功能。以下是一个示例表单,当提交时调用`download`函数并传递文件名和文本内容:

用户可以在表单中输入文件名和文本内容,然后点击“Download”按钮将文件保存到本地磁盘。

总结起来,要保存Javascript变量中的XML内容到本地磁盘,可以使用HTML5的新特性,在支持HTML5的浏览器中实现。通过创建一个``元素,并设置其`href`属性和`download`属性,然后将该元素附加到页面上并通过调用`click`方法触发下载操作,最后将元素从页面中移除即可实现保存文件到本地磁盘的功能。

0