如何提升从浏览器打印至Epson LQ-310针式打印机的打印质量

核心原因 #

Chrome默认会把网页转成PDF再打印，这个过程会将文本转成矢量图形，而针式打印机依赖点阵字体渲染，两者不兼容就会导致打印模糊、笔画重叠。下面是针对性的解决办法：

1. 强制使用针式打印机原生点阵字体 #

针式打印机对等宽点阵字体支持最好，直接修改CSS里的字体设置，优先用打印机自带字体或通用的等宽字体：

#invoice-POS {
  /* 优先指定打印机原生字体，fallback到通用等宽字体 */
  font-family: "EPSON LQ-310", "Courier New", monospace;
  width: 90mm;
}

@media print {
  /* 打印样式里同步修改字体 */
  .page-break {
    display: block;
    page-break-before: always;
    size: 210mm 297mm;
    font-family: "EPSON LQ-310", "Courier New", monospace;
    font-size: 24pt;
  }
  /* 其他打印样式保持不变 */
}

monospace类字体是等宽设计，打印机能直接用点阵渲染，不会被Chrome转成平滑矢量。

2. 绕过Chrome的PDF转换，用系统打印对话框 #

Chrome的PDF渲染是质量差的关键，直接用系统原生打印驱动处理：

• 打印预览时，点击更多设置，找到高级选项，勾选「使用系统对话框打印」；
• 或者永久设置：在Chrome地址栏输入chrome://flags/#print-preview-use-system-dialog，将选项设为「Enabled」，重启Chrome后默认用系统打印框。

3. 调整打印机属性优化 #

打开系统打印对话框后，进入Epson LQ-310的属性设置：

• 打印质量选「草稿」或「文本模式」，关闭高质量/照片模式；
• 纸张类型设为「普通纸」，匹配你用的打印纸；
• 关闭「图形平滑」「优化打印」这类选项，强制打印机用点阵模式打印文本；
• 字符集选择打印机支持的编码（比如GB2312或UTF-8）。

4. 简化HTML/CSS，避免复杂样式 #

针式打印机不适合复杂样式，精简后能提升打印效果：

• 把粗边框（比如2px solid）改成1px solid black，粗线容易打印模糊；
• 去掉font-weight: bolder，改用font-weight: bold或normal，点阵字体加粗易导致笔画重叠；
• 字体大小不要小于8pt，尽量用pt单位保持一致性。

5. 直接打印纯文本（终极方案） #

如果以上方法都不行，直接生成纯文本打印，完全绕过Chrome的PDF转换：
替换原页面的打印脚本和按钮：

function printReceipt() {
  var receiptContent = `Techs Inc
street city
Mysore

Sl NO  Item Name    Qty  Price  Amount
1      Product No2  1    500.00 500.00
2      Product 1    1    500.00 500.00
3      Product 1    1    500.00 500.00
4      Product 1    1    500.00 500.00

Total Qty: 4                Total: 2500.00`;
  
  var printWindow = window.open('', 'Receipt', 'height=400,width=600');
  printWindow.document.write(`<html>
<head>
<title>Receipt</title>
<style>
body { font-family: "Courier New", monospace; white-space: pre; padding: 10px; }
</style>
</head>
<body>${receiptContent}</body></html>`);
  
  printWindow.document.close();
  printWindow.onload = function() {
    printWindow.focus();
    printWindow.print();
    printWindow.close();
  };
}

然后把按钮改成：

<button class="noprint" onclick="printReceipt()">Click Here to Print</button>

纯文本模式下，针式打印机能完美渲染出清晰的点阵字符。

内容的提问来源于stack exchange，提问作者gopal