打印区域在打印 js 中无法正常工作

Question

我正在尝试使用 print js (https://printjs.crabbly.com/) 实现 POS 打印。我在 laravel 框架中使用它。它正在工作，但我无法对其使用任何 css 效果。我也试过了，但没有用。

这是我期望的发票格式

              My CAFE

     Item 1             10 USD
     Item 2              5 USD
     -------------------------
                 Total: 15 USD
                   Vat:  2 USD

这是我的代码

    <div id="printAreaInvoice" style="visibility: hidden;width: 450px;">
        <p class="address">
           My Cafe <br>
        </p>

        <p>
          <span> Item 1 </span>  <span class="price"> 10 </span>
          <span> Item 2 </span>  <span class="price"> 05 </span>
        </p>
        
        <p>
          ----------------------------------------
          <span class="price"> Total 15 </span>
        </p>
    </div>

$(document).on('click','#print_order',function () {
    printJS({
        maxWidth: 450, // the width of my paper
        printable: 'printAreaInvoice', // the id
        type: 'html',
        css: '{{ asset("Dashboard/print/print.css") }}'
    });
});

在print.css

@media print {
    #print p {
        font-size: 10pt;
    }
    #print .address{
        font-size: 10pt;
        text-align: center;
    }
    #print .price{
        font-size: 10pt;
        float: right;
    }
}

Answer 1

尝试删除 print.css 文件中每个标签前的 #print。由于 @media print.

，这些风格已经在印刷媒体中活跃起来

您的 print.css 应如下所示：

@media print{
    p{
        font-size: 10pt;
    }
    .address{
        font-size: 10pt;
        text-align: center;
    }
    .price{
        font-size: 10pt;
        float: right;
    }
}

如果 URL 到 CSS 正确，打印预览应该显示正确的样式。

打印区域在打印 js 中无法正常工作

Printing area not working properly in print js

javascript

jquery

printjs