MozTW 討論區

各項 Mozilla 相關軟體與技術討論

所有顯示的時間為 UTC + 8 小時





發表新文章 回覆主題  [ 3 篇文章 ] 
發表人 內容
 文章主題 : 如何用 JavaScript 輸出文字檔產生下載窗?
文章發表於 : 2007-10-31, 11:18 
離線

註冊時間: 2005-02-16, 11:07
文章: 575
這是一個要能在 IE 與 FX 上都能運作的 .html 檔設計問題...(非XUL)

我想用 JavaScript 將透過運算產生的某字串內容,另存為純文字檔(.txt)。
我希望使用者在點選頁面上的按鈕後,能讓瀏覽器直接產生下載檔案的對話窗,供使用者自選檔案的存檔位置。

請問這該如何做?
Thanks!


回頂端 Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8
 個人資料  
 
 文章主題 :
文章發表於 : 2007-10-31, 11:35 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
不可能,除非你把產生出來的字串傳回伺服器,讓伺服器再產生一次給使用者下載。XMLHttpRequest 可以做到,但是要有 server-side 的配合。

_________________
korp + korp 中文站(沒精神更新)


回頂端 Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8
 個人資料  
 
 文章主題 :
文章發表於 : 2007-11-02, 15:36 
離線

註冊時間: 2005-05-17, 14:12
文章: 232
類似的功能需求在 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.jarsource) 提供兩個函數 lodeFile(), saveFile() 可於一般文件中 javascript 叫用。

4.若欲「按下連結出現後下載的對話框」,可將 <input ... type="file" /> 改由 javascript 動態產生即可。

_________________
| TiddlyWiki 華語支援論壇 | PrinceTiddlyWiki |


回頂端 Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
 個人資料  
 
顯示文章 :  排序  
發表新文章 回覆主題  [ 3 篇文章 ] 

所有顯示的時間為 UTC + 8 小時


誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 1 位訪客


不能 在這個版面發表主題
不能 在這個版面回覆主題
不能 在這個版面編輯您的文章
不能 在這個版面刪除您的文章
不能 在這個版面上傳附加檔案

搜尋:
前往 :