我正在尝试将数据打印到预先格式化的文档中。学生将在文本区域回答问题，当点击打印到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>
在加载图像之前调用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>