HTML5 JavaScript下載屬性

我一直在爲一個項目工作了幾個月，現在我已接近尾聲了。最後一個步驟之一是提供一個文件，該文件將填充由用戶在會話期間的動作產生的信息。 Can I write files with HTML5/JS? ecmanaut的回答讓我非常接近，因爲他提供了兩種方法，一種使用純html5，一種使用JavaScript。HTML5 JavaScript下載屬性

我第一次使用的JavaScript方法只能在Chrome中使用，而不是在Mozilla或IE中使用。所以我使用純html5方法結合一些替代JavaScript將它粘貼到頁面，因此它是可點擊的。

document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;and a bit more">Save</a>';

此代碼創建它下載的文件，但不包含該文章說的是「」換行。所以我做了一個搜索，看看可以識別哪些字符代碼。 http://en.wikipedia.org/wiki/Newline爲我提供了很多可能的選擇，沒有任何我嘗試過的。我試過的是：'&＃10'，' '，'&＃13'，' '，'\ r \ n'，'\ r'，'\ n'，'\ cr'，' \ c \ r'，0x0D，0x0A，0c0D0A。在很多情況下，換行符被刪除，沒有任何內容會出現。

在測試上述代碼時，它在Mozilla和Chrome（不包括換行符）中工作，但IE中的結果不同。當你點擊保存鏈接時，它實際上會移動到頁面並且具有作爲數據內容的URL。

雖然如果沒有這個功能，這個項目可能會被接受，但我非常希望在花了這麼多時間和精力並且變得如此接近之後纔開始工作。我也需要在Safari中進行測試，但我還沒有在該瀏覽器中進行任何測試。從最重要到最不重要的瀏覽器支持如下所示：Mozilla，Chrome，Safari，IE。如果可能的話，我想避免瀏覽器的具體編碼。

我還應該提到，就像在第一個鏈接中，我不想發送到服務器進行下載，我需要它在客戶端的本地工作而不需要服務器交互。

所以總結起來，我至少需要讓文件的換行符工作，以便Mozilla和Chrome都能夠正常工作。如果可能的話，也是一種讓文件在IE中工作的方法。

編輯：2014年11月3日下午1點40分當地時間我已經嘗試了maths4js關於更改我的報價和建議沒有奏效的建議編輯。我注意到提交一個更大的示例代碼頁面將是一個有用的想法。還有人建議我看看哪些瀏覽器支持此功能http://caniuse.com/#feat=download，並且IE和Safari似乎沒有，所以我現在不會擔心它們，並且可能在瀏覽器中爲它們編寫特定的代碼。

<!DOCTYPE HTML> 
<html> 
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><style>body{margin: 0px;padding: 0px;}</style></head><body><center><br><div id='download'></div></center> 
<script> 
function download(){ 
//var newline= '&#10'; //no line breaks 
//var newline= '&#10;'; //no line breaks 
//var newline= "&#10;"; //no line breaks 
//var newline= "&#10";   //no line breaks 
//var newline= "\r\n";  //no line breaks 
//var newline= "\r\n;";  //appends ; but no line breaks 
//var newline = '\n';  //no line break 
//var newline = '/n'; //completely failed 
var newline = 0x0D0A; 
var tab = "  "; 
var text = "Title of the document" + newline; 
text += "Just a line of text : "; 
text = text +"Random"; 
text = text + newline + "Trial" + tab + "Time" + tab + "Correct" + newline; 
//document.getElementById('download').innerHTML = '<a id="save" download="This_File.txt" href="data:text/plain,'+text+'">Save</a>'; 
//document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;and a bit more">Save</a>'; 
document.getElementById('download').innerHTML = "<a id='save' download='earth.txt' href='data:text/plain,mostly harmless&#10;and a bit more'>Save</a>"; 
} 
download(); 

</script> 
</body> 
</html>

我想感謝大家爲我付出的努力和時間。

來源

2014-11-03 Daniel Watt

html5解決方案當然只適用於支持下載屬性的瀏覽器。 – 2014-11-03 19:31:42

嘗試使用窗口將您的文本轉換爲base64。BTOA功能：

var myText = btoa('mostly harmless\n\rand a bit more'); 
 
document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain;base64,' + myText + '">Save</a>';

<div id="download"></div>

應該工作，爲base64編碼正確/維持換行符。

來源

2014-11-03 19:50:34

這個解決方案正是這個應用程序所需要的，非常感謝。 – 2014-11-03 19:55:54

需要注意的一點是 - 請注意，base64函數的輸出實際上可能比原始字符串大33％。我認爲只要你不想創造真正的大文件（比如，兆字節的文本），我認爲它不會對性能產生巨大影響，但我認爲值得記住。 – 2014-11-03 20:01:34

謝謝Michal，很高興知道這一點，但在這種情況下，這不是問題。預計的文件大小決不能傳遞15行。 – 2014-11-03 20:08:57

這對我的作品，我用「\ r \ n」表示新行，如果在Windows系統中使用，否則\ n足夠

var textToWrite = txt; //plain text with \r\n for new lines if used with Windows System, otherwise \n is enough 
var fileNameToSaveAs = session_title.innerText + '.txt'; //TODO: filename should be first 10chars of noweirdchrs(title)... 

var textFileAsBlob = new Blob([textToWrite], {type:'text/plain;charset=utf-8'}); 

<a id='downloadLink_id'></a> 

downloadLink = document.getElementById('downloadLink_id'); 
downloadLink.download = fileNameToSaveAs; 
downloadLink.innerHTML = "Download File"; 
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);

看到它在行動上我speech recognition chrome app - 任何出口txt或srt文件的選項...

來源

2014-11-03 19:49:24

我將不得不在稍後嘗試此解決方案（並希望它能適用於所有4種瀏覽器）。感謝您花時間發佈此信息。我正在評論它到我的文件，所以我不能忘記它。 – 2014-11-03 19:57:07

HTML5 JavaScript下載屬性

回答

相關問題