You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ej2-angular/pdfviewer/open-pdf-file/from-amazon-s3.md
+69-1Lines changed: 69 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -10,6 +10,74 @@ domainurl: ##DomainURL##
10
10
11
11
# Open PDF file from AWS S3
12
12
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 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*asAWSfrom'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.
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
+
13
81
To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
14
82
15
83
**Step 1:** Create a Simple PDF Viewer Sample in Angular
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
153
221
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)
Copy file name to clipboardExpand all lines: ej2-angular/pdfviewer/open-pdf-file/from-dropbox-cloud-file-storage.md
+59-2Lines changed: 59 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
layout: post
3
-
title: Open PDF files from Dropbox cloud file storage in Angular Pdfviewer Component | Syncfusion
3
+
title: Open PDF from Dropbox cloud storage in Angular PdfViewer | Syncfusion
4
4
description: Learn here all about how to Open PDF files from Dropbox cloud file storage in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
5
5
platform: ej2-angular
6
6
control: Open PDF files from Dropbox cloud file storage
@@ -10,6 +10,63 @@ domainurl: ##DomainURL##
10
10
11
11
# Open PDF file from Dropbox cloud file storage
12
12
13
+
PDF Viewer allows to load PDF file from Drop Box using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Drop Box.
14
+
15
+
## Using Standalone PDF Viewer
16
+
17
+
To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
18
+
19
+
**Step 1** Create a Dropbox API
20
+
21
+
To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
22
+
23
+
**Step 2:** Create a Simple PDF Viewer Sample in Angular
24
+
25
+
Start by following the steps provided in this [link](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in Angular. This will give you a basic setup of the PDF viewer component.
26
+
27
+
**Step 3:** Modify the `src/app/app.component.ts` File in the Angular Project
28
+
29
+
1. Import the required namespaces at the top of the file:
30
+
31
+
```typescript
32
+
import { Dropbox } from'dropbox';
33
+
```
34
+
35
+
2. Create an instance of the Dropbox class using an access token for authentication. Next, call the filesDownload method of this Dropbox instance to download the file located at /PDF_Succinctly.pdf. Upon successfully downloading the file, extract the file blob from the response. Convert this file blob to a Base64 string using the blobToBase64 method. Finally, load the Base64 string into a PDF viewer control.
36
+
37
+
N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.
38
+
39
+
```typescript
40
+
asyncloadPdfDocument(): Promise<void> {
41
+
let proxy=this;
42
+
let dbx=newDropbox({ accessToken: 'Your Access Token' });
N> The **npm install dropbox** package must be installed in your application to use the previous code example.
65
+
66
+
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone)
67
+
68
+
## Using Server-Backed PDF Viewer
69
+
13
70
To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
14
71
15
72
**Step 1** Create a Dropbox API
@@ -151,4 +208,4 @@ N> The **Dropbox.Api** NuGet package must be installed in your application to us
151
208
152
209
N> Replace `PDF_Succinctly.pdf` with the actual document name that you want to load from Dropbox cloud file storage. Make sure to pass the document name from the dropbox folder to the `documentPath` property of the PDF viewer component
153
210
154
-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage)
211
+
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Server-Backed)
Copy file name to clipboardExpand all lines: ej2-angular/pdfviewer/save-pdf-file/to-amazon-s3.md
+111-1Lines changed: 111 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -10,6 +10,116 @@ domainurl: ##DomainURL##
10
10
11
11
# Save PDF file to AWS S3
12
12
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 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*asAWSfrom'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.
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
+
privates3=newAWS.S3();
91
+
92
+
saveDocument() {
93
+
var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
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
+
13
123
To save a PDF file to AWS S3, you can follow the steps below
N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
142
252
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