Skip to content

Commit 2d9309e

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-20-2024 4:30:08 AM
1 parent a87f57a commit 2d9309e

File tree

2 files changed

+229
-5
lines changed

2 files changed

+229
-5
lines changed

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

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,95 @@ domainurl: ##DomainURL##
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 a PDF Viewer sample in Vue
20+
21+
Follow the instructions provided in this [link](https://ej2.syncfusion.com/vue/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in Vue. This will set up the basic structure of your PDF Viewer application.
22+
23+
**Step 2:** Modify the `src/App.vue` File in the Vue Project
24+
25+
1. Import the required namespaces at the top of the file:
26+
27+
{% tabs %}
28+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
29+
30+
<script>
31+
import AWS from 'aws-sdk';
32+
</script>
33+
34+
{% endhighlight %}
35+
{% endtabs %}
36+
37+
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.
38+
39+
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.
40+
41+
{% tabs %}
42+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
43+
44+
<script>
45+
AWS.config.update({
46+
region: '**Your Region**', // Update this your region
47+
accessKeyId: '*Your Access Key*', // Update this with your access key id
48+
secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
49+
});
50+
</script>
51+
52+
{% endhighlight %}
53+
{% endtabs %}
54+
55+
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 string generated into the viewer.load method.
56+
57+
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.
58+
59+
60+
{% tabs %}
61+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
62+
63+
<script>
64+
export default {
65+
methods: {
66+
loadPdfDocument: function () {
67+
const getObjectParams = {
68+
Bucket: '**Your Bucket Name**',
69+
Key: '**Your Key**',
70+
};
71+
var s3= new AWS.S3();
72+
s3.getObject(getObjectParams, (err, data) => {
73+
if (err) {
74+
console.error('Error fetching document:', err);
75+
} else {
76+
if (data && data.Body) {
77+
const bytes = new Uint8Array(data.Body);
78+
let binary = '';
79+
bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
80+
const base64String = window.btoa(binary);
81+
setTimeout(() => {
82+
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
83+
viewer.load("data:application/pdf;base64,"+base64String);
84+
}, 2000);
85+
}
86+
}
87+
});
88+
},
89+
}
90+
}
91+
</script>
92+
93+
{% endhighlight %}
94+
{% endtabs %}
95+
96+
N> The **npm install aws-sdk** package must be installed in your application to use the previous code example.
97+
98+
[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).
99+
100+
## Using Server-Backed PDF Viewer
101+
13102
To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
14103

15104
**Step 1:** Create a Simple PDF Viewer Sample in Vue
@@ -97,7 +186,7 @@ public async Task<IActionResult> Load([FromBody] Dictionary<string, string> json
97186
}
98187
```
99188

100-
6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
189+
6. Open the `app settings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
101190

102191
```json
103192
{
@@ -186,4 +275,4 @@ export default {
186275

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

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

Lines changed: 138 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,142 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Save PDF file to AWS S3
11+
# Save PDF file to AWS S3
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 PDF to 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 Vue
20+
21+
Follow the instructions provided in this [link](https://ej2.syncfusion.com/vue/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in Vue. This will set up the basic structure of your PDF Viewer application.
22+
23+
**Step 2:** Modify the `src/App.vue` File in the Vue Project
24+
25+
1. Import the required namespaces at the top of the file:
26+
27+
{% tabs %}
28+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
29+
30+
<script>
31+
import AWS from 'aws-sdk';
32+
</script>
33+
34+
{% endhighlight %}
35+
{% endtabs %}
36+
37+
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.
38+
39+
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.
40+
41+
{% tabs %}
42+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
43+
44+
<script>
45+
AWS.config.update({
46+
region: '**Your Region**', // Update this your region
47+
accessKeyId: '*Your Access Key*', // Update this with your access key id
48+
secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
49+
});
50+
</script>
51+
52+
{% endhighlight %}
53+
{% endtabs %}
54+
55+
3. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
56+
57+
{% tabs %}
58+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
59+
60+
<template>
61+
<ejs-pdfviewer
62+
id="pdfViewer"
63+
:resourceUrl="resourceUrl"
64+
:toolbarClick="toolbarClick"
65+
:created="loadPdfDocument"
66+
:toolbarSettings="toolbarSettings">
67+
</ejs-pdfviewer>
68+
</template>
69+
70+
<script>
71+
export default {
72+
data() {
73+
let toolItem1 = {
74+
prefixIcon: 'e-icons e-pv-download-document-icon',
75+
id: 'download_pdf',
76+
tooltipText: 'Download file',
77+
align: 'right'
78+
};
79+
80+
return {
81+
resourceUrl: 'https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib',
82+
toolbarSettings: {
83+
toolbarItems: [ 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
84+
},
85+
};
86+
},
87+
88+
methods: {
89+
toolbarClick: function (args) {
90+
if (args.item && args.item.id === 'download_pdf') {
91+
this.savePdfDocument();
92+
}
93+
},
94+
}
95+
}
96+
</script>
97+
98+
{% endhighlight %}
99+
{% endtabs %}
100+
101+
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.
102+
103+
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.
104+
105+
{% tabs %}
106+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
107+
108+
<script>
109+
export default {
110+
methods: {
111+
savePdfDocument: function () {
112+
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
113+
viewer.saveAsBlob().then(function (value) {
114+
var reader = new FileReader();
115+
reader.onload = () => {
116+
const uint8Array = new Uint8Array(reader.result);
117+
const putObjectParams = {
118+
Bucket: '**Your Bucket Name**',
119+
Key: '**Your Key**',
120+
Body: uint8Array,
121+
ContentType: 'application/pdf',
122+
};
123+
var s3= new AWS.S3();
124+
s3.putObject(putObjectParams, (err, data) => {
125+
if (err) {
126+
console.error('Error uploading document:', err);
127+
} else {
128+
console.log('Document uploaded successfully:', data);
129+
}
130+
});
131+
};
132+
reader.readAsArrayBuffer(value);
133+
});
134+
}
135+
}
136+
}
137+
</script>
138+
139+
{% endhighlight %}
140+
{% endtabs %}
141+
142+
N> The **npm install aws-sdk** package must be installed in your application to use the previous code example.
143+
144+
[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).
145+
146+
## Using Server-Backed PDF Viewer
12147

13148
To save a PDF file to AWS S3, you can follow the steps below
14149

@@ -87,7 +222,7 @@ public IActionResult Download([FromBody] Dictionary<string, string> jsonObject)
87222
}
88223
```
89224

90-
6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
225+
6. Open the `app settings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
91226

92227
```json
93228
{
@@ -176,4 +311,4 @@ export default {
176311

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

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