php - 身份证打印 85.60mm X 53.98mm

Question

我正在用 PHP 设置横向和纵向模式的 ID 卡打印软件。问题是 print() 命令总是采用标准页面大小 A4、A3... 因此它会在卡片的特定部分打印 id。

任何人都可以帮助或推荐一些东西吗？也许还有另一种方法可以在没有 chrome 打印预览的情况下打印它？

    <style>
        @page {
          /*size: A5;
          margin: 5px;*/
          width: 53.98mm;
          height: 85.60mm;
          margin: 0px;
        }
        @media print {
          html, body {
            /*width: 210mm;
            height: 297mm;*/
            /*width: 218mm;
            height: 340mm;*/
          }
        }
        #printablediv {
          width: 53.98mm;
          height: 85.60mm;
        }
        .idcardreport {
            font-family: arial;    
             -webkit-print-color-adjust: exact;
        }
        /*IDcard Front Part Css Code*/
        .idcardreport-frontend{
            margin: 2px;
            float: left;
            border: 1px solid #000;
            padding: 10px;
            width: 260px;
            text-align: center;
            height:370px;
            background-size: 100% 100% !important;
        }

        .logo img{
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            margin-bottom: 5px;
        }

        .pick img{
            width: 60px;
            height: 80px;
            border: 1px solid #ddd;
            margin-bottom: 5px;
        }

        .signe img{
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            margin-bottom: 5px;
        }

        h3 {
            font-size: 14px;
            color: #1A2229;
            text-align: center;
        }
        h2 {
            font-size: 10px;
            color: #1A2229;
            text-align: center;
        }
        h1 {
            font-size: 18px;
            color: #1A2229;
            text-align: center;
        }
        p {
            text-align: left;
            font-size: 12px;
            margin-bottom: 0px;
            margin-top: 1px;
            color: #1A2229;
        }
        .vertical{
            writing-mode:tb-rl;
            -webkit-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform:rotate(180deg);
            transform: rotate(180deg);
            white-space:nowrap;
            display:block;
            bottom:0;

        }
    </style>

Answer 1

    <style>
    @media print {
      body * {
        visibility: hidden;
      }
      #section-to-print, #section-to-print * {
        visibility: visible;
      }
      #section-to-print {
        position: absolute;
        left: 0px;
        /*right: -400px;*/
        top: 0;
      }
    }
    button.btn.btn-dark {
        padding: 10px;
        position: relative;
        top: -390px;
    }
</style>


<button type="button" class="btn btn-dark" onclick="window.print()"><i class="fa fa-print"></i> Print</button>


<div class="wrapper" id="section-to-print"></div>  //add ID on the section u want to print