Printing .txt file into html

Question

I need to print a .txt file into a html document, I also need to be able to style this text output. I have seen many answers regarding this, but many have been poor, using things like PHP and "iframe". Would anyone know how to do this using JavaScript? (So that the data can be styled)

Many thanks

Can you edit the question to provide an example of the .txt file content you want, & also of how you want it styled please - as it stands the question is too broad for us to be able to help. Also it is not clear what you mean by 'PHP and .' - please clarify that as well. — MandyShaw, Jul 29 '18 at 19:19
The big problem here I think is to style the output, what do you mean with that? Is .txt raw text? — Emeeus, Jul 29 '18 at 19:24
@MandyShaw The styling is not the point of the question, sorry if that was unclear, I can do the styling myself. I just need a way of printing any .txt file, to html. PHP is a programming language, if you don't know what it is, no worries. — Luke Robinson, Jul 29 '18 at 19:26
You could use ajax, read this https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file — Emeeus, Jul 29 '18 at 19:28
@Emeeus So if you were to use , you would not be able to style the outputted text - e.g. you would not be able to change the font size, font colour, font type. I need an alternate way of printing this text, without using iframe, so that the font type can be changed (ie. styled). The text is raw, yes, currently the text file reads "Hi". — Luke Robinson, Jul 29 '18 at 19:28
It looks like you want us to write some code for you. While many users are willing to produce code for a coder in distress, they usually only help when the poster has already tried to solve the problem on their own. A good way to demonstrate this effort is to include the code you've written so far, example input (if there is any), the expected output, and the output you actually get (console output, tracebacks, etc.). The more detail you provide, the more answers you are likely to receive. Check the [FAQ] and [ask]. — Isma, Jul 29 '18 at 19:40
Hi, it was the 'and .' I didn't understand! Maybe that's not what you meant to type. I would definitely recommend Ajax, as suggested by @Emeeus. You will need to pick the data up out of the Ajax-populated element, style it as you wish, and put it back. (I can't see any reference to an iframe?) — MandyShaw, Jul 29 '18 at 19:44
@MandyShaw sorry, I didnt notice that mistake - 'and' was supposed to be followed by 'iframe' — Luke Robinson, Jul 29 '18 at 19:54
@Isma I have spent the past two hours writing various codes to try to solve this problem, I did not think people reading this would be wanting to read my variations of failed code, as they all failed, miserably. — Luke Robinson, Jul 29 '18 at 20:03
@Luke people need to know you have done your best to solve this by yourself before calling on the community here for assistance. So it would be good, another time, to quote one of your attempts & indicate what happened when you tried it. In fact, given your comments on the answer below, that would quite possibly have been helpful in reaching a solution. — MandyShaw, Jul 29 '18 at 20:35

Emeeus · Accepted Answer · 2018-07-29T19:45:32.540

1

Here you have a basic example:

   <div id="myTXT"> 
   <!-- your txt content goes here -->   
   </div>

<script>
    var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("myTXT").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("GET", "path/to/yourTxt.txt", true);
      xhttp.send();
</script>

In this case, yourTxt.txt must be present in you server or in a server that allow cross origin, see this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

edited Jul 29 '18 at 19:45

answered Jul 29 '18 at 19:37

Emeeus

5,072
2
25
37

Sorry, what do you mean by in a server? – Luke Robinson Jul 29 '18 at 19:53
Yes, here you have an exampe https://jsfiddle.net/ayt2c9od/4/ I can't find a remote txt file but it's the same – Emeeus Jul 29 '18 at 19:53
@LukeRobinson Let's suppose your javascript is in http://example.com/index.html, your .txt file must be in http://example.com/yourTxt.txt or in other domain but with allow origin headers – Emeeus Jul 29 '18 at 19:57
I have read the whole Origin header page, but I'm not really too sure what it all means? I'm just trying to fetch a .txt file from a local file on my disk drive, is this possible? Or must it be off of a server? – Luke Robinson Jul 29 '18 at 20:00
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. So file:// is not supported. You can't read local files even if you share the origin (running javascript in localhost or somethig) – Emeeus Jul 29 '18 at 20:07
The only way is that user upload that file – Emeeus Jul 29 '18 at 20:08
Okay, that makes a lot more sense, I have been typing codes similar to yours all day and have got no result, I didn't know you couldn't do it from a local file. – Luke Robinson Jul 29 '18 at 20:09

Printing .txt file into html

1 Answers1