0

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

这是我预期的发票格式

              我的咖啡馆

     项目 1 10 美元
     项目 2 5 美元
     -------------------------
                 总计：15 美元
                   增值税：2 美元

这是我的代码

    <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;
    }
}
4

1 回答 1

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;
    }
}

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

于 2020-08-30T12:36:40.150 回答