2

HTML と CSS を使用して名刺を印刷しようとしています。ユーザーはブラウザを使用して印刷できます。

A4サイズで印刷すれば問題ありません。カード用紙 (cr80 3in x 2in) に印刷すると、何も印刷されません。

機能させるにはどうすればよいですか？

印刷プレビューのスクリーンショット

これは印刷のプレビューです。フレームにはqrコードとラベルが入ります。

コードは次のとおりです。イメージ src は後で ajax でロードされます。

<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(function(){
    function printMe() {
      window.print()
    }
    $("#badge").click(function(){
      printMe();
    });
});
</script>

<title>Badge</title>
<style type="text/css">

  @media print {
    .page-break  { display: block; page-break-before: always; }
  }
  *{
    margin:0px;
    padding:0px;
  }
  #details{
    position:relative;
    top:0.8in;
    height: 1.1in;
    width:100%;
    overflow:hidden;
  }
  #badge{
    width:3in;
    height:2in;
    border:1px solid gray;
    //background-image:url("badge-background.png");
  }
  #qr_code {
    margin-top:2px;
    float:left;
    height:1.1in;
    width: 1.1in;
  }
  #text{
    float:right;
    margin:0 auto;
    width:180px;
  }
  #first_name{
    position:relative;
    top:0.3in;
    font-size:0.4in;
  }
</style>
</head>
<body>
    <div id="badge" class="page-break">
      <div id="details">
        <div id="qr_code"><img src="" id="qr_code_image" width="105" heigth="105"/></div>
        <div id="text"><span id="first_name"></span></div>
      </div>
    </div>

</body>
</html>
4

0 に答える 0