Skip to content

Commit 6b0da80

Browse files
johnsonmonoharjohnsonmonohar
authored
Merge pull request #3200 from syncfusion-content/EJ2-896980-OpenSaveAWS
EJ2 896980 Open PDF file from AWS S3
2 parents 22929a3 + 04187b4 commit 6b0da80

File tree

4 files changed

+395
-9
lines changed

4 files changed

+395
-9
lines changed

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: AWS S3 in ##Platform_Name## PDF Viewer Component
3+
title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component
44
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.
55
platform: ej2-asp-core-mvc
66
control: PDF Viewer
@@ -10,6 +10,86 @@ documentation: ug
1010

1111
# Open PDF file from AWS S3
1212

13+
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.
14+
15+
## Using Standalone PDF Viewer
16+
17+
To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
18+
19+
**Step 1:** Create AWS S3 account
20+
21+
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.
22+
23+
**Step 2:** Create PDF Viewer Sample in ASP.NET MVC
24+
25+
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.
26+
27+
**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project
28+
29+
1. Add the required scripts using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
30+
31+
{% tabs %}
32+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
33+
34+
<head>
35+
...
36+
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1654.0.min.js"></script>
37+
</head>
38+
39+
{% endhighlight %}
40+
{% endtabs %}
41+
42+
**Step 4:** Modify the `~/Views/Home/Index.cshtml` File in the Project
43+
44+
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.
45+
46+
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.
47+
48+
```csharp
49+
AWS.config.update({
50+
region: '**Your Region**', // Update this your region
51+
accessKeyId: '*Your Access Key*', // Update this with your access key id
52+
secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
53+
});
54+
```
55+
56+
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.
57+
58+
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.
59+
60+
```csharp
61+
loadDocument() {
62+
const s3 = new AWS.S3();
63+
const getObjectParams = {
64+
Bucket: '**Your Bucket Name**',
65+
Key: '**Your Key**',
66+
};
67+
this.s3.getObject(getObjectParams, (err, data) => {
68+
if (err) {
69+
console.error('Error fetching document:', err);
70+
} else {
71+
if (data && data.Body) {
72+
const bytes = new Uint8Array(data.Body as ArrayBuffer);
73+
let binary = '';
74+
bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
75+
const base64String = window.btoa(binary);
76+
console.log('Document data as Base64:', base64String);
77+
var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
78+
setTimeout(() => {
79+
viewer.load("data:application/pdf;base64,"+base64String);
80+
}, 2000);
81+
}
82+
}
83+
});
84+
}
85+
```
86+
87+
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
88+
89+
[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).
90+
91+
## Using Server-Backed PDF Viewer
92+
1393
To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
1494

1595
**Step 1:** Create AWS S3 account
@@ -98,4 +178,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name
98178

99179
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
100180

101-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
181+
[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)

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md

Lines changed: 118 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
3-
title: AWS S3 in ##Platform_Name## PDF Viewer Component
4-
description: Save PDF files to AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
3+
title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component
4+
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.
55
platform: ej2-asp-core-mvc
66
control: PDF Viewer
77
publishingplatform: ##Platform_Name##
@@ -10,6 +10,121 @@ documentation: ug
1010

1111
# Save PDF file to AWS S3
1212

