客戶端文件的創建和下載

我們正在使用fusioncharts，它有能力在客戶端使用javascript導出csv數據，我們希望能夠在瀏覽器中實時獲取數據並創建文件。那可能嗎？怎麼樣？客戶端文件的創建和下載

來源

2011-02-24 arinte

你想使用客戶端的JavaScript來創建一個文件？ – SuperSaiyan 2011-02-24 17:09:36

AFAIK沒有辦法只有js。 – 2011-02-24 17:10:44

似乎沒有人在這裏提供了一個自動*客戶端*跨瀏覽器的解決方案，所以這裏是：http://stackoverflow.com/a/3665147/279255 – Marc 2013-01-10 20:44:31

-2

您無法通過設計使用Javascript觸摸本地磁盤。

我認爲你可以將大量的數據從JavaScript傳遞到服務器端代碼（php，asp.net，java ...），然後你可以以某種方式將它流式傳輸到瀏覽器。

來源

2011-02-24 17:10:18

http://www.html5rocks.com/en/tutorials/file/filesystem/... – AKX 2012-12-04 08:38:21

從4/2014起，文件系統API規範^^已被殺死。 – 2014-07-25 20:55:04

試試下面的代碼可以訪問客戶端文件系統，但這隻適用於IE瀏覽器

<html> 
    <body> 
    <script language="JScript"> 
    <!-- 
    function getsize() 
    { 
     var myObject, afile, size; 
     myObject = new ActiveXObject("Scripting.FileSystemObject"); 
     afile = myObject.GetFile("c:\\test.txt") 
     size = afile.Size; 
     alert("The size of the test.txt file is:" + size); 
    } 
    --> 
    </script> 
    Get the size for the file "test.txt" 
    <form name="myForm"> 
    <input type="Button" value="Get Size" onClick='getsize()'> 
    </form> 
    </body> 
    </html>

來源

2011-02-24 17:10:41

這個例子很好的解決方案，但我認爲我們不應該以瀏覽器的方式實現任何東西，我們在2011年不會在1998年，人們使用Chrome，Opera，Safari，IE，Firefox，移動瀏覽器...... – 2011-02-24 17:18:43

@Davide - 我只是展示了增加他的知識的方式，即我們可以在瀏覽器中做到這一點，我的答案是如何滿足他的一半要求..我的回答並未超出這個問題的範圍......你寫了什麼我已經知道了...並且已經在我的回答中寫道，這是工作形式，即只有 – 2011-02-25 04:35:27

我明白你的意思，但是要注意我們不應該針對任何特定的瀏覽器或操作系統，上面的代碼可能會在ipad或其他任何程序上失敗非Windows平臺。 – 2011-02-25 07:02:25

我建議你不要在客戶端本地創建一個文件，而不是提示用戶（另存爲對話框框）下載所需位置的客戶端數據。

通過javascript下載本地/客戶端內容的解決方案並非直截了當。我已經使用smartclient-html-jsp實現了一個解決方案。

這裏是解決方案：

我在SmartClient的項目生成。我們需要下載/導出網格的數據（結構如表）。
我們使用REST Web服務來服務於服務器端的數據。所以我無法兩次訪問網址;一個用於網格，第二個用於導出/轉換要下載的數據。
我做了兩個JSP：blank.jsp和export.jsp。
blank.jsp字面上是空白的，現在我需要導出我已經在客戶端上的網格數據。
現在，當以往用戶要求導出網格數據，我做如下：
1. 公開賽網址blank.jsp一個新窗口使用document.write
2. 我在它創建一個表單，在一個字段名稱文本它並設置數據在其內部導出。
3. 現在將該表單POST到同一層次的export.jsp。
4. 我在下面粘貼的export.jsp的內容不言自明。

<%@ page import="java.util.*,java.io.*,java.util.Enumeration"%> 
<% 
    response.setContentType ("text/csv"); 
    //set the header and also the Name by which user will be prompted to save 
    response.setHeader ("Content-Disposition", "attachment;filename=\"data.csv\""); 
    String contents = request.getParameter ("text"); 
    if (!(contents!= null && contents!="")) 
     contents = "No data"; 
    else 
     contents = contents.replaceAll ("NEW_LINE", "\n"); 

    //Open an input stream to the file and post the file contents thru the 
    //servlet output stream to the client m/c 

    InputStream in = new ByteArrayInputStream(contents.getBytes()); 
    ServletOutputStream outs = response.getOutputStream(); 

    int bit = 256; 
    int i = 0; 
    try { 
     while ((bit) >= 0) { 
      bit = in.read(); 
      outs.write(bit); 
     } 
     //System.out.println("" +bit); 
    } catch (IOException ioe) { 
     ioe.printStackTrace(System.out); 
    } 
    outs.flush(); 
    outs.close(); 
    in.close(); 
%> 
<HTML> 
<HEAD> 

</HEAD> 

<BODY> 

<script type="text/javascript"> 
    try {window.close();} catch (e) {alert (e);} 
</script> 
</BODY> 
</HTML>

該代碼被測試和部署/生產環境中工作，也這是跨瀏覽器功能。

來源

2011-06-23 11:31:09 shaILU

這完全是服務器端，所以與5年後的 – 2016-07-18 21:40:43

看看filesaver.js。只要你對IE10 +沒問題，這是一個非常穩固的解決方案，可以根據瀏覽器使用最佳方法進行優雅處理。

來源

2014-07-25 21:00:42

由於馬克的答案是（愚蠢）轉換爲註釋，並沒有其他的答案其實回答這個問題，這裏的答案：

<a id="a">Click me to DL something</a> 
<script> 

setupDownloadLink(document.getElementById("a"), "moose.txt", "ok") 

function setupDownloadLink(element, filename, text) { 
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)) 
    element.setAttribute('download', filename) 
} 
</script>

這是從應答所得出馬克引用，這是非常有用的在你沒有具體點擊的鏈接標籤情況：https://stackoverflow.com/a/3665147/279255

// must be called in a click handler or some other user action 
function download(filename, text) { 
    var element = document.createElement('a'); 
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); 
    element.setAttribute('download', filename); 

    element.style.display = 'none'; 
    document.body.appendChild(element); 

    element.click(); 

    document.body.removeChild(element); 
}

來源

2016-07-18 21:54:46

這個問題無關吧？ LOL – arinte 2016-09-13 12:54:18

@arinte heh，在這一點上它不會爲你帶來好處 – 2016-09-16 02:39:10

客戶端文件的創建和下載

回答

相關問題