Angular 13.08.2019 admin No comments

Печать в Angular

В данной статье мы поработаем с печатью в Angular. Для этого нам понадобится библиотека ngx-print.

Создадим новый проект и добавим функциональность для печати:

Установка @angular/cli:

npm install @angular/cli --g
или
yarn global add @angular/cli

Создание нового проекта при помощи @angular/cli:

ng new test-app

Переход в папку с приложением:

cd test-app

Добавление библиотеки ngx-print:

npm install ngx-print
или
yarn add ngx-print

Добавление NgxPrintModule в app.module.ts в секцию imports:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxPrintModule } from 'ngx-print';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgxPrintModule,
  ],
  providers: [],
  bootstrap: [
    AppComponent,
  ]
})
export class AppModule { }

Изменение app.component.html:

<div id="print-section">
  <h1 class="header">Пример заголовка</h1>
  <p>Текст для печати</p>
</div>
<button
  ngxPrint
  printTitle="Заголовок"
  printSectionId="print-section"
  [useExistingCss]="true">Печать</button>

Изменение app.component.css:

.header {
  text-decoration: underline;
}

Скриншот страницы с приложением:

print angular page

Скриншот страницы печати:

print angular settings

В данном примере будет распечатан весь контент из блока print-section. Также мы указываем своё описание для заголовка при помощи параметра printTitle.

Стиль я добавил для того, чтобы на примере его описать работу с ними. Используемый параметр [useExistingCss]="true" говорит о том, что необходимо использовать стили, заданные в блоке print-section. Если его не указать, то указанные стили просто не отобразятся на странице печати. Также можно указать стили напрямую в параметре printStyle или указать путь к файлу со стилями в параметре styleSheetFile.

Дополнительные подробности по ссылке.


Расширение для Google Chrome для улучшения памяти от автора данного блога - Colorobrain.




1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...