Отображение штрих-кода любого типа в PDF. Создание документа. Определение в Angular 8. - PullRequest
0 голосов
/ 31 марта 2020

Я пытаюсь отобразить штрих-код в ярлыке / отчете об отправке.

Я использовал библиотеку PDFMake Angular для создания PDF на стороне клиента. Все работает нормально, кроме штрих-кода. Я могу сгенерировать QR-код, но для клиента требуется только штрих-коды для различной информации о ярлыке доставки / отчетах.

На веб-странице я могу динамически генерировать штрих-код, используя библиотеку ngx-barcode, но не в PDF. Я разработал всю этикетку доставки с помощью библиотеки PDFMake.

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

Component.ts

 printShippingLabel() {
this.pdfmake.documentDefinition = {
  footer: function (currentPage, pageCount) {
    return [
      { text: currentPage.toString() + ' of ' + pageCount, fontSize: 7, }
    ]
  },
  header: function (currentPage, pageCount, pageSize) {
    // you can apply any logic and return any valid pdfmake element
    return [
      { text: 'Printed On: ' + new Date().toDateString(), fontSize: 7, alignment: (currentPage % 2) ? 'left' : 'right' },
      { canvas: [{ type: 'rect', x: 170, y: 32, w: pageSize.width - 170, h: 40 }] }
    ]
  },
  content: [
    {
      table: {
        widths: ['*', '*'],
        headerRows: 1,
        // keepWithHeaderRows: 1,
        body: [
          [{
            text: 'Shipping Label',
            style: 'tableHeader',
            colSpan: 2,
            fontSize: 20,
            bold: true,
            decoration: 'underline',
            alignment: 'center'
          }],
          [
            {
              text: '',
              border: [false, false, false, false]
            },
            {
              text: '',
              border: [false, false, false, false]
            }
          ]
        ]
      }
    },
    {
      text: ' ',
      style: 'header'
    },
    this.getInvoicedetails(),
    {
      text: ' ',
      style: 'header'
    },
    {
      table: {
        widths: ['*', '*'],
        headerRows: 1,
        // keepWithHeaderRows: 1,
        body: [
          [
            {
              qr: 'ASN: ' + this.asnHeader, fit: 80, //Display barcode here inplace or QR
              alignment: 'center',
              // text: `(${this.asnHeader.asnNumber})`,
              margin: [5, 5, 5, 5],
              border: [true, true, true, true]
            },
            {
              svg: '',
              fillColor: '#cccccc',
              alignment: 'right',
              border: [true, true, true, true]
            }
          ]
        ]
      }
    },
    {
      text: ' ',
      style: 'header'
    },
    {
      text: ' ',
      style: 'header'
    },
    {
      text: ' ',
      style: 'header'
    },
    {
      text: 'Product Details',
      style: 'header',
      bold: true
    },
    this.getProductObject(),
  ]
};
this.pdfmake.print();

}

 <ngx-barcode [bc-value]="this.asnHeader.asnNumber" [bc-display-value]="true"></ngx-barcode>
...