qz не определен qz_tray

Question

qz не определен qz_tray

Я искал решение для печати из Интернета на стороне клиента, это ( https://medium.com/@yehandjoe/angular-2-raw-printing-service-56614d358754) то, что я следовал, предлагает использовать qz лоток для доступа к принтеру. Я скопировал код как есть, но он не работает.

всякий раз, когда функция getprinters() выполняется, она говорит: "qz не определен"

я импортировал пакеты, используя эти команды npm

npm установить qz-tray sha ws

npm install rsvp, это мой сервисный код принтера:

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';


declare var qz: any;
@Injectable()
export class PrinterService {
constructor() { }

errorHandler(error: any): Observable<any> {
    return Observable.throw(error);
}

// Get list of printers connected
getPrinters(): Observable<string[]> {
    return Observable
        .fromPromise(qz.websocket.connect().then(() => qz.printers.find()))
        .map((printers: string[]) => printers)
        .catch(this.errorHandler);
}

// Get the SPECIFIC connected printer
getPrinter(printerName: string): Observable<string> {
    return Observable
        .fromPromise(qz.websocket.connect().then(() => qz.printers.find(printerName)))
        .map((printer: string) => printer)
        .catch(this.errorHandler);
}

// Print data to chosen printer
printData(printer: string, data: any): Observable<any> {
    // Create a default config for the found printer
    const config = qz.configs.create(printer);
    return Observable.fromPromise(qz.print(config, data))
        .map((anything: any) => anything)
        .catch(this.errorHandler);
}

// Disconnect QZ Tray from the browser
removePrinter(): void {
    qz.websocket.disconnect();
}

}

Пожалуйста, исправьте, если я делаю какую-либо ошибку, или я был бы очень признателен за любое другое альтернативное решение

4

typescript angular2-services zebra-printers qz-tray

Источник

user6741514 10 янв '18 в 06:26

2 ответа

Другие вопросы по тегам typescript angular2-services zebra-printers qz-tray

user3527807 23 апр '18 в 19:22 2018-04-23 19:22 · Answer 1 · 2018-04-23 19:22

Похоже, вам нужно импортировать qz tray своему провайдеру.

Я использовал SHA.js: https://www.npmjs.com/package/sha.js для шифрования и использовал собственные обещания.

Поэтому я добавил следующие строки в начало файла под существующим импортом:

import * as shajs from 'sha.js';
import * as qz from 'qz-tray';

Установить SHA для QZ

Не забудьте сказать QZ использовать новый пакет sha.js с этим:

qz.api.setSha256Type(function (data) {
    return shajs('sha256').update(data).digest('hex')
});

Установить собственные обещания для QZ

Не забудьте сказать QZ использовать новый пакет sha.js с этим:

qz.api.setPromiseType(function (resolver) {
    return new Promise(resolver);
});

user5170898 09 мар '19 в 14:45 2019-03-09 14:45 · Answer 2 · 2019-03-09 14:45

Мне также нужно было использовать этот сервис QZ, он выглядит как единственный способ связи с принтером из приложения javascript.

В любом случае, благодаря ответу выше и некоторым статьям, мне удалось создать небольшое угловое приложение, которое легко подключается к принтеру.

Мне хотелось поделиться этим кодом на тот случай, если кому-то придется пойти на тот же процесс. и похоже, что это единственный пост о QZ Tray. во-первых, вы должны установить необходимые зависимости, выполнив:

npm install qz-tray js-sha256 rsvp --save

во-вторых, вы должны создать сервис печати, вот его код:

import { Injectable } from '@angular/core';
import { from as fromPromise, Observable, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';

import * as qz from 'qz-tray';
import { sha256 } from 'js-sha256';

@Injectable({
  providedIn: 'root'
})
export class PrinterService {

  //npm install qz-tray js-sha256 rsvp --save
  constructor() {
    qz.api.setSha256Type(data => sha256(data));
    qz.api.setPromiseType(resolver => new Promise(resolver));
  }
  // Get the list of printers connected
  getPrinters(): Observable<string[]> {
    console.log('+++++++++PrinterService+++++');
    return fromPromise(
      qz.websocket.connect().then(() => qz.printers.find())
    )
    map((printers: string[]) => printers)
      , catchError(this.errorHandler);
  }

  // Get the SPECIFIC connected printer
  getPrinter(printerName: string): Observable<string> {
    return fromPromise(
      qz.websocket.connect()
        .then(() => qz.printers.find(printerName))
    )
    map((printer: string) => printer)
      , catchError(this.errorHandler);
  }

  // Print data to chosen printer
  printData(printer: string, data: any): Observable<any> {
    const config = qz.configs.create(printer);

    return fromPromise(qz.print(config, data))
    map((anything: any) => anything)
      , catchError(this.errorHandler);
  }

  private errorHandler(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.log(error.error);
      console.log('An error occurred:', error.status);
      return throwError(error.error);
    } else {
      console.log('An error occurred:', error.status);
      console.log(error.error);
      return throwError(error.error);
    }
  };
}

наконец, вам нужно просто вызвать службу из какого-либо компонента и выполнить функции, в этом случае я использовал компонент приложения:

import { Component } from '@angular/core';
import { PrinterService } from './printer.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'qz-tray-example';
  printers: string[];

  constructor(public _printerService: PrinterService) {

  }

  ngOnInit() {
    this.printers = [];
    console.log('AppComponent____________');
    this._printerService.getPrinters().subscribe(
      data => {
        console.log(data);
        // this.printers = data;
        this.print();
      },
      err => {
        console.log(err);
      }
    );
  }

  print() {



    let content1 = `
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        </head>

        <body>
            <div> 
                <h3>Printing Test 1</h3>
            </div>
        </body>
    </html>`;

    let content2 = `
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        </head>

        <body>
            <div> 
                <h3>Printing Test 2</h3>
            </div>
        </body>
    </html>`;
    var data = [{
      type: 'html',
      format: 'plain', // or 'plain' if the data is raw HTML
      data: content1
    },
    {
      type: 'html',
      format: 'plain', // or 'plain' if the data is raw HTML
      data: content2
    }];
    data[0].data = content1;
    this._printerService.printData('zebra', data).subscribe(
      data => {
        console.log('ok print');
      },
      err => {
        console.log(err);
      }
    );
  }
}

надеюсь, что этот ответ поможет кому-то начать работу со своим приложением, удачи;).

user9178709 10 янв '18 в 06:44 2018-01-10 06:44 · Answer 3 · 2018-01-10 06:44

Попробуйте объявить это в конструкторе или перед ним, вы переменная до объявления класса обслуживания, он не видит переменную

0

Источник

user9178709 10 янв '18 в 06:44