用JAVASCRIPT打印文本文件_Javascript_Html_Printing

用JAVASCRIPT打印文本文件

javascript html printing

用JAVASCRIPT打印文本文件,javascript,html,printing,Javascript,Html,Printing,我试图从服务器加载一个html页面中的文本文件，并打印内容。文本文件有特定的格式，因此我无法更改它。下面是我的示例代码： <html> <head> <title>Print test</title> <script> var url = './text.txt'; function load() { fetch(url).then(function(resp)

我试图从服务器加载一个html页面中的文本文件，并打印内容。文本文件有特定的格式，因此我无法更改它。下面是我的示例代码：

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

当我单击“加载”按钮时，文本将按原样加载，但当我尝试打印时，文本被乱码，如下图所示：

谁能告诉我我做错了什么？谢谢

您正在丢失格式化的文本，因为当您打开弹出窗口时，您正在添加没有“pre”标记的文本，这将保留格式化的内容

您只需在弹出窗口中添加“pre”标记：

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

printwindow.document.write（“”）；
printwindow.document.write（id.textContent）；
printwindow.document.write（“”）；

您正在丢失格式化的文本，因为当您打开弹出窗口时，您正在添加没有“pre”标记的文本，这将保留格式化的内容

您只需在弹出窗口中添加“pre”标记：

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

printwindow.document.write（“”）；
printwindow.document.write（id.textContent）；
printwindow.document.write（“”）；


打印测试
var url='./text.txt'；
函数加载（）{
获取（url）。然后（函数（resp）{
resp.text（）.then（函数（文本）{
var id=document.getElementById（“abc”）；
id.textContent=文本；
});
});
}
函数打印（）{
var id=document.getElementById（“abc”）；
var printwindow=window.open（“”，'PRINT'，'height=400，width=600'）；
printwindow.document.write（“”）；
printwindow.document.write（“+id.textContent+”）；
printwindow.document.write（“”）；
printwindow.document.close（）；//IE>=10所需
printwindow.focus（）；//IE>=10所需
printwindow.print（）；
printwindow.close（）；
}
负载
印刷品


打印测试
var url='./text.txt'；
函数加载（）{
获取（url）。然后（函数（resp）{
resp.text（）.then（函数（文本）{
var id=document.getElementById（“abc”）；
id.textContent=文本；
});
});
}
函数打印（）{
var id=document.getElementById（“abc”）；
var printwindow=window.open（“”，'PRINT'，'height=400，width=600'）；
printwindow.document.write（“”）；
printwindow.document.write（“+id.textContent+”）；
printwindow.document.write（“”）；
printwindow.document.close（）；//IE>=10所需
printwindow.focus（）；//IE>=10所需
printwindow.print（）；
printwindow.close（）；
}
负载
印刷品

内容位于为mefunction print（）添加的tagI中，{var id=document.getElementById（“abc”）；var printwindow=window.open（''print'，'height=400，width=600'）；printwindow.document.write（''）；printwindow.document.write（“+id.textContent+”）；printwindow.document.write（“”）；printwindow.document.close（）；//IE>=10 printwindow.focus（）所需；//IE>=10 printwindow.print（）所需；printwindow.close（）；}修改函数print（）正如我在下面所做的那样，内容位于为mefunction print（）添加的tagI内部，该tagI用于mefunction print（）{var id=document.getElementById（“abc”）；var printwindow=window.open（“”，'print'，height=400，width=600'）；printwindow.document.write（“”）；printwindow.document.write（“+id.textContent+”）；printwindow.document.write（“”）；printwindow.document.close（）；//IE>=10 printwindow.focus（）所需；//IE>=10 printwindow.print（）所需；printwindow.close（）；}修改函数print（），如下所示

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