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/