如何使用HTML5/Javascript下載和顯示文本文件？

無論如何下載文本文件並使用HTML5/JavaScript顯示其內容？我寧願將它保存到內存位置，但將其保存到臨時文件將是第二個選項。如何使用HTML5/Javascript下載和顯示文本文件？

- 更新 -

根據以下聲明。以下是我迄今爲止使用AngularJS從Atmos ObjectStore獲取文件的過程。我不清楚如何呈現文件內容。從客戶端

var app = angular.module('MyTutorialApp',[]); 

app.controller("MainController", function($scope, $http) { 

    console.log("starting download"); 
    $scope.downloadedFile = null; 

    var config = {headers: { 
     'Accept': '*/*' 
    }}; 

    $http.get('https://some_path/theFile.txt?uid=myUUID&expires=1396648771&signature=mySignature', config) 
     .success(function(data) { 
      $scope.downloadedFile = data; 
      console.info(data); 
      console.log("finished download"); 
     }); 
});

來源

2014-04-04 TERACytE

你可能需要一個AJAX請求。 –

你在後端使用了什麼技術？ – Yoann

一個非常有用的工具是Node.JS.在github上，你可以找到項目「learnyounode」，並且他們有一個Http客戶端的例子。此外，該項目還有大量其他有趣的例子可供玩耍。 – RichS

你可以做到這一點與HTML5 +的Javascript！我做了this example：

HTML代碼：

<input id="myFile" type="file" value="Select a text file" /> 
<br /> 
<h3>Results:</h3> 
<div id="myContents"></div>

Javascript代碼：

$("#myFile").on("change", function(e) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     $("#myContents").html(this.result.replace(/\n/g, "<br />")); 
    }; 
    reader.readAsText(e.target.files[0]); 
});

編輯：

編輯完你的問題，現在我看你想要從服務器上獲取TXT文件。好吧，我不使用Angular.JS，但在jQuery的，這將是這樣的：

HTML：

<div id="myServerContents"></div>

的Javascript/jQuery的：

$.ajax({ 
    url: "myFile.txt", 
    data: {}, 
    async: false, 
    success: function (response) { 
     $("#myServerContents").html(response.replace(/\n/g, "<br />")); 
    }, 
    dataType: "text/plain" 
});

來源

2014-04-04 03:07:08 Buzinas

哦，對不起，現在我看到你已經編輯了你的問題，並且你想要在你的服務器中創建一個文件。所以，你需要使用AJAX或者websockets來獲取你想要的內容。我會再舉一個例子，一分鐘=） – Buzinas

我剛剛編輯了我的答案，包括對txt文件的AJAX請求，以及如何將其放入HTML中。 – Buzinas

感謝您的Businas。我添加了.ajax，它運行並似乎下載文件（Content-Length：27741）。我不清楚如何在HTML主體中呈現響應。我試過「

」，但沒有奏效。 – TERACytE

抓取txt文件的內容可以在許多方面進行，一個是使用jQuery .get()或.load()，但我不知道，如果你使用JQuery。

另一種簡單的選擇是使用iframe，藉此例如：

<iframe src='http://yourSite.com/yourDir/logs/myTextFile.txt' />

JSFIDDLE DMEO

來源

2014-04-04 02:55:07 MJoraid

謝謝你Joraid。那確實下載了文件，但我得到提示保存文件。我如何讓內容在框架內顯示？ – TERACytE

嗯理想情況下，它應該只顯示fram內的txt文件內容，lemme檢查。 – MJoraid

@TERACytE請檢查我的答案更新，我添加了演示。測試並查看您是否可以查看txt文件內容，或者您是否被提升爲下載。順便說一句，我注意到你正在使用angulerjs，一邊使用JQuery？ – MJoraid

如何使用HTML5/Javascript下載和顯示文本文件？

回答

相關問題