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-javascript/pdfviewer/js/open-pdf-file/from-dropbox-cloud-file-storage.md
+56-1Lines changed: 56 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,6 +11,61 @@ domainurl: ##DomainURL##
11
11
12
12
# Open PDF file from Dropbox cloud file storage
13
13
14
+
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.
15
+
16
+
## Using Standalone PDF Viewer
17
+
18
+
To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
19
+
20
+
**Step 1** Create a Dropbox API
21
+
22
+
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.
23
+
24
+
**Step 2:** Create a Simple PDF Viewer Sample in JavaScript
25
+
26
+
Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
27
+
28
+
**Step 3:** Modify the `src/app/app.ts` File in the Angular Project
29
+
30
+
1. Import the required namespaces at the top of the file:
31
+
32
+
```typescript
33
+
import { Dropbox } from'dropbox';
34
+
```
35
+
36
+
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.
37
+
38
+
N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.
39
+
40
+
```typescript
41
+
pdfviewer.created=function () {
42
+
let dbx =newDropbox({ accessToken: 'Your Access Token' });
function blobToBase64(blob:Blob):Promise<string> {
53
+
returnnewPromise((resolve, reject) => {
54
+
const reader =newFileReader();
55
+
reader.readAsDataURL(blob);
56
+
reader.onloadend= () => {
57
+
resolve(reader.resultasstring);
58
+
};
59
+
});
60
+
}
61
+
```
62
+
63
+
N> The **npm install dropbox** package must be installed in your application to use the previous code example.
64
+
65
+
[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)
66
+
67
+
## Using Server-Backed PDF Viewer
68
+
14
69
To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example.
138
193
139
-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage)
194
+
[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-javascript/pdfviewer/js/save-pdf-file/to-dropbox-cloud-file-storage.md
+76-1Lines changed: 76 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,6 +11,81 @@ domainurl: ##DomainURL##
11
11
12
12
# Save PDF file to Dropbox cloud file storage
13
13
14
+
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.
15
+
16
+
## Using Standalone PDF Viewer
17
+
18
+
To save a PDF file to Dropbox cloud file storage, you can follow the steps below
19
+
20
+
**Step 1** Create a Dropbox API
21
+
22
+
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.
23
+
24
+
**Step 2:** Create a PDF Viewer sample in JavaScript
25
+
26
+
Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
27
+
28
+
**Step 3:** Modify the `src/app/app.ts` File in the Angular Project
29
+
30
+
1. Import the required namespaces at the top of the file:
31
+
32
+
```typescript
33
+
import { Dropbox } from'dropbox';
34
+
```
35
+
36
+
2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
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 Drop Box using the filesUpload method of the Drop Box instance.
56
+
57
+
N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.
N> The **npm install dropbox** package must be installed in your application to use the previous code example.
84
+
85
+
[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)
86
+
87
+
## Using Server-Backed PDF Viewer
88
+
14
89
To save a PDF file to Dropbox cloud file storage, you can follow the steps below
N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example.
131
206
132
-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage)
207
+
[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-javascript/pdfviewer/ts/open-pdf-file/from-dropbox-cloud-file-storage.md
+56-1Lines changed: 56 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,6 +11,61 @@ domainurl: ##DomainURL##
11
11
12
12
# Open PDF file from Dropbox cloud file storage
13
13
14
+
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.
15
+
16
+
## Using Standalone PDF Viewer
17
+
18
+
To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
19
+
20
+
**Step 1** Create a Dropbox API
21
+
22
+
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.
23
+
24
+
**Step 2:** Create a Simple PDF Viewer Sample in Typescript
25
+
26
+
Start by following the steps provided in this [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in Typescript. This will give you a basic setup of the PDF viewer component.
27
+
28
+
**Step 3:** Modify the `src/app/app.ts` File in the Angular Project
29
+
30
+
1. Import the required namespaces at the top of the file:
31
+
32
+
```typescript
33
+
import { Dropbox } from'dropbox';
34
+
```
35
+
36
+
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.
37
+
38
+
N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.
39
+
40
+
```typescript
41
+
pdfviewer.created=function () {
42
+
let dbx =newDropbox({ accessToken: 'Your Access Token' });
function blobToBase64(blob:Blob):Promise<string> {
53
+
returnnewPromise((resolve, reject) => {
54
+
const reader =newFileReader();
55
+
reader.readAsDataURL(blob);
56
+
reader.onloadend= () => {
57
+
resolve(reader.resultasstring);
58
+
};
59
+
});
60
+
}
61
+
```
62
+
63
+
N> The **npm install dropbox** package must be installed in your application to use the previous code example.
64
+
65
+
[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)
66
+
67
+
## Using Server-Backed PDF Viewer
68
+
14
69
To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example.
137
192
138
-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage)
193
+
[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)
0 commit comments