PDfViewer Example - not able to send request for specific PDF File

[Cal]

Hi

I've been trying to implement PDFViewer.

We have built your sample project and we have used some of the code from it. We are now trying to move over from just serving one test pdf and sending over a parameter to send back a unique pdf.

Here is the code you provide

Public Class PdfViewerController
    Inherits ApiController

    Public Function PostViewerAction(jsonResult As Dictionary(Of String, String)) As Object
        Dim helper__1 As New PdfViewerHelper()
        'load the multiple document from client side 

        If jsonResult.ContainsKey("newFileName") Then
            Dim name = jsonResult("newFileName")
            Dim pdfName = name.ToString() & ".pdf"
            helper__1.Load(Helper.GetFilePath("" & pdfName))
        Else
            If jsonResult.ContainsKey("isInitialLoading") Then
                helper__1.Load(Helper.GetFilePath("receipttest.pdf"))
            End If
        End If



        'If ReceiptNo <> Nothing Then
        'Dim filePathThing As String = info.ReceiptNo & ".pdf"
        'helper__1.Load(Helper.GetFilePath(filePathThing))
        'End If

        Dim output As String = JsonConvert.SerializeObject(helper__1.ProcessPdf(jsonResult))
        Return output
    End Function
    Public Function DocumentDownloadAction(jsonResult As Dictionary(Of String, String)) As Object
        Dim helper As New PdfViewerHelper()
        Return New With {Key .DocumentStream = Convert.ToBase64String(helper.DocumentStream.ToArray())}
    End Function
End Class

Public Class Helper
    Public Shared Function GetFilePath(path As String) As String
        Dim _dataPath As String = GetCommonFolder(New DirectoryInfo(HttpContext.Current.Request.PhysicalApplicationPath))
        _dataPath += "\" & path
        Return _dataPath
    End Function

    Private Shared Function GetCommonFolder(dtInfo As DirectoryInfo) As String
        Dim _folderNames = dtInfo.GetDirectories("Data/PdfViewer")
        If _folderNames.Length > 0 Then
            Return _folderNames(0).FullName
        End If

        Return If(dtInfo.Parent IsNot Nothing, GetCommonFolder(dtInfo.Parent), String.Empty)
    End Function

End Class

How can we do this?

Thanks

[Aravinth Sampath]

Hi Callam, 

 

Thank you for contacting Syncfusion support. 

 

At present, we do not have support for passing parameters to WebAPI method in PDF viewer control. Can you please provide us the details like what kind of parameters you are going to pass to the WebAPI controller of PDF viewer control and their usage in your project. So, that it will be helpful for us to analyze further on your requirement and assist you better. 

 

Regards, 

Aravinth

[Cal]

Hi Callam, 

 

Thank you for contacting Syncfusion support. 

 

At present, we do not have support for passing parameters to WebAPI method in PDF viewer control. Can you please provide us the details like what kind of parameters you are going to pass to the WebAPI controller of PDF viewer control and their usage in your project. So, that it will be helpful for us to analyze further on your requirement and assist you better. 

 

Regards, 

Aravinth

Hi

We are trying to pass 2 parameters, filename (String) and some sort of ID as Integer.

Thank you

[Akshaya Arivoli]

Hi Callam,  

 

Thank you for your update. 

 

As mentioned earlier at present we do not have support for passing parameters to WebAPI method. However, as per your requirement we have created the work around sample to pass the Name of the PDF document to the server for loading the document in the PDF Viewer control using AJAX request. You can download the sample from the following link. 

 

http://www.syncfusion.com/downloads/support/forum/127871/ze/Sample-1955722523  

 

Please try the provided sample and if it was differ from your requirement, please provide more details about the usage of parameters. So, that it will be helpful for us to analyze further on your requirement and assist you better. 

 

Regards, 

Akshaya 

[Cal]

Hi,

Thanks for your help. This looks like a good solution, however we are having some trouble with the JavaScript as it's claiming for us that ejPdfViewer is not a function.

This is in this part of the code: 

                    function openDoc(data) {

                        if (!isControlInitialized) {

                            $("#pdfviewer").ejPdfViewer({ serviceUrl: "../../api/PdfViewer", pdfService: ej.PdfViewer.PdfService.Local });

                            isControlInitialized = true;

                        }

                        var obj = $("#pdfviewer").data("ejPdfViewer");

                        obj.load(data);

                    }

Thank you for your help so far

[Akshaya Arivoli]

Hi Callam, 

 

Thank you for your update. 

 

We are unable to reproduce the reported error in the provided sample. We suspect the reported error may due to the improper referring of DLL’s and script files. So, can you please ensure whether the assemblies and script files are referring properly in the sample.  

 

