Skip to content

Commit b14a31a

Browse files
sathiyaseelanksf3503sathiyaseelanksf3503
committed
987016: Update Trouble shooting
1 parent 4748ad6 commit b14a31a

File tree

1 file changed

+25
-192
lines changed

1 file changed

+25
-192
lines changed

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md‎

Lines changed: 25 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -1,215 +1,48 @@
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: Fix document loading issues in v23.1+ for the ASP.NET Core PDF Viewer component
4+
description: Resolve document rendering failures in v23.1 or newer by calling dataBind before load, verifying source URLs, checking CORS and CSP, and confirming network connectivity in the ASP.NET Core PDF Viewer.
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+
# Document Loading Issues in Version 23.1 or Newer
1212

13-
### **Overview**
13+
If the document does not render in the viewer when using version 23.1 or newer, follow these steps:
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+
1. Call `pdfViewer.dataBind()` before `load()`. Starting with v23.1, an explicit dataBind call is required to initialize data binding and render correctly.
1616

17-
### **Steps to Open the PDF File from Azure Active Directory**
18-
19-
---
20-
21-
### **Step 1: Register an Application in Azure Active Directory (AAD)**
22-
23-
1. **Go to the Azure Portal**:
24-
- Navigate to [Azure Portal](https://portal.azure.com).
25-
26-
2. **Register your Application**:
27-
- In the Azure portal, go to **Azure Active Directory** > **App registrations** > **New registration**.
28-
- Register your application and note down the **Application (client) ID** and **Directory (tenant) ID**.
29-
30-
![app-registration](../images/app-registration.png)
31-
32-
3. **Create a Client Secret**:
33-
- In the registered application, go to **Certificates & secrets**.
34-
- Click **New client secret**.
35-
- Provide a description and set an expiration period.
36-
- Click **Add**.
37-
- Copy the client secret value immediately, as it will be hidden later. Store it securely.
38-
39-
![client-secret](../images/client-secret.png)
40-
41-
---
42-
43-
### **Step 2: Create the Azure Storage Account**
44-
45-
1. **Create a Storage Account**:
46-
- In the Azure portal, use the search bar to search for **Storage accounts**.
47-
- Create a new storage account by filling in the required details (e.g., name, location, resource group, etc.).
48-
49-
![storage-account](../images/storage-account.png)
50-
51-
---
52-
53-
### **Step 3: Assign Role to the Application**
54-
55-
1. **Go to your Storage Account**:
56-
- Navigate to **Access control (IAM)** > **Add role assignment** in your Azure Storage Account.
57-
58-
2. **Assign Role**:
59-
- Assign the **Storage Blob Data Contributor** role to your registered application.
60-
- In the **Assign access to** dropdown, select **User, group, or service principal**.
61-
- Click on **Select members** and search for your registered application by name or client ID.
62-
- Select your application and click **Select**.
63-
- Click **Review + assign** to finalize the role assignment.
64-
65-
![add-role](../images/add-role.png)
66-
---
67-
68-
### **Step 4: Upload the PDF Document to the Azure Storage Account**
69-
70-
1. **Navigate to Data Storage**:
71-
- In the Azure portal, go to **Data storage** > **Containers**.
72-
73-
2. **Upload the PDF File**:
74-
- Create a new container and upload the PDF document you want to access in the PDF Viewer.
75-
76-
![upload-pdf](../images/upload-pdf.png)
77-
---
78-
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.
81-
82-
2. Add the following code snippet in `Index.cshtml.cs`.
83-
84-
{% tabs %}
85-
{% highlight c# tabtitle="~/Index.cshtml.cs" %}
86-
87-
using Azure.Identity;
88-
using Azure.Storage.Blobs;
89-
90-
string tenantId = "YOUR_TENANT_ID";
91-
string clientId = "YOUR_CLIENT_ID";
92-
string clientSecret = "YOUR_CLIENT_SECRET";
93-
string blobServiceEndpoint = "https://your-storage-account.blob.core.windows.net";
94-
string containerName = "your-container-name";
95-
96-
public async Task<IActionResult> OnGetLoadFromAAD(string fileName)
97-
{
98-
var clientSecretCredential = new ClientSecretCredential(tenantId, clientId, clientSecret);
99-
var blobServiceClient = new BlobServiceClient(new Uri(blobServiceEndpoint), clientSecretCredential);
100-
var containerClient = blobServiceClient.GetBlobContainerClient(containerName);
101-
var blobClient = containerClient.GetBlobClient(fileName);
102-
103-
// Download the PDF file to a local stream
104-
using MemoryStream pdfStream = new MemoryStream();
105-
await blobClient.DownloadToAsync(pdfStream);
106-
var base64 = Convert.ToBase64String(pdfStream.ToArray());
107-
return Content("data:application/pdf;base64," + base64);
108-
}
109-
110-
public async Task<IActionResult> OnPostSaveToAAD([FromBody]jsonObjects responseData)
111-
{
112-
var jsonObject = JsonConverterstring(responseData);
113-
PdfRenderer pdfviewer = new PdfRenderer(_cache);
114-
var fileName = jsonObject.ContainsKey("documentId") ? jsonObject["documentId"] : "Test.pdf";
115-
string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
116-
string convertedBase = documentBase.Substring(documentBase.LastIndexOf(',') + 1);
117-
// Decode the Base64 string to a byte array
118-
byte[] byteArray = Convert.FromBase64String(convertedBase);
119-
// Create a MemoryStream from the byte array
120-
MemoryStream stream = new MemoryStream(byteArray);
121-
// Create a new BlobServiceClient using the DefaultAzureCredential
122-
var clientSecretCredential = new ClientSecretCredential(tenantId, clientId, clientSecret);
123-
var blobServiceClient = new BlobServiceClient(new Uri(blobServiceEndpoint), clientSecretCredential);
124-
// Get a reference to the container
125-
var containerClient = blobServiceClient.GetBlobContainerClient(containerName);
126-
// Get a reference to the blob
127-
var blobClient = containerClient.GetBlobClient(fileName);
128-
//FileStream uploadFileStream = new FileStream();
129-
await blobClient.UploadAsync(stream, true);
130-
stream.Close();
131-
return Content(string.Empty);
132-
}
133-
134-
{% endhighlight %}
135-
{% endtabs %}
136-
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-
147-
{% tabs %}
148-
{% highlight c# tabtitle="~/Index.cshtml" %}
149-
150-
@page "{handler?}"
151-
@model IndexModel
152-
@{
153-
ViewData["Title"] = "Home page";
154-
}
155-
156-
<div>
157-
158-
<!-- Custom buttons for Load and Save -->
159-
<div style="margin-top: 10px;">
160-
<button id="loadFromAADButton" class="e-btn" style="margin-right: 10px;">Load From AAD</button>
161-
<button id="saveToAADButton" class="e-btn">Save To AAD</button>
162-
</div>
163-
<ejs-pdfviewer id="pdfviewer" style="height:600px" serviceUrl="/Index" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
17+
```html
18+
<button id="viewer" onclick="documentLoad()">Load</button>
19+
<div class="text-center">
20+
<ejs-pdfviewer id="pdfviewer" style="height:600px">
16421
</ejs-pdfviewer>
165-
16622
</div>
16723

168-
<script type="text/javascript">
169-
window.onload = function () {
24+
<script>
25+
function documentLoad() {
17026
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
171-
172-
// Handle the Load From AAD button click
173-
document.getElementById('loadFromAADButton').addEventListener('click', function () {
174-
const xhr = new XMLHttpRequest();
175-
xhr.open('GET', `/Index/LoadFromAAD?fileName=1Page.pdf`, true);
176-
xhr.onreadystatechange = () => {
177-
if (xhr.readyState === 4 && xhr.status === 200) {
178-
const data = xhr.responseText; // Get the response (assumed to be the PDF data or URL)
179-
console.log(data); // Handle the response (for debugging)
180-
181-
// Load the PDF into the viewer (assuming the response contains the PDF data or URL)
182-
pdfViewer.load(data, ''); // Load the document
183-
}
184-
};
185-
xhr.send();
186-
});
187-
188-
// Handle the Save To AAD button click
189-
document.getElementById('saveToAADButton').addEventListener('click', function () {
190-
// Save PDF to AAD
191-
// Set the server action settings to handle the "Save To AAD" action
192-
pdfViewer.serverActionSettings.download = "SaveToAAD"; // This triggers a custom server-side save action
193-
// Download the file (assuming this will be saved to AAD)
194-
pdfViewer.download(); // Trigger the download, which may involve saving it to AAD
195-
196-
});
27+
pdfViewer.serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
28+
pdfViewer.dataBind();
29+
pdfViewer.load("https://cdn.syncfusion.com/content/pdf/annotations.pdf");
19730
}
19831
</script>
32+
```
33+
34+
2. Verify the document source. Ensure the URL or path is valid and accessible.
35+
36+
3. Check network connectivity. The viewer cannot fetch the document without a stable connection.
19937

38+
4. Inspect console errors. Use browser developer tools to identify issues.
20039

201-
{% endhighlight %}
202-
{% endtabs %}
40+
5. Validate the initialization order. Initialize the viewer, call `dataBind()`, then call `load()`.
20341

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.
42+
6. Update to the latest viewer version. Issues may be resolved in newer releases.
20643

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.
44+
7. Configure CORS correctly for cross-domain documents.
21045

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.
46+
8. Review Content Security Policy (CSP) settings. Ensure external resources are permitted. See the [Content Security Policy troubleshooting guide](https://ej2.syncfusion.com/javascript/documentation/common/troubleshoot/content-security-policy) for details.
21447

215-
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad).
48+
Following this checklist typically resolves document loading issues in v23.1 or newer.

0 commit comments

Comments
 (0)