Open PDF file from AWS S3

6 Dec 20249 minutes to read

PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3.

Using Standalone PDF Viewer

To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below

Step 1: Create AWS S3 account

Set up an AWS S3 account by following the instructions on the official AWS site: AWS Management Console. Create an S3 bucket and generate access keys while ensuring secure storage of credentials.

Step 2: Create PDF Viewer Sample in ASP.NET Core

Follow instructions provided in the Syncfusion® PDF Viewer Getting Started Guide to create a simple PDF Viewer sample in ASP.NET Core.

Step 3: Modify the ~/Pages/Shared/_Layout.cshtml File in the Project

  1. Add the required scripts using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,
<head>
    ...
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1654.0.min.js"></script>
</head>

Step 4: Modify the ~/Pages/Index.cshtml File in the Project

  1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like 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. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion® PDF Viewer then load Base64 string generated into the viewer.load 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.

loadDocument() {
    const s3 = new AWS.S3();
    const getObjectParams = {
        Bucket: '**Your Bucket Name**',
        Key: '**Your Key**',
    };
    this.s3.getObject(getObjectParams, (err, data) => {
        if (err) {
        console.error('Error fetching document:', err);
        } else {
        if (data && data.Body) {
            const bytes = new Uint8Array(data.Body as ArrayBuffer);
            let binary = '';
            bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
            const base64String = window.btoa(binary);
            console.log('Document data as Base64:', base64String);
            var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];  
            setTimeout(() => {
            viewer.load("data:application/pdf;base64,"+base64String);
            }, 2000);
        }
        }
    });
}

NOTE

The AWSSDK.S3 NuGet package must be installed in your application to use the previous code example.

View sample in GitHub.

Using Server-Backed PDF Viewer

To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below

Step 1: Create AWS S3 account

Set up an AWS S3 account by following the instructions on the official AWS site: AWS Management Console. Create an S3 bucket and generate access keys while ensuring secure storage of credentials.

Step 2: Create PDF Viewer Sample in ASP.NET Core

Follow instructions provided in the Syncfusion® PDF Viewer Getting Started Guide to create a simple PDF Viewer sample in ASP.NET Core.

Step 3: Modify the Index.cshtml.cs File in the Project

  1. 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 Index.cshtml.cs 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 IndexModel(Microsoft.AspNetCore.Hosting.IHostingEnvironment 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 OnPostLoad() method to load the PDF files from AWS S3
public async Task<IActionResult> OnPostLoadAsync([FromBody] jsonObjects responseData)
{
    PdfRenderer pdfviewer = new PdfRenderer(_cache);
    MemoryStream stream = new MemoryStream();
    var jsonObject = JsonConverterstring(responseData);
    object jsonResult = new object();
    if (jsonObject != null && jsonObject.ContainsKey("document"))
    {
        if (bool.Parse(jsonObject["isFileName"]))
        {
            RegionEndpoint bucketRegion = RegionEndpoint.USEast1;

            // Configure the AWS SDK with your access credentials and other settings
            var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion);

            string document = jsonObject["document"];

            // Specify the document name or retrieve it from a different source
            var response = await s3Client.GetObjectAsync(_bucketName, document);

            Stream responseStream = response.ResponseStream;
            responseStream.CopyTo(stream);
            stream.Seek(0, SeekOrigin.Begin);
        }
        else
        {
            byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
            stream = new MemoryStream(bytes);
        }
    }
    jsonResult = pdfviewer.Load(stream, jsonObject);
    return Content(JsonConvert.SerializeObject(jsonResult));
}
  1. Open the appsettings.json file in your web service project, 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 Your Access Key from AWS S3, Your Secret Key from AWS S3, and Your Bucket name from AWS S3 with your actual AWS access key, secret key and bucket name

Step 4: Set the PDF Viewer Properties in ASP.NET Core PDF viewer component

Set the documentPath property of the PDF viewer component to the desired name of the PDF file you wish to load from AWS S3. Ensure that you correctly pass the document name from the files available in your azure container to the documentPath property.

@page "{handler?}"
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" serviceUrl="/Index" documentPath="PDF_Succinctly.pdf">
    </ejs-pdfviewer>
</div>

NOTE

The AWSSDK.S3 NuGet package must be installed in your application to use the previous code example.

View sample in GitHub