javascript 或 jquery 下载大文件作为 URI

Question

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

我目前正在使用以下代码（不会运行为您服务，但您可以理解）我在其中添加了一个带有文件名的文本框，然后是一个包含 json 样式下载所需的所有文本的隐藏文本区域，然后它链接到一个尝试下载 URI 的函数。

有趣的是，当 chrome 中的运行时，我看到一个页面说 URI 太长并且无法正常工作等，但文件仍然可以下载。

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

总之，烦人的是：允许这些下载的页面使用前一页的 post/get - 因此后退按钮不可用，因为它给我们：

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

页面 - 我想做的是将这些 URI 下载生成到一个新选项卡中，因此不需要后退按钮，尽管添加目标空白没有帮助

也很有趣——如上所示，我也有一个 "download all" 的功能——这对我有用运行在 xampp 服务器上本地 [=51] =] chrome - 然而那些正在构建应用程序的人报告按钮对他们不起作用（他们在使用 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>

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

同样值得注意的是，我在上面的代码片段中包含了“全部下载”功能。奇怪的是，运行ning 在 Chrome 中下载所有文件，但在 Safari 中运行ning 只下载 1 个文件。

Answer 1

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

Answer 2

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

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

您可以在此处找到有关浏览器锚点长度限制的更多信息：

What is the maximum length of a URL in different browsers?

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

Answer 3

您在 XAMPP 中的时间过长 URL。 XAMPP 代表 Apache。在阿帕奇，最大 URL 长度约为 4,000 个字符，之后 Apache 会产生“413 实体太大”错误。

我同意@PatrickEvans，最好使用URL.createObjectURL。 URL.createObjectURL()可用于构造和解析URLs。 URL.createObjectURL() 具体来说，可用于创建对文件或 Blob 的引用。与 base64 编码的数据 URL 不同，它不包含对象的实际数据，而是包含一个引用。

这样做的好处是它真的很快。以前，我们必须实例化一个 FileReader 实例并将整个文件读取为 base64 数据 URL，这需要时间和大量内存。使用 createObjectURL()，结果立即可用，允许我们执行诸如将图像数据读取到 canvas.

之类的操作

正如您在下面的演示中看到的那样。两个 link 是 same.But 如果你检查 Without createObjectURL link href 属性有 too large to edit 但在 With createObjectURL link您可以编辑它，因为创建它时我使用了 URL.createObjectURL().

Online demo (jsFiddle)

javascript 或 jquery 下载大文件作为 URI

javascript or jquery download large file as URI

javascript

jquery

uri

download