Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Coupon Page</title>

    <script type="text/javascript">
        function printCoupon() {
            var timeout = 1000;

            self.focus();
            window.print();
            setTimeout("self.close()", timeout);;
            self.focus();
        }
    </script>

</head>

<body onload="printCoupon();">

    <p><img src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
    AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
    </p>

</body>

</html>

我搜索了html编码，只有在点击图像（w585 w250），图像的实际尺寸或相关按钮时才能打印网页图像。我发现编码效果很好但打印出的图像真的没有焦点。您展示的编码通过陈述焦点等来解决这个问题，我已经为此工作了将近一个月没有成功，请帮忙

Answer 1

您可以在css中尝试媒体查询来打印图像。

Answer 2

检查naturalWidth和naturalHeight并与图片width和height进行比较，如果它们匹配print页面。

function printCoupon() {
  var timeout = 1000;

  var naturalWidth = $('#img')[0].naturalWidth;
  var naturalHeight = $('#img')[0].naturalHeight;

  var width = $('#img').width()
  var height = $('#img').height();

  if (naturalWidth == width && naturalHeight == height) {

    self.focus();
    window.print();
    setTimeout("self.close()", timeout);;
    self.focus();
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<body onload="printCoupon();">

  <p><img id="img" src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
  </p>

需要html代码才能打印网页图像，重点关注

2 个答案: