javascript或jquery将大文件下载为URI

我正在开发一个Web应用程序，它需要的一个功能是能够交互地下载一个相当大的文件 - 这个文件在服务器上不存在 - 并且完全由从数据库动态加载的数据组成。

目前即时通讯使用下面的代码（不会运行你，但你可以得到的想法），其中我添加一个文件名的文本框，然后一个隐藏的文本区域包含json风格下载所需的所有文本，然后链接到一个尝试URI下载的函数。

不确定地说，当在chrome中运行时，我得到一个页面，说URI太长而且不能工作等等，但是文件仍然被下载。

“提交的URI太大！请求的URL长度超过了此服务器的容量限制，请求无法处理，如果您认为这是服务器错误，请与网站管理员联系。”

无论如何，令人讨厌的事情是这样的：允许这些下载的页面使用后一页/从前一页获取 - 所以后退按钮不可用，因为它给了我们：

“确认表格重新提交此网页需要您之前输入的数据才能正确显示，您可以再次发送这些数据，但这样做会重复此页执行的任何操作。”

页面 - 我想要做的是将这些URI下载生成一个新标签，所以后退按钮不是必需的，但添加目标空白不会有帮助

如上所示，我确实有一个“全部下载”的功能 - 这对我来说是在xampp服务器上本地运行的东西，在谷歌浏览器上 - 然而，那些即时通讯应用程序报告按钮不适合他们他们在使用Safari浏览器的Mac上，没有机会亲眼看到这个信息，然后收集信息 - 尽管我没有用有限的信息预测这个答案，但我希望有人可以有一个想法！）

码：

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

---

您在XAMPP传递的URL太长。 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链接，你可以编辑它，因为创建它我使用了URL.createObjectURL() 。

在线演示（jsFiddle）

---

可能发生的是你实际上正在填充一个浏览器URL并向服务器提交一个GET请求。

GET请求限制了可以传输给服务器的数据量，因此URI太长。 （相比之下，POST允许更大的有效负载并且仅受服务器设置的限制）

您可以在这里找到关于浏览器锚点长度限制的更多信息

不同浏览器中URL的最大长度是多少？

https://weblogs.asp.net/mschwarz/post-vs-get

---

您不需要将元素附加到文档。 避免使用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();
}

链接地址: http://www.djcxy.com/p/41059.html

上一篇: javascript or jquery download large file as URI

下一篇: Height/Elevation of a pixel from ground in Google Street View