Loading a PDF

[David Price]

Hello,

I have got your demo working for the PDF viewer. I enclose this in the ZIP.

But on page load, I don't want to load anything and I want to control the loading from button clicks

e.g.

1. Page loads pdfviewer is hidden

2. on button click the pdf viewer is displayed and loads a pdf 

2. on a different button click it loads a different pdf 

Attachment: PDFExample_7fe1508f.zip

[Akshaya Arivoli]

Hi David, 

Thank you for contacting Syncfusion support. 

We have created a sample with two buttons in a page, ‘Initialize PDF Viewer’ button is to initialize the PDF Viewer with a PDF document and ‘Choose file from disk’ button is to load different PDF documents in PDF Viewer as per your request and shared the same in the following location, 

Sample link:  http://www.syncfusion.com/downloads/support/forum/136941/ze/PdfViewerWeb1344156684  

Please try the sample and revert us with more details if your requirement is differing from the provided sample. It will be helpful for us to investigate more on your requirement and assist you better. 

Regards, 

Akshaya 

[David Price]

Hi,

When I try your code in my project the PDF will not load when I click on "Intialize PDF Viewer" button nothing will load at all.

If I move the "Intialize PDF Viewer" button to the bottom of the page it loads (just below the /body closing tag)?

Why won't the pdf load on button click, when placed in the middle of the page?

David

Attachment: Test.aspx_cf7d958a.zip

[Akshaya Arivoli]

Hi David, 

Thank you for your update. 

We have analyzed the provided files and found that you have placed ‘Initialize PDF Viewer’ button inside the form tag. The default type of the button is ‘submit’ so if we use the button inside the form it acts as a submit button and the PDF Viewer will not be initialized due to the calling of Page_Load() in the button click. Hence, we need to specify the type of the button as ‘button’ while using the button inside the form. Please find the code snippet for the same from the below, 

<form runat="server" > 

    <div>       

   <button type="button" onclick="initializeViewer()">Intialize PDF Viewer</button> 

    <div style="position:absolute;left:160px;top:9px"> 

         <input type="file" id="fileUpload"/> 

         <button type="button" id="fileUploadButton" >Choose file from disk</button> 

     </div> 

     </div> 

    <div style="height:700px;width:100%;padding:5px;"> 

       <div id ="PdfViewer"></div>      

    </div>      

        </form> 

Please try the above solution and let us know if you have any concerns on this. 

Regards, 

Akshaya 

[David Price]

Hi,

Thank you for your reply. 

It seems that I need to first call

 $("#PdfViewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer' });

and then after this I can update the PDF using

function onChange(_filename) {

            var _ejPdfViewer = $("#PdfViewer").data("ejPdfViewer");

            _ejPdfViewer.load(_filename);

        }

but when I call $("#PdfViewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer' });

It then goes and calls the default code in PdfViewerController.cs

            else

            {

                if (jsonResult.ContainsKey("isInitialLoading"))

                {

                    if (jsonResult.ContainsKey("file"))

                    {

                        var name = jsonResult["file"];

                        helper.Load(name);

                    }

                    else

                    {

                        helper.Load(HttpContext.Current.Server.MapPath("/competitive-info/data/filename.pdf"));

                    }

                }

            }

           

Which is hard coded. I don't know what the first PDF that needs to load will be so how can I pass in a pdf file name. Or initialise the viewer hidden and then on every button press I can call ?

 var _ejPdfViewer = $("#PdfViewer").data("ejPdfViewer");

  _ejPdfViewer.load(_filename);

David

[Akshaya Arivoli]

Hi David, 

Thank you for your update. 

We can use documentPath API to load the required PDF document during the PDF Viewer initialization. Please find the UG documentation link for the same, 

https://help.syncfusion.com/api/js/ejpdfviewer#members:documentpath  

Note: The path of the PDF document and the base64 string of the document can also be used to load the PDF document using documentPath. 

As a workaround we can initialize the PDF Viewer without loading any PDF document by providing the empty string to the documentPath API or to the Load() API in the Web API controller. 

Please try the above suggestion and let us know if you have any concerns on this. 

Regards, 

Akshaya 

[David Price]

ello,

On page load, I have initialised the view but also 

<div id="pdfV" class="col-sm-12 col-md-5">                                                

 <div  style="height:610px;width:100%;padding:0px;margin-top: -49px;">

   <div id ="PdfViewer" ;></div>

 </div>                                                 

</div>

Wrapped the viewer in a Div and called  $("#pdfV").hide();

When I want to view a pdf I load it and call

$("#pdfV").show();

var _ejPdfViewer = $("#PdfViewer").data("ejPdfViewer");

_ejPdfViewer.load(_filename);

But the viewer doesn't reshow only toolbar shows, without content?

[Akshaya Arivoli]

Hi David, 

Thank you for your update. 

We are unable to reproduce the issue “PDF viewer only shows the toolbar without PDF document” with the details provided in the forum. We have created the sample with two buttons, ‘display’ button will initialize the PDF Viewer with the provided filename to the load() API and ‘hide’ button will hide the PDF viewer. We have shared the sample in the following location, 

Sample link: http://www.syncfusion.com/downloads/support/forum/136941/ze/PdfViewerWeb497591927  

Note: Kindly ensure that the loaded PDF document is available in the sever. 

Please try the above sample and revert us with more details about your requirement, modified sample and PDF document, if the issue still reproducing at your end. These details will be helpful for us to investigate more on your issue and assist you better.  

Please let us know if you need any other assistance on this. 

Regards, 

Akshaya