在HTML中嵌入文本文件

Question

我想在HTML页面中显示存储在服务器上的文本文件（.rtf，.txt，.log等）的内容。

我尝试使用 embed 标签，但似乎不起作用。

<embed src="/path_to_text_file/text.rtf" width="500" height="300">

我应该使用一个“简单”的方法（或标签）来做这件事，还是我应该像使用 jQuery 一样扫描内容并打印出来？

- damoiser

---

@Dvir 使用该对象时，它会自动开始下载而不显示文件内容。 - damoiser

你是指嵌入还是包含？RTF格式还是纯文本？这是两回事。 - Jukka K. Korpela

那么问题就太宽泛了。 - Jukka K. Korpela

@JukkaK.Korpela 不要想得太广，我们只谈论纯文本文件（没有Word、PDF、PPT等），而且它们没有“编码”。被接受的答案很有效。 - damoiser

@CraigHicks 如果我没有记错，5年前;-)使用嵌入标签时，它会开始下载文件而不是显示内容。 - damoiser

Answer 1

应该使用类似这样的东西：

<object data="/path_to_text_file/text.txt" type="text/plain"
width="500" style="height: 300px">
<a href="/path_to_text_file/text.txt">No Support?</a>
</object>

- JonasT

---

很遗憾，使用Chrome无法正常工作，似乎会自动开始下载而不显示内容。 - damoiser

发布的代码运行良好。类似的 RTF 文件的代码可能不适用。 - Jukka K. Korpela

@JukkaK.Korpela 测试了一个 .rtf 文件。 - damoiser

这在Chrome 63中有效。但是，您必须等待文档加载完成。例如，在window.onload事件内，执行data.contentDocument.body.textContent.trim()，其中data是对您的object元素的引用。此外，您可能希望在object元素上设置零宽度和高度（但不要使用style="display:none" - 这会破坏它）。 - George

对我没用。我认为现代浏览器有更严格的安全措施，已经阻止了这个。我的做法是将数据存储在一个 JavaScript 文件中，并在 <script> 标签中加载它。 - KKS

Answer 2

使用$.ajax()函数和.append()函数，您可以轻松地获取文本文件的内容并在页面上显示。以下是大致操作方式。当页面加载时执行此操作，以便立即将文件与页面的其余部分一起加载。

$.ajax({
        async:false,
        url: 'folder/file.txt',
        dataType: 'text',
        success: function(data) 
        {
        $('element').append(data);
            }
        });

多试几次以获得您所需的正确结果。你也可以使用PHP，但除非你真的需要解析数据，否则在这种情况下使用PHP有点过度。

- Keith V

---

这是包含，而不是嵌入。也许这是实际想要的，但不是所要求的。 - Jukka K. Korpela

哈，抱歉啊，但很高兴它对你有用。你也可以使用$.get()请求，我只是想给你原始的ajax请求，因为它有更多你可以控制的选项。 - Keith V

Answer 3

标签只用于插件内容（flash等）。 尝试使用ajax获取内容，然后使用document.write编写内容; 或者在后端语言(PHP、ASP等)中使用include标签。

- zzxx53

---

+1 给了我正确的工作方向，Keith V 获得最佳答案，因为他给了我比你更完整的解决方案。 - damoiser

Answer 4

在这种情况下使用iFrame可能会很有用。

<iframe src="/path_to_text_file/text.rtf" width="500" height="300" frameBorder="0">

- John Henry

---

我点赞了这个解决方案，因为它比对象HTML元素更灵活和常用。它还可以用作覆盖层，并且具有滚动条，这是与主题无关的内容... - Nikolai Ehrhardt

Answer 5

注意：对于与Keith V的答案相似以及他提到了get请求，我表示歉意 - 在发布我的答案后，我才注意到他关于get请求的评论。

我发现以下结构很有帮助，可以让我将文本样式设置为span，而不必使用对象：

function append_url_content_to_div(url){
  $.get(url, function(returned_data){
    console.dir(returned_data);
    var content = '<span>'+returned_data+'</span>';
    $("#appendee_div").append(content);        
  });
}
append_url_content_to_div("https://dl.dropbox.com/s/euk874r7zd1cx0d/example_text.txt?dl=0"); //note that it has to be "dl." not "www." in dropbox

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="appendee_div"></div>

对于我的Dropbox内容，它对我有效，但我不明白为什么它不能用于公开可见的文本文件。正如您在代码中看到的那样，您需要jQuery。

- it Haffens

Answer 6

我发现将HTML5代码插入网站的最佳方法是将代码保存到新的文本文档中，然后使用嵌入该文档。然后您可以使用css和div对代码进行格式化。

- Dylan_Lockling

---

使用什么来嵌入那个文件？ - dwilliss

Answer 7

只需使用php。将html格式更改为php并使用

echo file_get_contents("name_of_the_file.txt");

就这么简单。 必须使用php，因为您必须在服务器端输出文本，否则信息将无法显示给客户端。

我认为这是实现您想要的最简单的方法。

- user3279149

---

我认为我不必使用像PHP、ASP、AngularJS这样的服务器端语言编程，当然这样做更容易，但我的问题是如何仅在客户端实现。请参见已接受的解决方案。 - damoiser