How to open a file using react pdf
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.
https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core
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>
- 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.
