图像未显示在javascript打印预览中

icomxhvb 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(229)

我正在尝试将数据打印到预格式化的文档中。学生将在文本区回答问题，单击打印为pdf时，将打印带有学校名称和徽标的答案。一切正常，但标志不是预览和打印。我收集了密码。简单的html和javascript。提前谢谢。
这是完整的代码

<html>
<head>
    <title>Online Test</title>
</head>
<body>
    <div style="padding: 10px 0;">
        <h1>Online Test</h1>
    </div>
    <!--Data entry section.-->
    <div id="container_data_entry">
         <h2 id="subject"><b>Subject - Computer Science</b></h2> <br />

        <div id="container" style="width:100%;overflow:auto;">
            <ul>
                <li><b>Q No. 1:</b>Question one?</li>
                <li><textarea id="a1"></textarea></li>
            </ul>
            <ul>
                <li><b>Q No. 2:</b>Question two?</li>
                <li><textarea id="a2"></textarea></li>
            </ul>
            <ul>
                <li><b>Q No. 3:</b> Question three?</li>
                <li><textarea id="a3"></textarea></li>
            </ul>
        </div>
        <div style="text-align:center;">
            <input type="button" style="" value="Print to PDF" id="btPrint" onclick="onlineTestApp.printPage();" />
        </div>
    </div>
</body>
<script>
    let onlineTestApp = new function () {
        this.printPage = function () {
            let style = "<style>";
            style = style + "h1, h2 {text-align:center; font:22px Times New Roman; font-weight:bold;}";
            style = style + ".answers {font:18px Calibri; padding:10px 0;}";
            style = style + "</style>";   
            let header ='<img src="logo.png" width="100px" height="100px"/>' +
            '<h1>School Name</h1>' + '<h2>Online Test</h2>';
            let theBody = '';
            // get all textarea (anwsers).
            let ele_tArea = document.getElementsByTagName('textarea');
            for (let i = 0; i <= ele_tArea.length - 1; i++) {
                if (theBody === '') {
                    if (ele_tArea[i].value != '') {
                        theBody = '<p class="answers"> <b>Answer ' + (i + 1) + '</b> - ' + ele_tArea[i].value + '</p>';
                    }
                }
                else {
                    if (ele_tArea[i].value != '') {
                        theBody = theBody + '<p class="answers"> <b>Answer ' + (i + 1) + '</b> - ' + ele_tArea[i].value + '</p>';
                    }
                }
            }
            theBody = header + theBody;
            // Create window object and print the data.
            let  newWin = window.open('', '', '');

            newWin.document.write(style);
            newWin.document.write(theBody);
            newWin.print();
            newWin.close();
        }
    }
</script>
</html>

JavaScript Html

来源：https://stackoverflow.com/questions/68310731/image-not-showing-in-javascript-print-preview

1条答案

按热度按时间

af7jpaap1#

您正在加载图像之前调用print。您可以使函数异步并添加 await new Promise(r => setTimeout(r, 2000)) 在你的打印和它的工作。我不知道您决定检查图像是否已加载的最佳方法。您可以使用while循环，每隔200毫秒左右检查一次要加载的图像。
下面是我用谷歌随机图片测试的一个例子。

<html>
<head>
    <title>Online Test</title>
</head>
<body>
    <div style="padding: 10px 0;">
        <h1>Online Test</h1>
    </div>
    <!--Data entry section.-->
    <div id="container_data_entry">
         <h2 id="subject"><b>Subject - Computer Science</b></h2> <br />

        <div id="container" style="width:100%;overflow:auto;">
            <ul>
                <li><b>Q No. 1:</b>Question one?</li>
                <li><textarea id="a1"></textarea></li>
            </ul>
            <ul>
                <li><b>Q No. 2:</b>Question two?</li>
                <li><textarea id="a2"></textarea></li>
            </ul>
            <ul>
                <li><b>Q No. 3:</b> Question three?</li>
                <li><textarea id="a3"></textarea></li>
            </ul>
        </div>
        <div style="text-align:center;">
            <input type="button" style="" value="Print to PDF" id="btPrint" onclick="onlineTestApp.printPage();" />
        </div>
    </div>
</body>
<script>
    let onlineTestApp = new function () {
        //ADDED ASYNC ⬇
        this.printPage = async function () {
            let style = "<style>";
            style = style + "h1, h2 {text-align:center; font:22px Times New Roman; font-weight:bold;}";
            style = style + ".answers {font:18px Calibri; padding:10px 0;}";
            style = style + "</style>";
            //ADDED TEST LOGO ⬇
            let testLogo = "https://logodix.com/logo/1961524.png";
            let header ='<img src="'+testLogo+'" width="100px" height="100px"/>' +
            '<h1>School Name</h1>' + '<h2>Online Test</h2>';
            let theBody = '';
            // get all textarea (anwsers).
            let ele_tArea = document.getElementsByTagName('textarea');
            for (let i = 0; i <= ele_tArea.length - 1; i++) {
                if (theBody === '') {
                    if (ele_tArea[i].value != '') {
                        theBody = '<p class="answers"> <b>Answer ' + (i + 1) + '</b> - ' + ele_tArea[i].value + '</p>';
                    }
                }
                else {
                    if (ele_tArea[i].value != '') {
                        theBody = theBody + '<p class="answers"> <b>Answer ' + (i + 1) + '</b> - ' + ele_tArea[i].value + '</p>';
                    }
                }
            }
            theBody = header + theBody;
            // Create window object and print the data.
            let  newWin = window.open('', '', '');

            newWin.document.write(style);
            newWin.document.write(theBody);
            //ADDED await setTimeout ⬇
            await new Promise(r => setTimeout(r, 2000));
            newWin.print();
            newWin.close();
        }
    }
</script>
</html>

赞(0）回复(0）举报 2021-09-23

我来回答

图像未显示在javascript打印预览中

1条答案

相关问题

热门标签

最新问答