В данной статье мы поработаем с печатью в 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-section. Также мы указываем своё описание для заголовка при помощи параметра printTitle.
Стиль я добавил для того, чтобы на примере его описать работу с ними. Используемый параметр [useExistingCss]="true" говорит о том, что необходимо использовать стили, заданные в блоке print-section. Если его не указать, то указанные стили просто не отобразятся на странице печати. Также можно указать стили напрямую в параметре printStyle или указать путь к файлу со стилями в параметре styleSheetFile.
Дополнительные подробности по ссылке.
Загрузка...