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

Question

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

这是我期望的发票格式

我的CAFE项目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;
}
}

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

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