如何在Javascript中动态创建文档下载? [英] How do I dynamically create a document for download in Javascript?

查看:109
本文介绍了如何在Javascript中动态创建文档下载?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在写一些在客户端生成XML文档的Javascript代码(通过 Google Earth插件)。我希望用户能够点击页面上的按钮,并提示将该XML保存到新文件。如果我正在生成XML服务器端,这将很容易,只需使按钮打开链接。但是,XML是客户端生成的。



我已经提出了一些黑客,这些黑客是半途而废,部分原因是由这个StackOverflow问题。但既不完全奏效以下是嵌入式代码的演示HTML:

 < html>< head>< script> 
function getData(){return'<?xml version =1.0encoding =UTF-8?>< doc> Hello< / doc>'; }
函数dlDataURI(){
window.open(data:text / xml; charset = utf-8,+ getData());
}
函数dlWindow(){
var w = window.open();
w.document.open();
w.document.write(getData());
w.document.close();
}
< / script>< body>
< div onclick =dlDataURI()>点击数据URL< / div>
< div onclick =dlWindow()>单击窗口< / div>
< / body>< / html>

dlDataURI()版本在Firefox中运行良好,Chrome中不太好(无法保存),不是在IE中。 Window()版本在Firefox和IE中可以正常工作,在Chrome中不好(无法保存,嵌入HTML内的XML)。这两个版本都没有提示用户下载,它总是打开一个试图显示XML的新窗口。



有没有一个很好的方法来做我想要的客户端Javascript?我希望这可以在今天的浏览器中工作,理想情况下是Firefox,MSIE 8和Chrome。



使用示例更新代码

  window.onload = function(){
Downloadify.create(dlify,{
data:getData )
filename:data.xml,
swf:'media / downloadify.swf',
downloadImage:'images / download.png',
width:100, height:30});};


解决方案

我见过的最好的是 href =https://github.com/dcneiner/Downloadify =nofollow noreferrer> Downloadify Doug Neiner ,它需要Flash,但效果非常好:


一个能够生成和保存的小型JavaScript + Flash库的文件,在浏览器中,没有服务器交互。


检查这个视频


I'm writing some Javascript code that generates an XML document in the client (via Google Earth plugin). I'd like the user to be able to click a button on the page and be prompted to save that XML to a new file. If I were generating the XML server-side this would be easy, just make the button open the link. But the XML is generated client-side.

I've come up with a couple of hacks that half-work, inspired in part by this StackOverflow question. But neither completely work. Here's a demo HTML with embedded code:

<html><head><script>
function getData() { return '<?xml version="1.0" encoding="UTF-8"?><doc>Hello</doc>'; }
function dlDataURI() {
  window.open("data:text/xml;charset=utf-8," + getData());
}
function dlWindow() {
  var w = window.open();
  w.document.open();
  w.document.write(getData());
  w.document.close();
}
</script><body>
<div onclick="dlDataURI()">Click for Data URL</div>
<div onclick="dlWindow()">Click for Window</div>
</body></html>

The dlDataURI() version works great in Firefox, poorly in Chrome (can't save), and not at all in IE. The Window() version works OK in Firefox and IE, and not well in Chrome (can't save, XML embedded inside HTML). Neither version ever prompts a user download, it always opens a new window trying to display the XML.

Is there a good way to do what I want in client side Javascript? I'd like this to work in today's browsers, ideally Firefox, MSIE 8, and Chrome.

Update with sample Downloadify code

window.onload = function() {
  Downloadify.create("dlify", {
    data: getData(),
    filename: "data.xml",
    swf: 'media/downloadify.swf',
    downloadImage: 'images/download.png',
    width: 100, height: 30});};

解决方案

The best I've seen as far is Downloadify by Doug Neiner, it requires Flash but works very well:

"A tiny JavaScript + Flash library that enables the generation and saving of files on the fly, in the browser, without server interaction."

Check this video.

这篇关于如何在Javascript中动态创建文档下载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