MozTW 討論區 https://forum.moztw.org/ |
|
如何用 JavaScript 輸出文字檔產生下載窗? https://forum.moztw.org/viewtopic.php?f=18&t=20824 |
第 1 頁 (共 1 頁) |
發表人: | alex301 [ 2007-10-31, 11:18 ] |
文章主題 : | 如何用 JavaScript 輸出文字檔產生下載窗? |
這是一個要能在 IE 與 FX 上都能運作的 .html 檔設計問題...(非XUL) 我想用 JavaScript 將透過運算產生的某字串內容,另存為純文字檔(.txt)。 我希望使用者在點選頁面上的按鈕後,能讓瀏覽器直接產生下載檔案的對話窗,供使用者自選檔案的存檔位置。 請問這該如何做? Thanks! |
發表人: | kourge [ 2007-10-31, 11:35 ] |
文章主題 : | |
不可能,除非你把產生出來的字串傳回伺服器,讓伺服器再產生一次給使用者下載。XMLHttpRequest 可以做到,但是要有 server-side 的配合。 |
發表人: | james [ 2007-11-02, 15:36 ] |
文章主題 : | |
類似的功能需求在 server side 解決會簡單些, 一定要在 client side 實現,似乎也並非完全不可能。 以下是一個簡單的範例: 代碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-Hant" lang="zh-Hant"> <head> <title>Save to local file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function mozillaSaveFile(filePath,content) { if(window.Components) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); file.initWithPath(filePath); if(!file.exists()) file.create(0,0664); var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream); out.init(file,0x20|0x02,00004,null); out.write(content,content.length); out.flush(); out.close(); return true; } catch(ex) { return false; } } return null; } function mozConvertUnicodeToUTF8(s) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); var converter = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"].createInstance(Components.interfaces.nsIScriptableUnicodeConverter); converter.charset = "UTF-8"; } catch(ex) { return manualConvertUnicodeToUTF8(s); } // fallback var u = converter.ConvertFromUnicode(s); var fin = converter.Finish(); return fin.length > 0 ? u + fin : u; } function saveFile(filePath,content) { return mozillaSaveFile(filePath,content); } function getPath(from) { return document.getElementById(from).value; } function getText(from) { var elm=document.getElementById(from); return mozConvertUnicodeToUTF8(elm.value); } function clearMessage() { var status = document.getElementById('status'); status.textContent = ""; } function DownLoadFile() { var filePath = getPath('selectFile'); var content = getText('myText'); var isComplete = saveFile(filePath,content); var msgElm = document.getElementById('status'); msgElm.textContent = isComplete?"** 存檔完成**":"** 存檔失敗 **"; } </script> </head> <body> <pre> 1.輸入文字: <textarea id="myText" onkeyup="clearMessage()"></textarea> 2.選擇檔案: <input id="selectFile" type="file" onchange="clearMessage()"></input> 3.<a href="javascript:DownLoadFile();">下載存檔</a> 狀態:<a id='status'></a> </pre> </body> </html> 1.主要的程式碼片段取自 TiddlyWiki 2.此程式碼只是在 gecko based 的 browsers 的變通方式試作。 3.若欲儲存的字串內容包含 utf8 字元,又有 cross borwsers 的需求,建議改以 java applet 來處理。 TiddlySaver.jar(source) 提供兩個函數 lodeFile(), saveFile() 可於一般文件中 javascript 叫用。 4.若欲「按下連結出現後下載的對話框」,可將 <input ... type="file" /> 改由 javascript 動態產生即可。 |
第 1 頁 (共 1 頁) | 所有顯示的時間為 UTC + 8 小時 |
Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |