javascript 或 jquery 下载大文件作为 URI

Question

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

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

有趣的是，当在 chrome 中运行时，我得到一个页面说 URI 太长并且它不会工作等，但文件仍然被下载。

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

不管怎样，烦人的是:允许这些下载的页面使用前一页的 post/get - 所以后退按钮不可用，因为它给了我们:

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

page - 我想做的是将这些 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>

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

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

Answer 1

您在 XAMPP 中传递了太长的 URL。 XAMPP 代表 Apache。在 Apache ，最大 URL 长度约为 4,000 个字符，之后 Apache 会产生“413 Entity Too Large”错误。

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

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

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

Online demo (jsFiddle)