How to Open a File Using React Pdf in JavaScript PDF Viewer?
Essential JS 2 PDF Viewer
The Syncfusion PDF Viewer in React is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It is also available in other frameworks such as JavaScript, Angular, ASP.NET MVC, and ASP.NET Core.
Refer to the following UG link for getting started with the React PDF Viewer.
https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started/
You can create the PDF Viewer web service project using the following KB link and provide that project URL to the serviceUrl property of the PDF Viewer.
Open file in PDF Viewer
Open PDF documents during control initialization
You can load the PDF document during the initial loading using the documentPath API available in the PDF Viewer. Refer to the following code for the same.
<PdfViewerComponent ref={(scope) => { this.viewer = scope ; }} id="container" documentPath="PDF_Succinctly.pdf" serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer">
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields]} />
</PdfViewerComponent>
Note:
- You can provide the PDF document name, document path, and base64 string in the documentPath API.
- If the document name is provided in the ‘documentPath’ API, then that document path should be mapped in the GetDocument() of the Web service project.
Open PDF document dynamically
- You can open the PDF document in PDF Viewer by clicking the ‘Open Icon’ available in the PDF Viewer. Refer to the following screenshot.
- You can open the PDF document dynamically using the load() API available in PDF Viewer. Refer to the following code for the same.
HTML
<button onclick="loadPdf()">Load PDF</button>
JS
function loadPdf() {
// Get the PDF Viewer instance
var pdfviewer = document.getElementById('container').ej2_instances[0];
// Load PDF document in PDF Viewer
pdfviewer.load('Hive_Succinctly.pdf', null);
}Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PDF_Viewer_Load-824515000
- You can provide the PDF document name, document path, and base64 string in the load() API.
- If the document name is provided in the load(), then that document path should be mapped in the GetDocument() of the Web service project.
Conclusion
I hope you enjoyed learning about how to open a file using React PDF in JavaScript PDF Viewer.
You can refer to our JavaScript PDF Viewer page to know about its other groundbreaking feature representations. You can also explore our JavaScript PDF Viewer Documentation to understand how to manipulate data.
For current customers you can check out our WinForms components from the License and Download page. If you are new to Syncfusion® you can try our 30-day free trial to check out our JavaScript PDF Viewer and other JavaScript components.
If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums or feedback portal. We are always happy to assist you!