Also, we have shared the demo video showing that the PDF viewer control is rendered properly in the provided sample. Please find it from the following location. 

 

http://www.syncfusion.com/downloads/support/forum/127871/ze/PDFViewer-195582845  

 

Please let us know if you need further assistance. 

 

Regards, 

Akshaya 

[Ketan]

Hi

Do we now have support for passing parameters to WebAPI method in PDF viewer control?

Thanks

[Dhivyabharathi Mohan]

Hi Ketan, 

 

 

Yes, you can pass the extra parameters to the Web API controller using the ajaxRequestInitiate event available in the Syncfusion PDF Viewer. We have shared the sample and code snippet for your reference. 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC_SAMPLE-868207377  

 

 

Code snippet: 

 

 

@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("F# Succinctly.pdf").AjaxRequestInitiate("ajaxRequestInitiate").Render() 

 

function ajaxRequestInitiate(args) { 

        var viewer = document.getElementById("pdfviewer").ej2_instances[0]; 

        if (args.JsonData.action == "Load") { 

            args.JsonData['documentId'] = '1001'; 

            args.JsonData["moduleId"] = "1001"; 

            viewer.setJsonData(args.JsonData); 

        } 

    } 

 

 

 

Kindly try this and revert us, if you have any concerns. 

 

 

Regards, 

Dhivya. 

[Ketan]

Thanks, it worked

[Dhivyabharathi Mohan]

Hi Ketan, 

  

  

Thank you for your update. We are gald to know that the reported issue is resolved. 

  

  

Regards, 

Dhivya. 

[Isaac Eduardo Martinez]

Could you replicate the same example but in .NET Core?

I have the next function, but I would like to send by parameter the full path to be uploaded in AWS S3.

[AcceptVerbs("Post")]
[HttpPost("ExportFormFields")]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
[Route("[controller]/ExportFormFields")]
public void ExportFormFields([FromBody] Dictionary<string, string> jsonObject)
{
    // Initialize the PDF Viewer object with memory cache object
    PdfRenderer pdfviewer = new PdfRenderer(_cache);
    string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);


    if (jsonObject != null && jsonObject.ContainsKey("document"))
    {
        Console.WriteLine("Guardando en AWS");
        RegionEndpoint bucketRegion = RegionEndpoint.USEast1;


        // Configure the AWS SDK with your access credentials and other settings
        var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion);


        string formPath = "aws-path/form-designer.pdf"; // full path to be uploaded in AWS S3.
        byte[] bytes = Convert.FromBase64String(documentBase.Split(",")[1]);
        using (MemoryStream stream = new MemoryStream(bytes))
        {
            var request = new PutObjectRequest
            {
                BucketName = _bucketName,
                Key = formPath,
                InputStream = stream,
            };
            // Upload the PDF document to AWS S3
            var response = s3Client.PutObjectAsync(request).Result;
        }
    }
}

My questions are:

- How do I implement this in backend?

- How do I make the request in frontend with react if I want to use the ExportFormFields function when the users submit a form?

[Chinnamunia Karthik Chinna Thambi]

Hi Isaac,

Please refer to the code snippet and sample provided for sending the path to the server when users submit a form. In this sample, when the form is submitted the `ajaxRequestInitiate` event is triggered, and we use this event to send the path value to the server.

Code snippet in client-side (React):

 

function ajaxRequestInitiate(args) {

    if (args.JsonData['action'] === 'ExportFormFields') {

      console.log(args);

      args.JsonData['path'] = 'www.somepath.com'; // Provide the path here

      viewer.setJsonData(args.JsonData);

    }

}

Code snippet in server-side (ASP.NET.Core):

 

public IActionResult ExportFormFields([FromBody] Dictionary<string, string> jsonObject)

{

    PdfRenderer pdfviewer = new PdfRenderer(_cache);

 

    var path = jsonObject.ContainsKey("path") ? jsonObject["path"].ToString() : "";

    Console.WriteLine(path);

 

    string jsonResult = pdfviewer.ExportFormFields(jsonObject);

    return Content(jsonResult);

}

React sample:  https://stackblitz.com/edit/react-mdw6fc-oybk5o?file=index.js

Web service sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ExportFormFieldAdditionalData25795401.zip

To send the path to the `ExportFormFields` method, follow these steps:

• Run the web service sample.
• And then run the React sample.
• Click the submit form button. This will send the path value to the `ExportFormFields` method.

[Isaac Eduardo Martinez]

Hi Chinnamunia, thanks for your response.
My example it worked.