Open PDF file from AWS S3
4 Aug 20235 minutes to read
To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
Step 1: Create a Simple PDF Viewer Sample in Typescript
Start by following the steps provided in this link to create a simple PDF viewer sample in Typescript. This will give you a basic setup of the PDF viewer component.
Step 2: Modify the PdfViewerController.cs
File in the Web Service Project
-
Create a web service project in .NET Core 3.0 or above. You can refer to this link for instructions on how to create a web service project.
-
Open the
PdfViewerController.cs
file in your web service project. -
Import the required namespaces at the top of the file:
using System.IO;
using Amazon;
using Amazon.S3;
using Amazon.S3.Model;
- 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");
}
- Modify the
Load()
method to load the PDF files from AWS S3.
public async Task<IActionResult> Load([FromBody] Dictionary<string, string> jsonObject)
{
// Initialize the PDF viewer object with memory cache object
PdfRenderer pdfviewer = new PdfRenderer(_cache);
MemoryStream stream = new MemoryStream();
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));
}
- 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 3: Set the PDF Viewer Properties in Typescript 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. 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 AWS S3 bucket to the documentPath property.
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
The AWSSDK.S3 NuGet package must be installed in your application to use the previous code example.