Save PDF files to AWS S3

The TypeScript PDF Viewer component supports saving PDF files to AWS S3 using either the standalone or server-backed configuration. The following steps demonstrate both approaches.

Using Standalone PDF Viewer

To save a PDF file to AWS S3, you can follow the steps below:

Step 1: Create a PDF Viewer sample in TypeScript

Follow the instructions provided in this link to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application.

Step 2: Modify the src/app/app.ts file in the Angular project

  1. Import the required namespaces at the top of the file:
import * as AWS from 'aws-sdk';
  1. Configure the AWS SDK with the region, access key, and secret access key. This enables the application to interact with AWS services such as S3.

NOTE

Replace Your Region with the actual Region of your AWS S3 account and Your Access Key with the actual Access Key of your AWS S3 account and Your Security Access Key with the actual Security Access Key of your AWS S3 account.

AWS.config.update({
  region: '**Your Region**', // Update this your region
  accessKeyId: '*Your Access Key*', // Update this with your access key id
  secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
});
  1. Configure a custom toolbar item for the download function to save a PDF file to AWS S3.
let toolItem1: CustomToolbarItemModel = {
    prefixIcon: 'e-icons e-pv-download-document-icon',
    id: 'download_pdf',
    tooltipText: 'Download file',
    align: 'right'
};

pdfviewer.toolbarSettings = { toolbarItems: [ 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}

pdfviewer.toolbarClick = function (args) {
    if (args.item && args.item.id === 'download_pdf') {
        saveDocument();
    }
};
  1. Retrieve the PDF Viewer instance, save the current PDF as a Blob, read it using FileReader to get an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method.

NOTE

Replace Your Bucket Name with the actual Bucket name of your AWS S3 account and Your Key with the actual File Key of your AWS S3 account.

let s3 = new AWS.S3();

function saveDocument() {
  pdfviewer.saveAsBlob().then((value: Blob) => {
    const reader = new FileReader();
    reader.onload = () => {
      const uint8Array = new Uint8Array(reader.result as ArrayBuffer);
      const putObjectParams = {
        Bucket: '**Your Bucket Name**',
        Key: '**Your Key**',
        Body: uint8Array,
        ContentType: 'application/pdf',
      };
      s3.putObject(putObjectParams, (err, data) => {
        if (err) {
          console.error('Error uploading document:', err);
        } else {
          console.log('Document uploaded successfully:', data);
        }
      });
    };
    reader.readAsArrayBuffer(value);
  });
}

NOTE

Install the aws-sdk package in the application to use the previous code example: npm install aws-sdk

View sample in GitHub.

Using server-backed PDF Viewer

To save a PDF file to AWS S3, you can follow the steps below:

Step 1: Create a PDF Viewer sample in TypeScript

Follow the instructions provided in this link to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application.

Step 2: Modify the PdfViewerController.cs file in the web service project

  1. Create a web service project in .NET Core 3.0 or later. For instructions, see this article: https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above

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

  3. Import the required namespaces at the top of the file:

using System.IO;
using Amazon;
using Amazon.S3;
using Amazon.S3.Model;
  1. Add the following private fields and constructor parameters to the PdfViewerController class, In the constructor, assign the values from the configuration to the corresponding fields
private IConfiguration _configuration;
public readonly string _accessKey;
public readonly string _secretKey;
public readonly string _bucketName;

public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
  _hostingEnvironment = hostingEnvironment;
  _cache = cache;
  _configuration = configuration;
  _accessKey = _configuration.GetValue<string>("AccessKey");
  _secretKey = _configuration.GetValue<string>("SecretKey");
  _bucketName = _configuration.GetValue<string>("BucketName");
}
  1. Modify the Download() method to save the downloaded PDF file to the AWS S3 bucket.
[HttpPost("Download")]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
[Route("[controller]/Download")]
//Post action for downloading the PDF documents

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);
  RegionEndpoint bucketRegion = RegionEndpoint.USEast1;

  // Configure the AWS SDK with your access credentials and other settings
  var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion);
  string bucketName = _bucketName;
  string documentName = jsonObject["documentId"];
  string result = Path.GetFileNameWithoutExtension(documentName);
  byte[] bytes = Convert.FromBase64String(documentBase.Split(",")[1]);
  using (MemoryStream stream = new MemoryStream(bytes))
  {
    var request = new PutObjectRequest
    {
      BucketName = bucketName,
      Key = result + "_downloaded.pdf",
      InputStream = stream,
    };
    // Upload the PDF document to AWS S3
    var response = s3Client.PutObjectAsync(request).Result;
  }
  return Content(documentBase);
}
  1. Open the appsettings.json file in the web service project and add the following lines below the existing "AllowedHosts" configuration.
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "AccessKey": "Your Access Key from AWS S3",
  "SecretKey": "Your Secret Key from AWS S3",
  "BucketName": "Your Bucket name from AWS S3"
}

NOTE

Replace the placeholders with the actual AWS access key, secret key, and bucket name.

Step 3: Set the PDF Viewer properties in the TypeScript PDF Viewer component

Modify the serviceUrl property of the PDF Viewer component with the accurate URL of the web service, replacing https://localhost:44396/pdfviewer with the actual server URL. Set the documentPath property to the desired PDF file name to load from AWS S3, and ensure that the document exists in the target bucket.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
         BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
                  BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
// Replace the "localhost:44396" with the actual URL of your server
viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('PDF_Succinctly.pdf', null);

NOTE

Install the AWSSDK.S3 NuGet package in the web service application to use the previous code example.

View sample in GitHub