Печать отчетов

С чего начать

Установите библиотеку @diasoft/qpalette-file-viewer следующей командой:

npm i @diasoft/qpalette-file-viewer

Чтобы сделать библиотеку pdf.js доступной для приложения, добавьте в assets вашегоangular.jsonв разделprojects.[project-name].architect.buildследующее:

{
  "options": {
    {
      "assets": [
        {
          "glob": "pdf.worker.js",
          "input": "node_modules/pdfjs-dist/legacy/build/",
          "output": "assets/pdfjs-dist"
        }
      ],
      ...
    }
    ...
  },
  ...
}

Подключите модуль

import { QFileViewerModule } from '@diasoft/qpalette-file-viewer';

Встройте компонент с помощью тэга q-file-viewer.

<q-file-viewer></q-file-viewer>

Пропы pdf, rtf, excel

В них необходимо передать ссылки на файлы, каждая пропа добавляет кнопку для скачивания файла в определенном формате

<q-file-viewer
  pdf="assets/test_pdf.pdf"
  rtf="assets/test_rtf.rtf"
  excel="assets/text_xls.xls"
></q-file-viewer>

Пропы name и fileName

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

<q-file-viewer
  pdf="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
  name="Тестовый отчет"
  fileName="test_report"
></q-file-viewer>

Пропа workerPath

В пропу workerPath можно передать ссылку на pdf.worker.js, если вы решили разместить его в другой части вашего приложения, а не в ассетах. Кроме того, пропу можно использовать для локальной разработки с отображением вашего приложения через "Конфигурирование динамического меню"

<q-file-viewer
  pdf="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
  workerPath="http://localhost:4200/assets/pdfjs-dist/pdf.worker.js"
></q-file-viewer>

Пропы showViewButton, showLoadButton и showPrintButton

Эти пропы отвечают за то, какие клавиши управления будут видны изначально. По умолчанию showButtonView - true, а showButtonLoad и showButtonPrint - false. Если в компонент передано несколько файлов, то у кнопки скачивания появляется меню с выбором нужного расширения (pdf/rtf/excel)

<q-file-viewer
  pdf="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
  showLoadButton="true"
  showPrintButton="true"
  name="Тестовый отчет"
  fileName="test_report"
></q-file-viewer>

Метод print

Это метод самого компонента печати, использование описано в блоке TS ниже.

<button pButton label="Печать все" (click)="printAll()" color="outline"></button>
<q-file-viewer pdf="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"></q-file-viewer>
<q-file-viewer pdf="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"></q-file-viewer>

Эвент viewerClose

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

<q-file-viewer
  pdf="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
  (viewerClose)="makeSomething()"
></q-file-viewer>

Проброска элементов управления

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

Сервис QReportsService

Также библиотека @diasoft/qpalette-file-viewer содержит в себе сервис для получения данных из сервисов mdpauth, mdpreports и mdpfilestorage

Подключение

import { QFileViewerModule, QReportsService } from '@diasoft/qpalette-file-viewer';
 
@NgModule({
  imports: [
    ...
    QFileViewerModule.forRoot({ baseUrl }),
    ...
  ],
  providers: [QReportsService]
})

Обратите внимание, что при использовании сервиса QReportsService в подключаемый модуль QFileViewerModule необходимо передать строку baseUrl. Подробнее о строке baseUrl можно почитать в документации к библиотеке QUrlService.

Использование

Использоваться может для получения токенов из mdpauth для определенного пользователя, отчетов в mdpreports и файлов в mdpfilestorage

const usr = {username: 'user', password: 'password'};
this.rs.getToken(usr).subscribe(dataToken => {
  this.token = dataToken.access_token;
})

Dashboard Permissions