2014-11-03 14 views
7

Tôi đã làm việc trong một dự án trong một vài tháng và tôi sắp sửa hoàn thành nó. Một trong những bước cuối cùng là cung cấp một tệp sẽ được lấp đầy với thông tin đã được tạo ra bởi các hành động của người dùng trong phiên của họ. Can I write files with HTML5/JS? và câu trả lời của ecmanaut đã giúp tôi rất gần kể từ khi ông cung cấp hai phương pháp làm như vậy, một trong html5 thuần túy và một bằng JavaScript.HTML5 JavaScript Tải xuống thuộc tính

Tôi đã sử dụng phương pháp JavaScript đầu tiên chỉ hoạt động trong Chrome chứ không phải trong Mozilla hoặc IE. Vì vậy, tôi đã sử dụng phương pháp html5 thuần túy kết hợp với một số JavaScript thay thế để dán nó vào trang để có thể nhấp.

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

Mã này tạo tệp được tải xuống nhưng không chứa dòng mới mà bài viết cho biết là ' '. Vì vậy, tôi đã thực hiện tìm kiếm để xem các mã ký tự khác có thể được nhận ra. http://en.wikipedia.org/wiki/Newline cung cấp cho tôi nhiều lựa chọn khả thi, không có sự lựa chọn nào mà tôi đã thử làm việc. Những cái tôi đã thử là: '& # 10', ' ', '& # 13', ' ', '\ r \ n', '\ r', '\ n', '\ cr', ' \ c \ r ', 0x0D, 0x0A, 0c0D0A. Trong nhiều trường hợp, dòng mới đã bị xóa và không có gì xuất hiện.

Khi thử nghiệm mã ở trên, nó hoạt động trong Mozilla và Chrome (trừ dòng mới), nhưng kết quả trong IE là khác nhau. Khi bạn nhấp vào liên kết Lưu, nó thực sự di chuyển đến trang và có url như nội dung dữ liệu.

Trong khi dự án có thể chấp nhận được mà không có tính năng này hoạt động, tôi rất muốn làm cho nó hoạt động sau khi đã dành quá nhiều thời gian và công sức vào nó và đã đến gần. Tôi cũng cần phải kiểm tra điều này trong Safari nhưng tôi chưa thực hiện bất kỳ thử nghiệm nào trong trình duyệt đó. Trình duyệt hỗ trợ yêu cầu từ quan trọng nhất đến ít nhất là như sau: Mozilla, Chrome, Safari, IE. Nếu có thể tôi muốn tránh mã hóa trình duyệt cụ thể.

Tôi cũng nên đề cập đến như trong liên kết đầu tiên, tôi không muốn gửi đến máy chủ để tải xuống, tôi cần nó hoạt động cục bộ ở phía máy khách mà không tương tác với máy chủ.

Vì vậy, để tổng hợp, tôi cần ít nhất để có được dòng mới làm việc cho tệp để Mozilla và Chrome đều hoạt động hoàn toàn. Và nếu có thể, một cách để có được các tập tin làm việc trong IE là tốt.

Chỉnh sửa: ngày 3 tháng 11 năm 2014 1:40 chiều Giờ địa phương Tôi đã thử chỉnh sửa được đề xuất bởi maths4js về việc thay đổi dấu ngoặc kép và đề xuất không hoạt động. Tôi nhận thấy rằng việc gửi một trang mẫu mã lớn hơn sẽ là một ý tưởng hữu ích. Nó cũng được đề nghị rằng tôi nhìn xem những trình duyệt nào hỗ trợ tính năng này http://caniuse.com/#feat=download và có vẻ như IE và Safari không, vì vậy tôi sẽ không lo lắng về chúng vào lúc này và có thể xuống đường có mã hóa trình duyệt cụ thể cho chúng.

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

Tôi muốn cảm ơn tất cả vì nỗ lực và thời gian bạn đã cho tôi.

+0

giải pháp html5 tất nhiên sẽ chỉ hoạt động trong các trình duyệt hỗ trợ thuộc tính tải xuống. –

Trả lời

4

Hãy thử chuyển đổi văn bản của bạn thành base64 bằng cách sử dụng cửa sổ.btoa chức năng:

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>

Nên hoạt động, dưới dạng base64 đúng cách mã hóa/duy trì ký tự dòng mới.

+1

Giải pháp này là chính xác những gì cần thiết cho ứng dụng này, cảm ơn bạn rất nhiều. –

+1

Một điều cần lưu ý là - lưu ý rằng đầu ra của hàm base64 có thể lớn hơn khoảng 33% so với chuỗi gốc. Tôi không nghĩ rằng nó sẽ có tác động lớn đến hiệu suất miễn là bạn sẽ không cố gắng để tạo ra các tập tin thực sự lớn (như, megabyte của văn bản), nhưng nó đáng để nhớ, tôi nghĩ. –

+0

Cảm ơn bạn Michal, nó là tốt để biết rằng, nhưng trong trường hợp này nó không phải là một mối quan tâm. Kích thước tệp dự kiến ​​sẽ không bao giờ vượt qua 15 dòng. –

1

này làm việc cho tôi, tôi sử dụng "\ r \ n" cho dòng mới nếu được sử dụng với hệ thống Windows, nếu không \ n là đủ

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

Nhìn thấy nó trong hành động trên speech recognition chrome app tôi - bất cứ việc xuất khẩu tùy chọn để tệp txt hoặc srt ...

+0

Tôi sẽ phải thử giải pháp này sau (và hy vọng nó sẽ làm việc cho tất cả 4 trình duyệt). Cảm ơn bạn đã dành thời gian để đăng bài này. Tôi bình luận nó vào tập tin của tôi để tôi không thể quên nó. –

Các vấn đề liên quan