HTML5 JavaScript Pobierz atrybut

Pracuję nad projektem od kilku miesięcy i zbliżam się do końca. Jednym z ostatnich kroków jest dostarczenie pliku, który będzie wypełniony informacjami wygenerowanymi przez działania użytkownika podczas jego sesji. Can I write files with HTML5/JS? i odpowiedź ecmanauta bardzo mnie zbliżyła, ponieważ dostarczył dwie metody, jedną w czystym html5 i jedną za pomocą JavaScript.HTML5 JavaScript Pobierz atrybut

Najpierw użyłem metody JavaScript, która działa tylko w Chrome, a nie w Mozilli lub IE. Użyłem więc czystej metody html5 w połączeniu z alternatywnym JavaScriptem, aby wkleić go na stronę, aby można było kliknąć.

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

Kod ten tworzy plik, który zostanie pobrany, ale nie zawiera nowej linii którym wyrób powiedział był „ ”. Poszukiwałem więc, jakie kody innych znaków można rozpoznać. http://en.wikipedia.org/wiki/Newline dostarczył mi wiele możliwych wyborów, żaden z nich, których próbowałem, nie zadziałał. Te, które wypróbowałem to: "& # 10 ',' ',' & # 13 ',' ',' \ r \ n ',' \ r ',' \ n ',' \ cr ',' \ c \ r ', 0x0D, 0x0A, 0c0D0A. W wielu przypadkach usunięto znak nowej linii i nic się nie pojawiło.

Podczas testowania powyższego kodu działa w Mozilli i Chrome (bez nowej linii), ale wynik w IE jest inny. Po kliknięciu linku Zapisz, w rzeczywistości przechodzi do strony i zawiera adres URL jako zawartość danych.

Chociaż projekt może być akceptowalny bez działania tej funkcji, bardzo chciałbym, aby działało to po spędzeniu tak wiele czasu i wysiłku na tym i zbliżeniu się do niego. Też muszę przetestować to w Safari, ale jeszcze nie testowałem w tej przeglądarce. Wymagane wsparcie przeglądarki od najważniejszego do najmniejszego jest następujące: Mozilla, Chrome, Safari, IE. Jeśli to możliwe, chciałbym uniknąć specyficznego dla przeglądarki kodowania.

Należy również wspomnieć, że tak jak w pierwszym linku, nie chcę wysyłać do serwera, aby pobrać, potrzebuję go działającego lokalnie po stronie klienta bez interakcji serwera.

Podsumowując, potrzebuję przynajmniej uzyskać nową linię roboczą dla pliku, aby Mozilla i Chrome działały w pełni. I jeśli to możliwe, sposób, aby plik działał również w IE.

Edytowanie: 3 listopada 2014 13:40 czasu lokalnego Próbowałem sugerowanej edycji przez maths4js o zmianie wokół moich ofert, a sugestia nie działa. Przyszło mi do głowy, że przesłanie większej przykładowej strony kodu byłoby pomocnym pomysłem. Zasugerowano również, że sprawdzam, które przeglądarki obsługują tę funkcję. Wygląda na to, że IE i Safari tego nie robią, więc nie będę się teraz nimi przejmował, a może w przyszłości mają dla nich kodowanie zgodne z przeglądarką.

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

Chciałbym podziękować wszystkim za wysiłek i czas, jaki mi dałeś.

Źródło

2014-11-03 Daniel Watt

Rozwiązanie html5 działa oczywiście tylko w przeglądarkach obsługujących atrybut pobierania. –

Spróbuj przekonwertować tekst do base64 za pomocą okna.Funkcja 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>

powinny działać, jako base64 poprawnie koduje/utrzymuje nowego wiersza.

Źródło

2014-11-03 19:50:34

To rozwiązanie było dokładnie tym, czego potrzebowałem do tej aplikacji, dziękuję bardzo. –

Trzeba jednak pamiętać, że wyjście funkcji base64 może być o 33% większe niż oryginalny ciąg. Nie sądzę, że będzie to miało ogromny wpływ na wydajność, o ile nie będziesz starał się tworzyć naprawdę dużych plików (takich jak megabajty tekstu), ale warto o tym pamiętać. –

Dziękuję Michał, dobrze to wiedzieć, ale w tym przypadku nie jest to problemem. Rozmiar oczekiwanego pliku nigdy nie powinien przekroczyć 15 linii. –

To działa na mnie, używam „\ r \ n” dla nowych linii, jeśli używane z systemu Windows, w przeciwnym razie \ n jest wystarczająco

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

Zobacz go w akcji na moim speech recognition chrome app - wszelkie eksportu opcje do plików txt lub srt ...

Źródło

2014-11-03 19:49:24

Będę musiał wypróbować to rozwiązanie później (i mam nadzieję, że będzie działać dla wszystkich 4 przeglądarek). Dziękuję za poświęcenie czasu na opublikowanie tego. Komentuję to w swoim pliku, więc nie mogę o tym zapomnieć. –

HTML5 JavaScript Pobierz atrybut

Odpowiedz

Powiązane problemy