Skip to content

Commit 50384a4

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-16-2024 10:30:14 PM
1 parent 2e92ef4 commit 50384a4

File tree

3 files changed

+578
-197
lines changed

3 files changed

+578
-197
lines changed

‎ej2-angular/pdfviewer/open-pdf-file/from-amazon-s3.md

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,74 @@ domainurl: ##DomainURL##
1010

1111
# Open PDF file from AWS S3
1212

13+
PDF Viewer allows to load PDF file from Azure Blob Storage using either the Standalone or Server-backend 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 a PDF Viewer sample in Angular
20+
21+
Follow the instructions provided in this [link](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in Angular. This will set up the basic structure of your PDF Viewer application.
22+
23+
**Step 2:** Modify the `src/app/app.component.ts` File in the Angular Project
24+
25+
1. Import the required namespaces at the top of the file:
26+
27+
```typescript
28+
import * as AWS from 'aws-sdk';
29+
```
30+
31+
2. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3.
32+
33+
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.
34+
35+
```typescript
36+
AWS.config.update({
37+
region: '**Your Region**', // Update this your region
38+
accessKeyId: '*Your Access Key*', // Update this with your access key id
39+
secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
40+
});
41+
```
42+
43+
3. 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 strikng generated into the viewer.load method.
44+
45+
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.
46+
47+
```typescript
48+
private s3 = new AWS.S3();
49+
50+
loadDocument() {
51+
const getObjectParams = {
52+
Bucket: '**Your Bucket Name**',
53+
Key: '**Your Key**',
54+
};
55+
this.s3.getObject(getObjectParams, (err, data) => {
56+
if (err) {
57+
console.error('Error fetching document:', err);
58+
} else {
59+
if (data && data.Body) {
60+
const bytes = new Uint8Array(data.Body as ArrayBuffer);
61+
let binary = '';
62+
bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
63+
const base64String = window.btoa(binary);
64+
console.log('Document data as Base64:', base64String);
65+
var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
66+
setTimeout(() => {
67+
viewer.load("data:application/pdf;base64,"+base64String);
68+
}, 2000);
69+
}
70+
}
71+
});
72+
}
73+
```
74+
75+
N> The **npm install aws-sdk** package must be installed in your application to use the previous code example.
76+
77+
[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).
78+
79+
## Using Server-Backed PDF Viewer
80+
1381
To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
1482

1583
**Step 1:** Create a Simple PDF Viewer Sample in Angular
@@ -151,4 +219,4 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService,
151219

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

154-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
222+
[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-angular/pdfviewer/save-pdf-file/to-amazon-s3.md

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,116 @@ domainurl: ##DomainURL##
1010

1111
# Save PDF file to AWS S3
1212

13+
PDF Viewer allows to save PDF file to Azure Blob Storage using either the Standalone or Server-backend PDF Viewer. Below are the steps and a sample to demonstrate how to save a PDF to AWS S3.
14+
15+
## Using Standalone PDF Viewer
16+
17+
To save a PDF file to AWS S3, you can follow the steps below
18+
19+
**Step 1:** Create a PDF Viewer sample in Angular
20+
21+
Follow the instructions provided in this [link](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in Angular. This will set up the basic structure of your PDF Viewer application.
22+
23+
**Step 2:** Modify the `src/app/app.component.ts` File in the Angular Project
24+
25+
1. Import the required namespaces at the top of the file:
26+
27+
```typescript
28+
import * as AWS from 'aws-sdk';
29+
```
30+
31+
2. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3.
32+
33+
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.
34+
35+
```typescript
36+
AWS.config.update({
37+
region: '**Your Region**', // Update this your region
38+
accessKeyId: '*Your Access Key*', // Update this with your access key id
39+
secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
40+
});
41+
```
42+
43+
3. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
44+
45+
```typescript
46+
@Component({
47+
selector: 'app-root',
48+
template: `<div class="content-wrapper">
49+
<ejs-pdfviewer id="pdfViewer"
50+
[resourceUrl]='resource'
51+
[toolbarSettings]="toolbarSettings"
52+
(toolbarClick)="toolbarClick($event)"
53+
style="height:640px;display:block">
54+
</ejs-pdfviewer>
55+
</div>`,
56+
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
57+
ThumbnailViewService, ToolbarService, NavigationService,
58+
TextSearchService, TextSelectionService, PrintService,
59+
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
60+
})
61+
62+
export class AppComponent implements OnInit {
63+
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
64+
65+
public toolItem1: CustomToolbarItemModel = {
66+
prefixIcon: 'e-icons e-pv-download-document-icon',
67+
id: 'download_pdf',
68+
tooltipText: 'Download file',
69+
align: 'right'
70+
};
71+
72+
public toolbarSettings = {
73+
showTooltip: true,
74+
toolbarItems: ['OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', this.toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
75+
};
76+
77+
public toolbarClick(args: any): void {
78+
if (args.item && args.item.id === 'download_pdf') {
79+
this.SavePdfToBlob();
80+
}
81+
}
82+
}
83+
```
84+
85+
4. 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.
86+
87+
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.
88+
89+
```typescript
90+
private s3 = new AWS.S3();
91+
92+
saveDocument() {
93+
var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
94+
viewer.saveAsBlob().then((value: Blob) => {
95+
const reader = new FileReader();
96+
reader.onload = () => {
97+
const uint8Array = new Uint8Array(reader.result as ArrayBuffer);
98+
const putObjectParams = {
99+
Bucket: '**Your Bucket Name**',
100+
Key: '**Your Key**',
101+
Body: uint8Array,
102+
ContentType: 'application/pdf',
103+
};
104+
this.s3.putObject(putObjectParams, (err, data) => {
105+
if (err) {
106+
console.error('Error uploading document:', err);
107+
} else {
108+
console.log('Document uploaded successfully:', data);
109+
}
110+
});
111+
};
112+
reader.readAsArrayBuffer(value);
113+
});
114+
}
115+
```
116+
117+
N> The **npm install aws-sdk** package must be installed in your application to use the previous code example.
118+
119+
[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).
120+
121+
## Using Server-Backed PDF Viewer
122+
13123
To save a PDF file to AWS S3, you can follow the steps below
14124

15125
**Step 1:** Create a PDF Viewer sample in Angular
@@ -140,4 +250,4 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService,
140250

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

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