为什么我的base64'image64'没有出现在我的打印预览(和打印的)JS内置的html文档中?

问题描述 投票:0回答:1

亲爱的, 为什么 gif 图像的“image64”base64 变量(通常由脚本(Ajax)返回到调用 Javascript 函数)不会出现在打印预览(和打印)html 文档(通常在同一 JS 函数中准备)中? Windows 11、Edge、Chrome。请参阅下面我的来源。感谢您的帮助。

<!DOCTYPE html >

<?php
    header('Content-Type: text/html; charset=utf-8');
?>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Test_3.php : Picture in confirmation document issue.</title>
    </head>
    
    <script type="text/javascript">
        function printConfo() {
            var image64 = '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';
            var doc_print = window.open("", "Confirmation");
            doc_print.document.open();
            doc_print.document.write('<!DOCTYPE html> <html lang="en-us> <head>');
            doc_print.document.write('<meta charset="utf-8" http-equiv="content-type" content="text/html" />');
            doc_print.document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
            doc_print.document.write('<title>Confirmation</title> </head>');
            doc_print.document.write('<body style="font-family:verdana; font-size:12px;" onload="self.print(); self.close();">');
            doc_print.document.write('<br /> <br /> <h4><center>CONFIRMATION</center></h4> <br />');
            doc_print.document.write('<center> <img src="data:image/gif;base64,' + image64 + '" height="180" width="180" alt="BelgianFlag" > </center>');
            doc_print.document.write('<h1></h1> Blablabla ...');
            doc_print.document.write('</body> </html>');
            doc_print.print();
            doc_print.close();
            }
    </script>
    
    <body>
        <h2>Picture in print preview document</h2>
        <input id="submit" type="button" value=" Print confirmation " onclick="printConfo()"/>
    </body>
</html>

我只是尝试构建(在 JS 函数中)并向我的客户提出确认 html 文档。

javascript base64 print-preview
1个回答
0
投票

问题是base64图像可能很大,所以需要时间,我简化了代码并在触发打印操作之前添加了短暂的延迟。此延迟允许在打印之前正确加载图像。根据图像加载时间根据需要调整延迟值(以毫秒为单位)。这种方法可确保图像包含在打印预览中。

  • 将函数的最后两行更改为以下内容:
doc_print.document.close();

setTimeout(function() {
  doc_print.print();
  doc_print.close();
}, 1000); // Adjust the delay as needed
  • 请注意,如果您打开了
    doc_print.document
    ,那么您也需要在最后关闭。
© www.soinside.com 2019 - 2024. All rights reserved.