javascript or jquery download large file as URI - Stack Overflow

admin2025-04-03 0

Im working on a web app, and one feature it needs is to be able to donwload a fairly large file interactively - this file does not exist on the server - and consists entirely of data dynamically loaded from a database.

Currently im using the following code (wont run for you but you can get the idea) in which i add a text box with a filename, then a hidden text area contaning all the text needed for the json style download, and then that is linked to a function which attempts a URI download.

Interesetingly, when run in chrome, i get a page saying the URI is too long and its not going to work etc, but the file still gets downloaded.

"Submitted URI too large! The length of the requested URL exceeds the capacity limit for this server. The request cannot be processed. If you think this is a server error, please contact the webmaster."

Anyway, the annoying thing is this: The page that allows these downloads uses a post/get from a previous page - so the back button is not usable, as it gives us the:

"Confirm Form Resubmission This webpage requires data that you entered earlier in order to be properly displayed. You can send this data again, but by doing so you will repeat any action this page previously performed."

page - What I would love to do is have these URI downloads spawn into a new tab so the back button is not necessary, though adding the target blank did not help

Also intereseting - as seen above i do have a function for "download all" as well - which works for me running things locally on a xampp server, on google chrome - however those im building the app for report the button not working for them (they are on macs using safari, havent had a chance to see this for myself and gather info yet - so though im not EXPECTING an answer on this with my limited info, im hoping someone may have an idea!)

CODE:

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

Interesetingly, when run in chrome, i get a page saying the URI is too long and its not going to work etc, but the file still gets downloaded.

Anyway, the annoying thing is this: The page that allows these downloads uses a post/get from a previous page - so the back button is not usable, as it gives us the:

page - What I would love to do is have these URI downloads spawn into a new tab so the back button is not necessary, though adding the target blank did not help

CODE:

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

Also definitely worth noting, that I have included the Download All function in the above snippets. Strangely, running that download all in Chrome downloads all the files, yet running it in Safari only downloads 1 file.

Share Improve this question edited Jan 14, 2018 at 0:51 asked Jan 11, 2018 at 5:04 aescript 1,9457 gold badges25 silver badges37 bronze badges

2 Have you tried putting the data into a blob and downloading that? Creating the url from the blob with URL.createObjectURL. As for the download all, some browsers like Chrome block multiple consecutive downloads, the user needs to allow that in order for it to work (in chrome you access it by clicking the icon at the end of the address bar) – Patrick Evans Commented Jan 11, 2018 at 5:08
You can offer a .zip file for download, which could include multiple files and folders, see Multiple download links to one zip file before download javascript – guest271314 Commented Jan 11, 2018 at 5:32
@PatrickEvans Ill have to check regarding the browser and donwload all - as mentioned i havent seen it fail in person yet, as it works for me in chrome in my dev env. I have not tried putting it to a blob and using that method - ive never heard of that before. I can give it a try - but keep in mind these files are about 25mb each - not sure if that will work or not? – aescript Commented Jan 12, 2018 at 5:32
@guest271314 Looking at that, based on a few glances it looks like the files need to exist? There are no source files to be downloaded,the file is generated when the page is loaded and is just a bunch of text held in a textarea – aescript Commented Jan 12, 2018 at 5:32
Not certain what the issue is? What are you trying to achieve? You can read the .textContent of <textarea> element using ReadableStream then download the file, see How to solve Uncaught RangeError when download large size json – guest271314 Commented Jan 12, 2018 at 5:36

| Show 6 more ments

3 Answers 3

Sorted by: Reset to default 5 +100

You passed too long URL in XAMPP. XAMPP stands for Apache. In Apache, maximum URL length is about 4,000 characters, after which Apache produces a "413 Entity Too Large" error.

I agree with @PatrickEvans it's better to use URL.createObjectURL. URL.createObjectURL() can be used to construct and parse URLs. URL.createObjectURL() specifically, can be used to create a reference to a File or a Blob. As opposed to a base64-encoded data URL, it doesn’t contain the actual data of the object – instead it holds a reference.

The nice thing about this is that it’s really fast. Previously, we’ve had to instantiate a FileReader instance and read the whole file as a base64 data URL, which takes time and a lot of memory. With createObjectURL(), the result is available straight away, allowing us to do things like reading image data to a canvas.

As you can see in following demo. Two link are same.But if you inspect on Without createObjectURL link href attribute has too large to edit but in With createObjectURL link you can edit it because for creating it I used URL.createObjectURL().

Online demo (jsFiddle)

Please avoid using base64, because it's larger by 37% than Blob.

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);
}

Likely what's happening is you're actually populating a browser URL and submitting a GET request to the sever.

GET requests limit the amount of data they can transmit to the server, hence the URI is too long. (POST, by contrast, allow for much larger payloads and are limited only by your server settings)

You can find more information on browser anchor length limitations here:

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

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1743627996a213830.html

javascript or jquery download large file as URIStack Overflow

最新回复(0)