Saving PDF file in Angular PDF Viewer component

11 Feb 20264 minutes to read

After annotating a PDF with the viewer’s annotation tools, save the updated file to a server, database, or local file system so changes persist.

Save PDF file to Server

To save a modified PDF to a server, follow these steps.

Step 1: Create a Simple PDF Viewer Sample in Angular

Follow the getting-started guide at Link to create a basic Angular PDF viewer sample. This provides the client-side setup for annotation and saving.

Step 2: Modify the PdfViewerController.cs File in the Web Service Project

1. Create a web service project in .NET Core 3.0 or above. See this for a reference implementation.

2. Open the PdfViewerController.cs file in the web service project.

3. Modify the Download() method to open it in the viewer using URL

public IActionResult Download([FromBody] Dictionary<string, string> jsonObject)
{
  //Initialize the PDF Viewer object with memory cache object
  PdfRenderer pdfviewer = new PdfRenderer(_cache);
  string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
  MemoryStream stream = new MemoryStream();

  string documentName = jsonObject["document"];
  string result = Path.GetFileNameWithoutExtension(documentName);
  string fileName = result + "_downloaded.pdf";

  // Save the file on the server
  string serverFilePath = @"Path to where you need to save your file in the server";

  string filePath = Path.Combine(serverFilePath, fileName);

  using (FileStream fileStream = new FileStream(filePath, FileMode.Create))
  {
    //Saving the new file in root path of application
    stream.CopyTo(fileStream);
    fileStream.Close();
  }
  return Content(documentBase);
}

Step 3: Set the PDF Viewer Properties in Angular PDF viewer component

Modify the serviceUrl property of the PDF viewer component with the accurate URL of your web service project, replacing https://localhost:44396/pdfviewer with the actual URL of your server.Modify the documentPath with the correct PDF Document URL want to load.

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

@Component({
  selector: 'app-container',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                  <ejs-pdfviewer id="pdfViewer"
                                [serviceUrl]='service'
                                [documentPath]='documentPath'
                                style="height:640px;display:block">
                  </ejs-pdfviewer>
            </div>`,
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService,
               ToolbarService, NavigationService, AnnotationService, TextSearchService,
                TextSelectionService, PrintService, FormDesignerService, FormFieldsService]
   })
  export class AppComponent implements OnInit {
    // Replace the "localhost:44396" with the actual URL of your server
    public service = 'https://localhost:44396/pdfviewer';
    // Replace correct PDF Document URL want to load
    public documentPath="PDF_Succinctly.pdf"
  }

View sample in GitHub

Download PDF file as a copy

In the built-in toolbar, you have an option to download the updated PDF to the local file system, you can use it to download the PDF file.

<button (click)="downloadClicked()">Download</button>

downloadClicked() {
  var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
  viewer.download();
}