Skip to content

Commit 4748ad6

Browse files
sathiyaseelanksf3503sathiyaseelanksf3503
committed
987016: Update Save PDF
1 parent b40a51e commit 4748ad6

File tree

7 files changed

+380
-234
lines changed

7 files changed

+380
-234
lines changed

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/save-pdf-file/to-amazon-s3.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
---
22
layout: post
3-
title: AWS S3 in ASP.NET Core Syncfusion PDF Viewer Component
4-
description: Save PDF files to AWS S3 in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more.
3+
title: Save PDF files to AWS S3 in ASP.NET Core PDF Viewer | Syncfusion
4+
description: Learn how to save PDF files to AWS S3 using the Syncfusion ASP.NET Core PDF Viewer component in standalone and server-backed configurations.
55
platform: document-processing
66
control: PDF Viewer
77
publishingplatform: ASP.NET Core
88
documentation: ug
99
---
1010

11-
# Save PDF file to AWS S3
11+
# Save PDF files 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.
13+
The ASP.NET Core PDF Viewer component supports saving PDF files to AWS S3 using either the standalone or server-backed configuration. The following steps demonstrate both approaches.
1414

15-
## Using Standalone PDF Viewer
15+
## Using the standalone PDF Viewer
1616

17-
To save a PDF file to AWS S3, you can follow the steps below
17+
To save a PDF file to AWS S3, follow these steps:
1818

19-
**Step 1:** Create AWS S3 account
19+
**Step 1:** Create an AWS S3 account
2020

2121
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.
2222

23-
**Step 2:** Create PDF Viewer Sample in ASP.NET Core
23+
**Step 2:** Create a PDF Viewer sample in ASP.NET Core
2424

2525
Follow instructions provided in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started) to create a simple PDF Viewer sample in ASP.NET Core.
2626

27-
**Step 3:** Modify the `~/Pages/Shared/_Layout.cshtml` File in the Project
27+
**Step 3:** Modify the `~/Pages/Shared/_Layout.cshtml` file in the project
2828

2929
1. Add the required scripts using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
3030

@@ -39,7 +39,7 @@ Follow instructions provided in the Syncfusion<sup style="font-size:70%">&reg;</
3939
{% endhighlight %}
4040
{% endtabs %}
4141

42-
**Step 4:** Modify the `~/Pages/Index.cshtml` File in the Project
42+
**Step 4:** Modify the `~/Pages/Index.cshtml` file in the project
4343

4444
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.
4545

@@ -53,7 +53,7 @@ AWS.config.update({
5353
});
5454
```
5555

56-
2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
56+
2. Configure a custom toolbar item for the download function to save a PDF file to AWS S3.
5757

5858
```csharp
5959
<div class="text-center">
@@ -119,19 +119,19 @@ N> The **AWSSDK.S3** NuGet package must be installed in your application to use
119119

120120
[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).
121121

122-
## Using Server-Backed PDF Viewer
122+
## Using the server-backed PDF Viewer
123123

124-
To save a PDF file to AWS S3, you can follow the steps below
124+
To save a PDF file to AWS S3, follow these steps:
125125

126-
**Step 1:** Create AWS S3 account
126+
**Step 1:** Create an AWS S3 account
127127

128128
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.
129129

130-
**Step 2:** Create PDF Viewer Sample in ASP.NET Core
130+
**Step 2:** Create a PDF Viewer sample in ASP.NET Core
131131

132132
Follow instructions provided in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET Core.
133133

134-
**Step 3:** Modify the `Index.cshtml.cs` File in the Project
134+
**Step 3:** Modify the `Index.cshtml.cs` file in the project
135135

136136
1. Import the required namespaces at the top of the file.
137137

