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

您不需要將元素附加到文檔。 並避免使用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

你在XAMPP傳遞了太長的URL。 XAMPP代表Apache。 在Apache中，最大URL長度約為4,000個字符，之后Apache產生“413實體太大”錯誤。

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

Answer 3

可能正在發生的事情是，您實際上正在填充瀏覽器URL並向服務器提交GET請求。

GET請求限制了它們可以傳輸到服務器的數據量，因此URI太長。 （相反，POST允許更大的有效負載，並且僅受服務器設置的限制）

您可以在此處找到有關瀏覽器錨長限制的更多信息：

不同瀏覽器中URL的最大長度是多少？

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