13+
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.
14+
15+
## Using Standalone PDF Viewer
16+
17+
To save a PDF file to AWS S3 bucket, you can follow the steps below
18+
19+
**Step 1:** Create AWS S3 account
20+
21+
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.
22+
23+
**Step 2:** Create PDF Viewer Sample in ASP.NET MVC
24+
25+
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.
26+
27+
**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project
28+
29+
1. Add the required scripts using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
30+
31+
{% tabs %}
32+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
33+
34+
<head>
35+
...
36+
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1654.0.min.js"></script>
37+
</head>
38+
39+
{% endhighlight %}
40+
{% endtabs %}
41+
42+
**Step 4:** Modify the `~/Views/Home/Index.cshtml` File in the Project
43+
44+
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.
45+
46+
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.
47+
48+
```csharp
49+
AWS.config.update({
50+
region: '**Your Region**', // Update this your region
51+
accessKeyId: '*Your Access Key*', // Update this with your access key id
52+
secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
53+
});
54+
```
55+
56+
2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
57+
58+
```csharp
59+
<div>
60+
<div style="height:500px;width:100%;">
61+
@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").Created("loadDocument").ToolbarClick("toolbarClick").Render()
62+
</div>
63+
</div>
64+
65+
<script type="text/javascript">
66+
window.onload = function () {
67+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
68+
var toolItem1 = {
69+
prefixIcon: 'e-icons e-pv-download-document-icon',
70+
id: 'download_pdf',
71+
tooltipText: 'Download file',
72+
align: 'right'
73+
};
74+
pdfViewer.toolbarSettings = {
75+
showTooltip: true,
76+
toolbarItems: ['OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
77+
};
78+
79+
};
80+
81+
// Define the toolbarClick event handler
82+
function toolbarClick(args) {
83+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
84+
if (args.item && args.item.id === 'download_pdf') {
85+
saveDocument();
86+
}
87+
}
88+
</script>
89+
```
90+
91+
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.
92+
93+
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.
94+
95+
```csharp
96+
function saveDocument() {
97+
const s3 = new AWS.S3();
98+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
99+
pdfViewer.saveAsBlob().then(function (value) {
100+
var reader = new FileReader();
101+
reader.onload = () => {
102+
const uint8Array = new Uint8Array(reader.result);
103+
const putObjectParams = {
104+
Bucket: '**Your Bucket Name**',
105+
Key: '**Your Key**',
106+
Body: uint8Array,
107+
ContentType: 'application/pdf',
108+
};
109+
s3.putObject(putObjectParams, (err, data) => {
110+
if (err) {
111+
console.error('Error uploading document:', err);
112+
} else {
113+
console.log('Document uploaded successfully:', data);
114+
}
115+
});
116+
};
117+
reader.readAsArrayBuffer(value);
118+
});
119+
}
120+
```
121+
122+
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
123+
124+
[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).
125+
126+
## Using Server-Backed PDF Viewer
127+
13128
To save a PDF file to AWS S3 bucket, you can follow the steps below
14129

15130
**Step 1:** Create AWS S3 account
@@ -90,4 +205,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name
90205

91206
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
92207

93-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
208+
[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)

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: AWS S3 in ##Platform_Name## PDF Viewer Component
3+
title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component
44
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.
55
platform: ej2-asp-core-mvc
66
control: PDF Viewer
@@ -10,6 +10,86 @@ documentation: ug
1010

1111
# Open PDF file from AWS S3
1212

13+
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.
14+
15+
## Using Standalone PDF Viewer
16+
17+
To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
18+
19+
**Step 1:** Create AWS S3 account
20+
21+
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.
22+
23+
**Step 2:** Create PDF Viewer Sample in ASP.NET Core
24+
25+
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.
26+
27+
**Step 3:** Modify the `~/Pages/Shared/_Layout.cshtml` File in the Project
28+
29+
1. Add the required scripts using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
30+
31+
{% tabs %}
32+
{% highlight c# tabtitle="~/_Layout.cshtml" %}
33+
34+
<head>
35+
...
36+
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1654.0.min.js"></script>
37+
</head>
38+
39+
{% endhighlight %}
40+
{% endtabs %}
41+
42+
**Step 4:** Modify the `~/Pages/Index.cshtml` File in the Project
43+
44+
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.
45+
46+
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.
47+
48+
```csharp
49+
AWS.config.update({
50+
region: '**Your Region**', // Update this your region
51+
accessKeyId: '*Your Access Key*', // Update this with your access key id
52+
secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
53+
});
54+
```
55+
56+
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.
57+
58+
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.
59+
60+
```csharp
61+
loadDocument() {
62+
const s3 = new AWS.S3();
63+
const getObjectParams = {
64+
Bucket: '**Your Bucket Name**',
65+
Key: '**Your Key**',
66+
};
67+
this.s3.getObject(getObjectParams, (err, data) => {
68+
if (err) {
69+
console.error('Error fetching document:', err);
70+
} else {
71+
if (data && data.Body) {
72+
const bytes = new Uint8Array(data.Body as ArrayBuffer);
73+
let binary = '';
74+
bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
75+
const base64String = window.btoa(binary);
76+
console.log('Document data as Base64:', base64String);
77+
var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
78+
setTimeout(() => {
79+
viewer.load("data:application/pdf;base64,"+base64String);
80+
}, 2000);
81+
}
82+
}
83+
});
84+
}
85+
```
86+
87+
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
88+
89+
[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).
90+
91+
## Using Server-Backed PDF Viewer
92+
1393
To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
1494

1595
**Step 1:** Create AWS S3 account
@@ -132,4 +212,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name
132212

133213
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
134214

135-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
215+
[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)

0 commit comments

Comments
 (0)