@@ -214,9 +214,9 @@ public IndexModel(Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnviro
214214

215215
N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name
216216

217-
**Step 4:** Set the PDF Viewer Properties in ASP.NET Core PDF viewer component
217+
**Step 4:** Configure the PDF Viewer component
218218

219-
Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from AWS S3. Ensure that you correctly pass the document name from the files available in your azure container to the documentPath property.
219+
Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF Viewer component with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from AWS S3, and ensure that the document exists in the target bucket.
220220

221221
```csharp
222222

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/save-pdf-file/to-azure-active-directory.md‎

Lines changed: 49 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,31 @@
11
---
22
layout: post
3-
title: Save PDF To AAD in EJ2 ASP.NET Core PDF Viewer | Syncfusion
4-
description: Learn here all about How to Save Pdf To AAD in ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more.
3+
title: Save PDF files to Azure Active Directory (AAD) in ASP.NET Core PDF Viewer | Syncfusion
4+
description: Learn how to load and save PDF files with Azure Active Directory (AAD) using the Syncfusion ASP.NET Core PDF Viewer component and a server-backed web service.
55
platform: document-processing
66
control: PDF Viewer
77
publishingplatform: ASP.NET Core
88
documentation: ug
99
---
1010

11-
# Save PDF To Azure Active Directory in Viewer
11+
# Save PDF files to Azure Active Directory (AAD)
1212

1313
### **Overview**
1414

15-
The Syncfusion PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer.
15+
The ASP.NET Core PDF Viewer component supports loading and saving PDF files with Azure Active Directory (AAD). The following steps describe how to securely load and store PDF documents using a server-backed web service.
1616

17-
### **Steps to Open the PDF File from Azure Active Directory**
17+
### **Step 1: Register an application in Azure Active Directory (AAD)**
1818

19-
---
20-
21-
### **Step 1: Register an Application in Azure Active Directory (AAD)**
22-
23-
1. **Go to the Azure Portal**:
19+
1. **Go to the Azure portal**:
2420
- Navigate to [Azure Portal](https://portal.azure.com).
2521

26-
2. **Register your Application**:
22+
2. **Register the application**:
2723
- In the Azure portal, go to **Azure Active Directory** > **App registrations** > **New registration**.
2824
- Register your application and note down the **Application (client) ID** and **Directory (tenant) ID**.
2925

3026
![app-registration](../images/app-registration.png)
3127

32-
3. **Create a Client Secret**:
28+
3. **Create a client secret**:
3329
- In the registered application, go to **Certificates & secrets**.
3430
- Click **New client secret**.
3531
- Provide a description and set an expiration period.
@@ -38,48 +34,70 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az
3834

3935
![client-secret](../images/client-secret.png)
4036

41-
---
42-
43-
### **Step 2: Create the Azure Storage Account**
37+
### **Step 2: Create the Azure Storage account**
4438

45-
1. **Create a Storage Account**:
39+
1. **Create a storage account**:
4640
- In the Azure portal, use the search bar to search for **Storage accounts**.
4741
- Create a new storage account by filling in the required details (e.g., name, location, resource group, etc.).
4842

4943
![storage-account](../images/storage-account.png)
5044

51-
---
52-
53-
### **Step 3: Assign Role to the Application**
45+
### **Step 3: Assign a role to the application**
5446

55-
1. **Go to your Storage Account**:
47+
1. **Go to the storage account**:
5648
- Navigate to **Access control (IAM)** > **Add role assignment** in your Azure Storage Account.
5749

58-
2. **Assign Role**:
50+
2. **Assign a role**:
5951
- Assign the **Storage Blob Data Contributor** role to your registered application.
6052
- In the **Assign access to** dropdown, select **User, group, or service principal**.
6153
- Click on **Select members** and search for your registered application by name or client ID.
6254
- Select your application and click **Select**.
6355
- Click **Review + assign** to finalize the role assignment.
6456

6557
![add-role](../images/add-role.png)
66-
---
6758

68-
### **Step 4: Upload the PDF Document to the Azure Storage Account**
59+
### **Step 4: Upload the PDF document to Azure Storage**
6960

70-
1. **Navigate to Data Storage**:
61+
1. **Navigate to Data storage**:
7162
- In the Azure portal, go to **Data storage** > **Containers**.
7263

73-
2. **Upload the PDF File**:
64+
2. **Upload the PDF file**:
7465
- Create a new container and upload the PDF document you want to access in the PDF Viewer.
7566

7667
![upload-pdf](../images/upload-pdf.png)
77-
---
7868

79-
### **Step 5: ASP.NET Core PDF Viewer Control Configuration**
80-
1. Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started-with-server-backed) to create a simple PDF Viewer sample.
69+
### **Step 5: Server-side configuration**
70+
71+
1. **Configure server-side code**:
72+
- Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file:
73+
- `tenantId` (your Azure AD tenant ID),
74+
- `clientId` (your registered application client ID),
75+
- `clientSecret` (your registered application client secret),
76+
- `blobServiceEndpoint` (your storage account blob service URL),
77+
- `containerName` (your container name in Azure Blob Storage).
78+
79+
2. **Run the web service**:
80+
- After configuring the necessary details, run the web service to make it accessible.
8181

82-
2. Add the following code snippet in `Index.cshtml.cs`.
82+
### **Client-side configuration**
83+
84+
1. **Run the ASP.NET Core sample**:
85+
- Start the ASP.NET Core (Razor) sample that includes the Syncfusion PDF Viewer.
86+
87+
2. **Load a PDF from AAD**:
88+
- When the user clicks the **Load from AAD** button, the client-side JavaScript will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage.
89+
- The server will retrieve the PDF from Azure, convert it to a Base64 string, and return it to the client.
90+
91+
3. **Display the PDF in the PDF Viewer**:
92+
- Once the Base64 string is received, the PDF Viewer will load the PDF using the `viewer.load()` method.
93+
94+
### **Save the PDF document to Azure**
95+
96+
1. Save PDF to AAD:
97+
- The user can click the **Save to AAD** button to upload any modifications to the PDF back to Azure Blob Storage.
98+
- This action sends the modified PDF to the server, where it is converted into a byte array and saved to the specified Azure Blob container.
99+
100+
### **Server-side code snippets**
83101

84102
{% tabs %}
85103
{% highlight c# tabtitle="~/Index.cshtml.cs" %}
@@ -134,16 +152,6 @@ string containerName = "your-container-name";
134152
{% endhighlight %}
135153
{% endtabs %}
136154

137-
3. Configure Server-Side Code:
138-
- Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file:
139-
- `tenantId` (your Azure AD tenant ID),
140-
- `clientId` (your registered application client ID),
141-
- `clientSecret` (your registered application client secret),
142-
- `blobServiceEndpoint` (your storage account blob service URL),
143-
- `containerName` (your container name in Azure Blob Storage).
144-
145-
4. Add the following code snippet in `Index.cshtml`.
146-
147155
{% tabs %}
148156
{% highlight c# tabtitle="~/Index.cshtml" %}
149157

@@ -172,7 +180,7 @@ string containerName = "your-container-name";
172180
// Handle the Load From AAD button click
173181
document.getElementById('loadFromAADButton').addEventListener('click', function () {
174182
const xhr = new XMLHttpRequest();
175-
xhr.open('GET', `/Index/LoadFromAAD?fileName=1Page.pdf`, true);
183+
xhr.open('GET', `/Index/LoadFromAAD?fileName=Test.PDF`, true);
176184
xhr.onreadystatechange = () => {
177185
if (xhr.readyState === 4 && xhr.status === 200) {
178186
const data = xhr.responseText; // Get the response (assumed to be the PDF data or URL)
@@ -201,15 +209,4 @@ string containerName = "your-container-name";
201209
{% endhighlight %}
202210
{% endtabs %}
203211

204-
5. Run the Application
205-
- Build and run your Core application. The PDF Viewer will be displayed with Load from AAD and Save to AAD buttons.
206-
207-
6. Load PDF from AAD
208-
- Click the Load from AAD button.
209-
- The server fetches the PDF from Azure Blob Storage and loads it into the Syncfusion PDF Viewer.
210-
211-
7. Save PDF to AAD
212-
- Click the Save to AAD button.
213-
- The server uploads the modified PDF back to Azure Blob Storage.
214-
215-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad).
212+
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad).

0 commit comments

Comments
 (0)