在按钮上单击使用 JavaScript、角度或节点 JS 在热敏打印机上打印答案

【问题标题】：On button click print on Thermal Printer using JavaScript, angular or Node JS在按钮上单击使用 JavaScript、角度或节点 JS 在热敏打印机上打印
【发布时间】：2021-10-28 09:46:53
【问题描述】：

我在 NodeJS API 上创建了，我在 Angular 应用程序中单击按钮时调用它。

想要通过热敏打印机点击按钮打印购买收据。没有任何 PDF 保存或打印对话框弹出，应该直接打印。

我尝试了这个 nodeJS 代码，但看起来它适用于桌面应用程序而不是 web。我在不同的代码库 repo 中有 UI 和 BE 代码。

我试试这个代码：

'use strict';
const { PosPrinter } = require("electron-pos-printer");
class SeriesPrinter {
  constructor() { }
  printSr() {
    console.log("Inside print function");
    const print_data = [
      { type: 'text', value: 'Sample text', style: 'text-align:center;font-weight: bold' },
      { type: 'text', value: 'Another text', style: 'color: #fff' },
    ];

// returns promise<any>
PosPrinter.print(print_data, {
  printerName: 'POS-80C',
  preview: false,
  width: '170px',               //  width of content body
  margin: '0 0 0 0',            // margin of content body
  copies: 1,                   // The number of copies to print
})
  .then(() => {
    // some code ...
  })
  .catch((error) => {
    console.error(error);
  });
  }
}
module.exports = SeriesPrinter;

它抛出一个错误：

Inside print function
TypeError: BrowserWindow is not a constructor
    \node_modules\electron-pos-printer\dist\post-printer.js:87:30
    at new Promise (<anonymous>)
    \node_modules\electron-pos-p

解决这个问题或任何其他解决方案的任何想法（UI 端或 nodeJS 端都可以，它应该静默打印）

【问题讨论】：

我怀疑是否可以在未经用户许可的情况下打印，即某种弹出窗口。
根据electron-pos-printer的the README，它需要电子。如果您不熟悉 electron，它是一个用于桌面应用程序的 node.js 框架，它期望某些文件存在。您可以在github.com/fssonca/electron-printer 处查看自述文件链接到的示例电子应用程序。您可能可以通过向示例应用添加 API 服务器来获得所需的功能，但它可能有点笨重。
@sandip，仅使用require("electron-pos-printer") 并不意味着您将 node.js 应用程序作为电子应用程序运行。相反，它是一个期望在电子环境中运行的库。您的错误表明它无法获取electron 的BrowserWindow 实例。你可以看到它被添加到哪里here
构建一个与热敏打印机接口的桌面 nodejs 服务器，并在 localhost 上公开一个 API，可以通过您的网页访问。
@sandip @steve 试图告诉我们的是正确的。您为此使用了错误的库。你导入了electron-pos-printer ，里面有electron这个词，所以这意味着它只能被电子应用程序使用。删除 electron-pos-printer 并尝试其他库，如 ESCPOS 或 node-thermal-printer。我认为直接从 Angular 是不可能的，所以你需要专注于后端并从那里开始。

标签： javascript node.js angular thermal-printer

【解决方案1】：

您收到 TypeError: BrowserWindow is not a constructor 因为您在非电子环境（浏览器）中使用它。

既然你提到了 Angular，我会怎么做：

我将有一个服务将我要打印的数据发送到呈现数据的组件（实际上是使用来自服务器的数据制作可视文档），然后是 window.print()。

服务如下所示：

export class PrintService {
      isPrinting = false;
    
      constructor(private router: Router) { }
    
      printDocument(documentName: string, documentData: string[]) {
        this.isPrinting = true;
        this.router.navigate(['/',
          { outlets: {
            'print': ['print', documentName, documentData.join()]
          }}]);
      }
    
      onDataReady() {
        setTimeout(() => {
          window.print();
          this.isPrinting = false;
          this.router.navigate([{ outlets: { print: null }}]);
        });
      }
    }

你可以将它用在像 InvoiceComponent 这样的组件中：

ngOnInit() {
  this.invoiceDetails = this.invoiceIds
    .map(id => this.getInvoiceDetails(id));
  Promise.all(this.invoiceDetails)
    .then(() => this.printService.onDataReady());
}

如果你不想做花哨的事情，你可以保持简单并列出您要打印的内容，然后调用 window.print() 组件：

在 HTML 中

<button (click)="onPrint()">Print</button>

在 TS 中

onPrint(){
    window.print();
}

您还可以使用打开/写入/关闭弹出方法：

HTML

<div id="printSectionId" >
.......
    <button (click)="printToCart('printSectionId')" class="button">Print</button>
...
</div>

export class Component{          
constructor(){}
       printToCart(printSectionId: string){
        let popupWinindow
        let innerContents = document.getElementById(printSectionId).innerHTML;
        popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWinindow.document.open();
        popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
        popupWinindow.document.close();
  }

 }

【讨论】：

感谢您添加分享您的想法，在所有 3 种情况下，它都会打开打印弹出窗口而不是自动关闭它，它应该静默打印，没有弹出窗口。