How to view PPTX file in PDF Viewer

4 mins read

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.

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.

Did you find this information helpful?

Yes

Comments (0)