javascript或jquery将大文件下载为URI

u3r8eeie  于 2022-11-03  发布在  jQuery
关注(0)|答案(3)|浏览(138)

我正在开发一个Web应用程序,它需要的一个特性是能够交互地下载一个相当大的文件--这个文件不存在于服务器上--并且完全由从数据库动态加载的数据组成。
目前我正在使用下面的代码(不会为您运行,但您可以得到的想法),我添加了一个文本框与文件名,然后一个隐藏的文本区域包含所有的文本需要的json风格下载,然后是链接到一个函数,试图一个URI下载。
有趣的是,当在chrome中运行时,我会得到一个页面,说URI太长,它不会工作等,但文件仍然得到下载。
提交得URI太大!请求得URL尺子超过了此服务器得容量限制.无法处理请求.如果您认为这是服务器错误,请与网站管理员联系.
不管怎么说,恼人的事情是这样的:允许这些下载的页面使用了来自上一页的post/get-因此后退按钮不可用,因为它会给我们提供:
确认表单重新提交此网页需要您以前输入得数据才能正确显示.您可以再次发送此数据,但这样做将重复此网页以前执行得任何操作.
page -我想做的是将这些URI下载生成到一个新的选项卡中,这样就不需要后退按钮,尽管添加目标空白没有帮助
同样有趣的是-正如上面所看到的,我确实有一个“下载所有”的功能-这对我来说很有效,我可以在本地运行Xampp服务器上的东西,在谷歌浏览器上-但是那些为报告按钮不工作而构建应用程序的人(他们在Mac上使用Safari,还没有机会亲眼看到这一点并收集信息-所以虽然我不期望在我有限的信息下得到答案,我希望有人能有个主意!)
代码:

< 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个文件。

vuktfyat

vuktfyat1#

您在XAMPP中传递的URL太长。XAMPP代表Apache。在Apache中,最大URL长度约为4,000个字符,超过此长度后,Apache会产生“413实体太大”错误。
我同意@PatrickEvans的观点,最好使用URL.createObjectURLURL.createObjectURL()可以用来构造和解析URL。具体来说,URL.createObjectURL()可以用来创建对文件或Blob的引用。与base64编码的数据URL相反,它不包含对象的实际数据-而是包含一个引用。
它的优点是速度非常快。以前,我们必须示例化一个FileReader示例,然后以base64数据URL的形式读取整个文件,这需要花费大量的时间和内存。使用createObjectURL(),结果可以立即获得,允许我们做诸如将图像数据读取到画布上之类的事情。
正如您在下面演示中所看到,两个链接是相同,但是如果您检查Without createObjectURL链接,href属性具有too large to edit,但是在With createObjectURL链接中,您可以编辑它,因为创建它时我使用了URL.createObjectURL()
Online demo (jsFiddle)

s3fp2yjn

s3fp2yjn2#

请避免使用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);
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}
hgncfbus

hgncfbus3#

实际上,您可能正在填充浏览器URL,并向服务器提交GET请求。
GET请求限制了它们可以传输到服务器的数据量,因此URI太长。(相比之下,POST允许更大的有效负载,并且只受服务器设置的限制)
您可以在此处找到有关浏览器锚长度限制的详细信息:
What is the maximum length of a URL in different browsers?
https://weblogs.asp.net/mschwarz/post-vs-get

相关问题