如何使用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");
        });
});

---

从客户端获取txt文件内容可以通过多种方式完成，其中之一是使用JQuery或，但我不确定是否使用JQuery

另一个简单的选项是使用iframe，例如：

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

---

您可以使用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]);
});

$（“#myFile”）。关于（“更改”，函数（e）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#myContents”）.html（this.result.replace（/\n/g，“
”）；
};
reader.readAsText（e.target.files[0]）；
});

编辑：

您已经编辑了问题，现在我看到您想要从服务器获取TXT文件。我不使用Angular.JS，但在jQuery中，它类似于：

HTML:

Javascript/jQuery：

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

$.ajax({
url:“myFile.txt”，
数据：{}，
async:false，
成功：功能（响应）{
$（“#myServerContents”）.html（response.replace（/\n/g，“
”）；
},
数据类型：“文本/普通”
});

您可能需要一个AJAX请求。您在后端使用什么技术？Node.JS是一个非常有用的工具。在github，您可以找到项目“LearnyYouNode”，他们有一个Http客户机示例，正好可以做到这一点。此外，该项目还有大量其他有趣的示例可供使用。首先，你说的是

下载

（我们知道这意味着什么），而不是说

显示内容

。。。决定你想要什么，展示你尝试过的，更加具体。还有什么是适合你的

内存位置

？谢谢你Joraid。确实下载了文件，但是我得到了保存文件的提示。如何在框架内显示内容？嗯，理想情况下，它应该只在框架内显示txt文件内容，请检查。@TERACytE请检查我的答案更新，我添加了一个演示。测试并查看您是否可以查看txt文件内容，或者您是否正在升级下载。顺便说一句，我注意到您正在使用angulerjs，是否正在使用JQuery？我没有收到下载提示，但我在右下角的窗格中看到“访问此页面时遇到错误”。我没有使用jQuery，但我可以。非常抱歉，我选择的示例文件是错误的，它是一个无法访问的文件。在这里，检查这个，这是一个正常的.txt文件更新。顺便说一句，您可以使用自己的文本文件，只需更改IFrame标记中的src，以真正测试它是否将加载您的文件。哦，抱歉，现在我看到您已编辑了您的问题，并且您希望在服务器中获取一个文件。因此，您需要使用AJAX或WebSocket来获取您想要的内容。我再举一个例子，一分钟=）我刚刚编辑了我的答案，包括一个txt文件的AJAX请求，以及您应该如何将其放入HTML中。谢谢。我添加了.ajax，它运行并似乎下载了该文件（内容长度：27741）。我不清楚如何在HTML正文中显示响应。我尝试了“”，但没有成功。您是否尝试过查看AJAX响应是否附带数据？您是在域内调用TXT文件，还是跨域调用？（因为如果您试图从另一个域获取信息，由于安全原因，它将无法工作）我不确定如何验证是否接收到文件本身。返回的内容长度是27741，而我正在获取的实际文件是磁盘上的28K，因此它看起来像是被发回的。另外，响应代码是HTTP200。

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