1. Home
  2. Forum
  3. jQuery
  4. ReactJS PDFViewer documentation

ReactJS PDFViewer documentation

Hello, 

I am evaluating your PdfViewer library for a client. 

Is the entire documentation for your ReactJS PdfViewer component to be found at https://help.syncfusion.com/reactjs/pdfviewer/getting-started?

If so, I have the following questions:

1) Does the PdfViewer component support receiving the PDF as a byte array or a URL?
2) How do I customise the toolbar styles and contents?
3) Can you provide an example of how to run the PdfViewer standalone like you have done for the Autocomplete component below? I have tried modifying this example to work with the PdfViewer but the viewer component is not found at runtime. The only way I can make it work is by using the web.all bundle, but this is way too big for production. Please provide a React+Typescript+Webpack example specific to the PdfViewer component, if possible. 

Thanks
Mike

Autocomplete example:

6 Replies
JS John Smith October 17, 2017 01:50 AM UTC

Hello, 

Can I get an update on this?

Thanks


MS Mohan Selvaraj Syncfusion Team October 17, 2017 01:38 PM UTC

Hi John, 
Sorry for the inconvenience 
Query 
Details 
Does the PdfViewer component support receiving the PDF as a byte array or a URL? 
We can load the PDF document as a byte array in the PDF Viewer control, Kindly use the below code snippet for loading the document as byte array in the PDF Viewer controller . 

byte[] bytearray = File.ReadAllBytes(HttpContext.Current.Server.MapPath("~/Data/filename.pdf")); 
helper.Load(bytearray); 

We have also created the Web API service sample for your reference, Kindly download the Web API service sample from the below link. 
How do I customise the toolbar styles and contents? 
We can customize the toolbar styles by changing the themes files. You can change the themes files in the index.html file. Kindly refer the below code for changing the themes in PDF Viewer control. 

  <link rel='nofollow' href="Content/ej/default-theme/ej.web.all.min.css" rel="stylesheet" /> 
 Can you provide an example of how to run the PdfViewer standalone like you have done for the Autocomplete component below? I have tried modifying this example to work with the PdfViewer but the viewer component is not found at runtime. The only way I can make it work is by using the web.all bundle, but this is way too big for production. Please provide a React+Typescript+Webpack example specific to the PdfViewer component, if possible.  
We have created the separate PDF Viewer ReactJS components using web pack .Kindly download the sample from the below link.  


NOTE: The PDF document has been loaded from our online hosted service. The PDF document which has been available in the server can be loaded, However you can create your own web services by using the web API controller methods, And also we have created the separate own service and provided the same in our first query. Kindly refer the UGdocumentation link for the code snippet. 

If the provided sample is different from your requirement, kindly provide us more specific details that illustrates your exact requirement. It will be helpful for us to analyze more on your requirement and could provide you the better solution.    

Regards, 
Mohan S 



JS John Smith October 18, 2017 09:19 AM UTC

Hi Mohan, 

Thanks for your excellent answer. I am impressed by the quality of support provided by Syncfusion. We are going to use the library in our project. One more question: how do I customise the toolbar in the React component? I would like to provide my own controls and layout to suit our app. 

Can you also confirm if there is some API documentation for the React component?

Thanks


MS Mohan Selvaraj Syncfusion Team October 19, 2017 08:53 AM UTC

Hi John, 
 
Thank you for your update. 
 
The toolbar can be customized by hiding the existing toolbar in our PDF viewer control. We can hide the default toolbar of the PDF viewer by using the below code snippet. 
 
var pdfViewer=$('#PdfViewer').data("ejPdfViewer"); 
pdfViewer .showToolbar(false); 
 
 
 
  
We can create the customer toolbar by using the client side APIs of PDF viewer control, Kindly refer the UG documentation for more details of customizing the toolbar in PDF viewer control. 
 
We have also created the sample in ReactJS by hiding the default toolbar and designed a customer toolbar with basic functions in our PDF viewer control. Please find the sample from the below link. 
 
 
Regards, 
Mohan S 


JS John Smith October 19, 2017 09:46 AM UTC

Thanks again, Mohan. So it seems that Syncfusion's React component is only useful if you want the default behaviour? That would explain why there is no API document for the React component. I think it would better for us to start out with your JavaScript PDF viewer and then wrap it in a React component - please correct me if I am missing something.


MS Mohan Selvaraj Syncfusion Team October 20, 2017 05:38 AM UTC

Hi John, 
 
Thank you for your update. 
 
We created the wrapper class for our JavaScript control in ReactJS framework and so we can use same JavaScript APIs in the ReactJs components. 
 
Note: The provided sample contains an example for customizing the toolbar with default functionality. However, we can design our own toolbar with necessary functionality in ReactJS component application by using the JavaScript APIs.  
 
Regards, 
Mohan S 


Loader.
Up arrow icon