How to view PPTX file in PDF Viewer
Essential JS 2 PDF Viewer
The Syncfusion PDF Viewer in ASP.NET MVC (Essential JS 2) 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 and React.
Refer to the following UG link for getting started with the PDF Viewer. https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started/
Viewing PPTX file in PDF Viewer:
You can load the PPTX file in the PDF Viewer by converting it into a PDF document. Refer to the following link for converting a PPTX file to PDF:
https://help.syncfusion.com/file-formats/presentation/presentation-to-pdf
Refer to the following steps to load a PPTX file in the PDF Viewer:
Step 1
Clicking the button will convert the PPTX to a PDF document and open it in the PDF Viewer.
<button onclick="LoadPdf()" id="loadpptx">Load PPTX</button> |
Step 2
An Ajax request is sent to the GetDocument() method in the controller, where the PPTX is converted to a PDF document base64 string and returned to the client. Then, the PDF Viewer control is initialized with that base64 string.
var pdfviewer; function LoadPdf() { var docName = { documentName: "Slides.pptx"}; // Sending AJAX request $.ajax({ url: '/PdfViewer/GetDocument', type: 'POST', dataType: 'text', crossDomain: true, traditional: true, contentType: 'application/json; charset=utf-8', data:JSON.stringify(docName), success: function (data) { // Render the PDF viewer control if (!pdfviewer) { var viewer = new ej.pdfviewer.PdfViewer({ // Sets the base64 string to the documentPath API documentPath: data, serviceUrl: '/PdfViewer',
}); // Inject the PDF Viewer modules ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.BookmarkView, ej.pdfviewer.Magnification, ej.pdfviewer.ThumbnailView, ej.pdfviewer.Toolbar, ej.pdfviewer.Print, ej.pdfviewer.Annotation, ej.pdfviewer.FormFields); viewer.appendTo('#pdfviewer'); pdfviewer = document.getElementById("pdfviewer").ej2_instances[0]; } }, error: function (msg, textStatus, errorThrown) { alert('Exception' + msg.responseText); } }); } |
Step 3
Loading the PPTX document and converting it into a PDF document base64 string.
public Object GetDocument(jsonObjects jsonObject) { var jsonData = JsonConverter(jsonObject); string documentPath = GetDocumentPath(GetDocumentPath(jsonData["documentName"])); IPresentation pptxDoc = Presentation.Open(documentPath); //Creates an instance of ChartToImageConverter and assigns it to ChartToImageConverter property of Presentation pptxDoc.ChartToImageConverter = new ChartToImageConverter(); //Converts the PowerPoint Presentation into PDF document PdfDocument pdfDocument = PresentationToPdfConverter.Convert(pptxDoc); MemoryStream pdfStream = new MemoryStream(); pdfDocument.Save(pdfStream); pdfDocument.Close(true); pptxDoc.Close(); //Converting Pdf memory stream into base64 string string docBase64 = "data:application/pdf;base64," + Convert.ToBase64String(pdfStream.ToArray()); return (docBase64);
} |
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2PdfViewer2022957583
Conclusion:
I hope you enjoyed learning about how to view PPTX file in PDF Viewer.