javascript或jquery下载大文件作为URI

Question

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

目前我正在使用以下代码(不会为你运行,但你可以得到这个想法),其中我添加了一个带文件名的文本框,然后隐藏文本区域包含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中运行该下载全部下载所有文件,但在Safari中运行它只下载1个文件.

Answer 1

您在XAMPP. XAMPP代表阿帕奇。在 Apache 中，最大 URL 长度约为 4,000 个字符，之后会Apache产生“413 Entity Too Large”错误。

我同意@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)