syncfusion-content · johnsonmonohar · Jul 19, 2024 · Jul 16, 2024 · Jul 16, 2024
diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: AWS S3 in ##Platform_Name## PDF Viewer Component
+title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component
 description: Learn here all about how to Open PDF files from AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: PDF Viewer
@@ -10,6 +10,86 @@ documentation: ug
 
 # Open PDF file from AWS S3
 
+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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials.
+
+**Step 2:** Create PDF Viewer Sample in ASP.NET MVC
+
+Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC.
+
+**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project 
+
+1. Add the required scripts using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1654.0.min.js"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Modify the `~/Views/Home/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.
+
+N> 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.
+
+```csharp
+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
+});
+```
+
+2. 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.
+
+N> 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.
+
+```csharp
+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);
+        }
+        }
+    });
+}
+```
+
+N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
+
+## 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 
@@ -98,4 +178,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name
 
 N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)
diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: AWS S3 in ##Platform_Name## PDF Viewer Component
-description: Save PDF files to AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
+title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component
+description: Learn here all about how to Save PDF files from AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: PDF Viewer
 publishingplatform: ##Platform_Name##
@@ -10,6 +10,121 @@ documentation: ug
 
 # Save PDF file to AWS S3
 
+PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3.
+
+## Using Standalone PDF Viewer
+
+To save a PDF file to AWS S3 bucket, 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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials.
+
+**Step 2:** Create PDF Viewer Sample in ASP.NET MVC
+
+Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC.
+
+**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project 
+
+1. Add the required scripts using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1654.0.min.js"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Modify the `~/Views/Home/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.
+
+N> 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.
+
+```csharp
+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
+});
+```
+
+2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
+
+```csharp
+<div>
+    <div style="height:500px;width:100%;">
+        @Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").Created("loadDocument").ToolbarClick("toolbarClick").Render()
+    </div>
+</div>
+
+<script type="text/javascript">
+window.onload = function () {
+    var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+    var toolItem1 = {
+        prefixIcon: 'e-icons e-pv-download-document-icon',
+        id: 'download_pdf',
+        tooltipText: 'Download file',
+        align: 'right'
+    };
+    pdfViewer.toolbarSettings = {
+        showTooltip: true,
+        toolbarItems: ['OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
+    };
+
+};
+
+// Define the toolbarClick event handler
+function toolbarClick(args) {
+    var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+    if (args.item && args.item.id === 'download_pdf') {
+        saveDocument();
+    } 
+}
+</script>
+```
+
+3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method of the S3 instance.
+
+N> 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.
+
+```csharp
+function saveDocument() {
+    const s3 = new AWS.S3();
+    var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+    pdfViewer.saveAsBlob().then(function (value) {
+        var reader = new FileReader();
+        reader.onload = () => {
+            const uint8Array = new Uint8Array(reader.result);
+            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);
+    });
+}
+```
+
+N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
+
+## Using Server-Backed PDF Viewer
+
 To save a PDF file to AWS S3 bucket, you can follow the steps below
 
 **Step 1:** Create AWS S3 account 
@@ -90,4 +205,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name
 
 N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)
diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: AWS S3 in ##Platform_Name## PDF Viewer Component
+title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component
 description: Learn here all about how to Open PDF files from AWS S3 in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: PDF Viewer
@@ -10,6 +10,86 @@ documentation: ug
 
 # Open PDF file from AWS S3
 
+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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). 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](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started) 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,
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1654.0.min.js"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**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.
+
+N> 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.
+
+```csharp
+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
+});
+```
+
+2. 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.
+
+N> 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.
+
+```csharp
+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);
+        }
+        }
+    });
+}
+```
+
+N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
+
+## 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 
@@ -132,4 +212,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name
 
 N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)