问题 在html中嵌入文本文件


我想在HTML页面中显示文本文件的内容(.rtf.txt.log,...)存储在服务器上。

我试过了 embed 但似乎不起作用。

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

有一个“简单”的方法(或标签)来做,或者我应该扫描内容并打印它,例如,jQuery?


3481
2017-10-11 17:48


起源

请改用对象 - Dvir
@Dvir with object它自动启动下载而不显示文件的内容 - damoiser
你的意思是嵌入还是包含? RTF还是纯文本?不同的东西。 - Jukka K. Korpela
@ JukkaK.Korpela显示文件的内容。所有类型的“简单”文本格式(.rtf,.txt,.log,...) - damoiser
@CraigHicks如果我没记错5年前我做了什么;-)用embed标签开始下载文件而不是显示内容 - damoiser


答案:


使用带有.append()函数的$ .ajax()函数,您可以轻松获取文本文档的内容并在页面上显示它们。你在下面看到的东西。在加载页面时执行此操作以立即将文件加载到页面的其余部分。

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

稍微玩一下,以获得您正在寻找的正确结果。你也可以使用PHP,但除非你真的需要解析数据,否则PHP在这种情况下有点矫枉过正。


6
2017-10-11 18:33



+1有点复杂,但它的工作原理;) - damoiser
这是包含,而不是嵌入。也许实际上是想要什么,但不是所要求的。 - Jukka K. Korpela
对不起达摩克,但很高兴它适合你。您也可以使用$ .get()请求,我只是想我会给你原始的ajax请求,它有更多你可以控制的选项。 - Keith V


这样的事情应该这样做:

<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>

7
2017-10-11 17:55



与Chrome无疑不起作用,似乎自动启动下载而不显示内容 - damoiser
发布的代码效果很好。类似的RTF文件代码可能不会。 - Jukka K. Korpela
@ JukkaK.Korpela使用.rtf文件进行了测试 - damoiser
这适用于Chrome 63.但是,您必须等待文档加载。例如,来自a window.onload 事件,做 data.contentDocument.body.textContent.trim(),哪里 data 是对你的参考 object 元件。此外,你可能想要零宽度和高度 object 元素(但不是 style="display:none"  - 这将打破它)。 - George


 仅适用于插件内容(flash等)。 尝试使用ajax获取内容,然后使用 document.write; 或者使用 include 后端语言标记(PHP,ASP等)


3
2017-10-11 17:54



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


注意:对与Keith V的回答相似的道歉以及他提到的事实得到了请求 - 我在发布回答后才注意到他对获取请求的评论。

我发现以下结构很有用,并允许我将文本设置为跨度而不是必须使用对象:

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。


0
2018-03-31 07:47





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


-3
2017-11-20 17:40



使用嵌入该文档 什么? - dwilliss


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

echo file_get_contents(“name_of_the_file.txt”);

就那么简单。 您必须使用php,因为您必须在服务器端输出文本,除非信息不会显示给客户端。

我认为这是做你想做的最简单的方法。


-4
2018-05-29 13:14



我不认为我必须使用像PHP,ASP,AngularJS这样的服务器端语言编程。确定它更容易,但我的问题是如何在客户端实现这一点。查看已接受的解决方案 - damoiser