Migration EJ1 to Ej2. Problems setting the DocumentPath

[Matthias Wagner]

Hello,

we are currently migrating our pdfviewer from ej1 to ej2 (version 25.1400.38.0).
In ej1 we set the documentPath in the CodeBehind. Something like

public partial class PdfViewer : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        PdfViewerSync.ServiceUrl = "../../api/PdfViewer";

        PdfViewerSync.Locale = "de-DE";

        byte[] datenArr = DataManager.Druckunterlagen?.FirstOrDefault(x => x.Enabled && x.Selected)?.DocumentPdf?.Daten;

        if (datenArr != null)

        {

            string datenString = Convert.ToBase64String(datenArr);

            PdfViewerSync.DocumentPath = "data:application/pdf;base64," + datenString;

        }

    }

}

After changing to ej2, i have problems to load the data the same way like before.
I attach a little example project. Could you please help me, how to load the pdf-data from a base 64 string?

Thank you very much
Matthias

Attachment: WebFormSample1777971882_aa1bcf5e.zip

[Chinnamunia Karthik Chinna Thambi]

Hi Matthias,

Please refer to the following code snippet and documentation for loading the PDF document using a base64 string:

Code snippet:

 

// Load PDF document from Base64 string

 

document.getElementById('load1').addEventListener('click', () => {

 

  viewer.load('data:application/pdf;base64,'+ AddBase64String, null);

 

}

Documentation:  https://ej2.syncfusion.com/javascript/documentation/pdfviewer/how-to/load-document

[Matthias Wagner]

Hi,

thanks for your answer.
Your example shows javascript code. But i wanted to set the documentPath in my CodeBehind which is C#-Code.

Is there a documentation where this is described or can you give me a sample of how to load the document in C#?

Regards

[Chinnamunia Karthik Chinna Thambi]

Hi Matthias,

Please find the sample to load the PDF document from filePath and base64 string.

 

Code snippet:

 

 

document.getElementById('loadDocumentFromFilePath').addEventListener('click', function () {

    viewer.load("PDF_Succinctly.pdf"); // Provide the document name here

});

 

document.getElementById('loadDocumentFromBase64').addEventListener('click', function () {

    var base64 = "";  // Provide the document base64 here

    viewer.load("data:application/pdf;base64," + base64);

});

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Create-a-new-DPF-document-updated(25.1.38)-1362303157.zip

 

Kindly try this sample and let us know, if you have any concerns.

[Matthias Wagner]

Hi,

we are working here with asp.net webforms, i cant use your example cause we only have access to the pdf-data in the default.aspx.cs, which means it is C#-Code. I cant access it in javascript.

We implemented this in ej1 with the following code:

public partial class PdfViewer : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        PdfViewerSync.ServiceUrl = "../../api/PdfViewer";

        PdfViewerSync.Locale = "de-DE";

        byte[] datenArr = DataManager.Druckunterlagen?.FirstOrDefault(x => x.Enabled && x.Selected)?.DocumentPdf?.Daten;

        if (datenArr != null)

        {

            string datenString = Convert.ToBase64String(datenArr);

            PdfViewerSync.DocumentPath = "data:application/pdf;base64," + datenString;

        }

    }

}

Is there a possibility to set the documentPath with ej2 in C#-Code?

[Chinnamunia Karthik Chinna Thambi]

Hi Matthias,

You need to place the PDF file in the project directory and specify the file name in the `viewer.load()` method. This way, the PDF data is retrieved from the `Load` method and loaded into the PDF Viewer.

 

Screenshot 1: Place the PDF file in the project directory and specified the file name in the `viewer.load()` method

 

 

 

Screenshot 2: PDF data is retrieved from the `Load` method and loaded into the PDF Viewer.

 

[Matthias Wagner]

Hi,

due to privacy protection we cannot place the PDF in the project directory.

Is there any way to load the pdf data from the C# code behind???

[Chinnamunia Karthik Chinna Thambi]

Hi Matthias,

If you're unable to place the PDF in the project location, you can store the file in a custom location, database, or any other cloud service. On the client-side, you'll need to provide the file name, while on the server-side, in the Load method, you should retrieve the PDF document data from the desired location. Then, pass the document stream to the pdfviewer.Load() method.

 

[Matthias Wagner]

Hi,

we are already using this load-method, and we are already storing our pdf-file in our database.

My problem is, that i dont know how to set the documentPath.
So far we were using ej1 and in ej1 we set the documentPath like this

public partial class PdfViewer : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        PdfViewerSync.ServiceUrl = "../../api/PdfViewer";

        PdfViewerSync.Locale = "de-DE";

        byte[] datenArr = DataManager.Druckunterlagen?.FirstOrDefault(x => x.Enabled && x.Selected)?.DocumentPdf?.Daten;

        if (datenArr != null)

        {

            string datenString = Convert.ToBase64String(datenArr);

            PdfViewerSync.DocumentPath = "data:application/pdf;base64," + datenString;

        }

    }

}

This is the aspx.cs-File, the codeBehind-File.

All i want to know is, if and how it is possible to set the documentPath in the codeBehind with ej2.

[Chinnamunia Karthik Chinna Thambi]

Hi Matthias,

You need to specify the document name in the `documentPath` on the client-side, as shown in the screenshot below.

 

 

 

On the server-side, you can get the document name from the `jsonObject`, as illustrated in the screenshot below. Utilize this document name to retrieve the document from the database, convert it to a stream, and then provide the stream to the `pdfviewer.Load(stream, jsonObject)` method on the server-side.

 

 

Please try this approach, and if you have any questions, please share your EJ1 sample in which you are setting the document path in C# code. This will help us investigate further on our end.

[Matthias Wagner]

Hi,

attached is a sample of our EJ1 project.

Attachment: SyncExamplePdfViewer_f0a59087.zip

[Chinnamunia Karthik Chinna Thambi]

Hi Matthias,

We are checking on the provided EJ1 sample and will provide further updates in two business days, on May 27, 2024.

[Chinnamunia Karthik Chinna Thambi]

Hi Matthias,

In the provided EJ1 sample, you are setting the documentPath and other properties in the Page_Load method, but in EJ2, it is not possible to set the documentPath and other properties in the Page_Load method. Therefore, we strongly recommend specifying the file name for the documentPath property on the client side. You can then retrieve the provided file name from the jsonObject in the controller's Load method. Based on the file name, you need to retrieve the document data from the specified location and then provide the stream to the `pdfviewer.Load(stream, jsonObject)` method on the server-side.