我正在开发一个Web应用程序,它需要的一个功能是能够以交互方式下载相当大的文件 - 该文件在服务器上不存在 - 并且完全由从数据库动态加载的数据组成。
目前我正在使用以下代码(不会为你运行,但你可以得到这个想法) 在其中我添加一个带文件名的文本框,然后是一个隐藏文本区域,包含json样式下载所需的所有文本,然后链接到尝试URI下载的函数。
有趣的是,当在chrome中运行时,我得到一个页面,说URI太长而且不能正常工作等,但文件仍然会被下载。
"提交的URI太大了! 请求的URL的长度超过了此服务器的容量限制。请求无法处理。 如果您认为这是服务器错误,请与网站管理员联系。"
无论如何,烦人的是: 允许这些下载的页面使用上一页的发布/获取 - 因此后退按钮不可用,因为它为我们提供了:
"确认表格重新提交 此网页需要您之前输入的数据才能正确显示。您可以再次发送此数据,但通过这样做,您将重复此页面之前执行的任何操作。"
页面 - 我想要做的是将这些URI下载产生到一个新选项卡中,这样就不需要后退按钮了,尽管添加目标空白没有帮助
同样相互关注 - 如上所示,我确实有一个"下载全部"同样 - 这对我在xampp服务器上本地运行的东西,在谷歌浏览器上 - 但是那些我建立应用程序报告按钮不适合他们(他们在使用safari的macs,没有机会看到这个为我自己然后收集信息 - 所以虽然我没有用我有限的信息预期答案,我希望有人可能有一个想法!)
CODE:
< script >
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
// I tried addin this but no new tab appeared!
//element.target = "_blank:";
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function download_all() {
var nameElements = document.getElementsByName("name");
var valueElements = document.getElementsByName("text");
for (i = 0; i < nameElements.length; i++) {
console.log(nameElements[i].value);
console.log(valueElements[i].value);
download(nameElements[i].value, valueElements[i].value);
}
} <
/script>
&#13;
echo "
<form onsubmit=\ "download(this['name'].value, this['text'].value)\" class=\ "form-group\">"; echo "<label for=\ "name\">Download Title</label>"; echo "<input type=\ "text\" name=\ "name\" size=\ "40\" value=\ "" . $m[ 'name'] . ".json" . "\" class=\ "form-inline\">"; //hidden=\"hidden\"> after text echo "<textarea name=\ "text\" hidden=\
"hidden\">" . $json_meal_data . "</textarea>"; echo "<input type=\ "submit\" value=\ "Download\" class=\ "btn-primary\">"; echo "</form>"; echo "<br>"; echo "<br>";
&#13;
同样值得注意的是,我在上面的代码段中包含了“全部下载”功能。 奇怪的是,在Chrome中运行全部下载会下载所有文件,但在Safari中运行它只会下载1个文件。
答案 0 :(得分:2)
您不需要将元素附加到文档中。并避免使用base64,因为它比Blob
大37%。
function download(filename, text) {
var element = document.createElement('a');
var blob = new Blob([text], {type: "octet/stream"})
var url = URL.createObjectURL(blob);
element.setAttribute('href', url);
element.setAttribute('download', filename);
element.click();
}
答案 1 :(得分:2)
您在XAMPP
中传递了太长的网址。 XAMPP
代表Apache。在Apache中,
最大URL长度约为4,000个字符,之后Apache
产生“413实体太大”错误。
我同意@PatrickEvans最好使用URL.createObjectURL
。
URL.createObjectURL()
可用于构建和解析URL。 URL.createObjectURL()
具体来说,可用于创建对文件或Blob的引用。与base64编码的数据URL相反,它不包含对象的实际数据 - 而是包含引用。
关于这一点的好处是它真的很快。以前,我们必须实例化一个FileReader
实例,并将整个文件作为base64
数据URL读取,这需要时间和大量内存。使用createObjectURL()
,结果立即可用,允许我们执行将图像数据读取到画布等操作。
正如您在以下演示中看到的那样。两个链接是相同的。但是,如果您在Without createObjectURL
链接href
属性上检查too large to edit
,但在With createObjectURL
链接中您可以编辑它,因为为了创建它我使用了{{1} }。
答案 2 :(得分:0)
您可能正在实际填充浏览器URL并向服务器提交GET请求。
GET请求限制了它们可以传输到服务器的数据量,因此URI太长。 (相反,POST允许更大的有效负载,并且仅受服务器设置的限制)
您可以在此处找到有关浏览器锚定长度限制的更多信息: