Print text file in JAVASCRIPT

Question

I am trying to load a text file from server in a html page, and print the content. The text file has specific format, so I can not change it. Below is my sample code :

<html>
<head>
    <title>Print test</title>
    <script>
        var url = './text.txt';
        function load() {
            fetch(url).then(function(resp) {
                resp.text().then(function(text) {
                    var id = document.getElementById("abc");
                    id.textContent = text;
                });
            });
        }
        function print() {
            var id = document.getElementById("abc");
            var printwindow = window.open('', 'PRINT', 'height=400,width=600');
            printwindow.document.write('</head><body >');
            printwindow.document.write(id.textContent);
            printwindow.document.write('</body></html>');
            printwindow.document.close(); // necessary for IE >= 10
            printwindow.focus(); // necessary for IE >= 10
            printwindow.print();
            printwindow.close();
        }
    </script>
</head>
<body>
    <pre id="abc" style="height:85%;overflow:auto; background:white">
    </pre>
    <button onclick="load()">Load</button>
    <button onclick="print()">Print</button>
</body>

A sample text file is following :

text.txt

NAME                    = ABC
SURNAME                 = CDE
OCCUPATION              = XYZ
PLACE                   = UUU

When I click the load button, the text is loaded as it is, but when I try to print in, it is garbled, as shown in the following picture:

Can anybody please tell me what I am doing wrong? Thanks

function print() { var id = document.getElementById("abc"); var printwindow = window.open('', 'PRINT', 'height=400,width=600'); printwindow.document.write('</head><body >'); printwindow.document.write("<pre>" + id.textContent + "</pre>"); printwindow.document.write('</body></html>'); printwindow.document.close(); // necessary for IE >= 10 printwindow.focus(); // necessary for IE >= 10 printwindow.print(); printwindow.close(); } — kunal verma
– kunal verma, Commented Feb 7, 2019 at 10:53

samb102 · Accepted Answer · 2019-02-07 10:43:36Z

2

You are losing the formatted text because when you open the pop-up, you are appending the text without"pre" tag, which keep the formatted aspect.

You just need to append "pre" tag in the pop-up :

printwindow.document.write('</head><body ><pre>');
printwindow.document.write(id.textContent);
printwindow.document.write('</pre></body></html>');

answered Feb 7, 2019 at 10:43

samb102

1,1145 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kunal verma · Accepted Answer · 2019-02-07 10:50:57Z

<html>
<head>
    <title>Print test</title>
    <script>
        var url = './text.txt';
        function load() {
            fetch(url).then(function (resp) {
                resp.text().then(function (text) {
                    var id = document.getElementById("abc");
                    id.textContent = text;
                });
            });
        }
        function print() {
            var id = document.getElementById("abc");
            var printwindow = window.open('', 'PRINT', 'height=400,width=600');
            printwindow.document.write('</head><body >');
            printwindow.document.write("<pre>" + id.textContent + "</pre>");
            printwindow.document.write('</body></html>');
            printwindow.document.close(); // necessary for IE >= 10
            printwindow.focus(); // necessary for IE >= 10
            printwindow.print();
            printwindow.close();
        }
    </script>
</head>
<body>
    <pre id="abc" style="height:85%;overflow:auto; background:white">
    </pre>
    <button onclick="load()">Load</button>
    <button onclick="print()">Print</button>
</body>
</html>

Collectives™ on Stack Overflow

Print text file in JAVASCRIPT

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related