如何使用HTML5 / Javascript下载和显示文本文件？

Question

无论如何要下载文本文件并使用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");
        });
});

Answer 1

从客户端获取txt文件内容可以通过多种方式完成，一种是使用JQuery .get（）或.load（） ，但我不确定您是否使用JQuery。

另一个简单的选择是使用iframe，举个例子：

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

JSFIDDLE DMEO

Answer 2

你可以用HTML5 + Javascript做到这一点！ 我做了这个例子 ：

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"
});