Add header values in the Angular PDF Viewer

13 Feb 20262 minutes to read

Use the ajaxHeaders property in the PDF Viewer’s ajaxRequestSettings to include custom headers with each AJAX request.

Example: Add a custom Authorization header using ajaxRequestSettings in an Angular component

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import {
  PdfViewerComponent,
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  AnnotationService,
  FormFieldsService,
  FormDesignerService,
  PageOrganizerService,
  PdfViewerModule,
} from '@syncfusion/ej2-angular-pdfviewer';

/**
 * Default PdfViewer Controller
 */
@Component({
  selector: 'app-root',
  templateUrl: 'app.html',
  encapsulation: ViewEncapsulation.None,
  // tslint:disable-next-line:max-line-length
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    AnnotationService,
    FormFieldsService,
    FormDesignerService,
    PageOrganizerService,
  ],
  styleUrls: ['app.css'],
  standalone: true,
  imports: [PdfViewerModule],
})
export class AppComponent {
  @ViewChild('pdfviewer')
  public pdfviewerControl: PdfViewerComponent;
  public serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
    public ajaxRequestSettings: any = {
      ajaxHeaders: [
        {
          headerName: 'Authorization',
          headerValue: 'Bearer 64565dfgfdsjweiuvbiuyhiueygf'
        }
      ],
      withCredentials: false
    };
  ngOnInit(): void {
    // ngOnInit function
  }
}

See the sample how to add custom headers in AjaxRequestSettings