Getting Started with TypeScript PDF Viewer

8 Jun 20232 minutes to read

This section explains briefly about how to integrate a PDF viewer control in your TypeScript web application.

For common steps to create a project in typescript, you can refer here.

The default type definition file ej.web.all.d.ts needs to be included the support for type-checking while initializing any of the Syncfusion widgets.

The important step you need to do is to copy the ej.web.all.d.ts file into your project and then need to refer it in your TypeScript application (app.ts file), so that you will get the intelliSense support and also the compile time type-checking.

You can find the ej.web.all.d.ts file in the following location,

(installed location)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\typescript

Apart from ej.web.all.d.ts file, it is also necessary to make use of the jquery.d.ts file in your TypeScript application, which can be downloaded from here.

Script and CSS Reference

Add the scripts and CSS references to the “index.html” page in the order mentioned in the following code example.

  • HTML
    • <!DOCTYPE html>
<html>
<head>
    <link href="http://cdn.syncfusion.com/24.2.3/js/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
    <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js" type="text/javascript"></script>
    <script src="app.js"></script>
</head>
<body>
</body>
</html>

    NOTE

    1. In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.

    NOTE

    1. For themes, you can use the ej.web.all.min.css CDN link from the code snippet given. To add the themes in your application, please refer to this link.

    Control Initialization

    Add a div container to render the PDF viewer control.

  • HTML
    • <!DOCTYPE html>
<html>    
     <body>
         <div id="pdfviewer1"></div>
     </body>
</html>

    Initialize the PDF viewer in app.ts file by using the ej.PdfViewer method.

  • HTML
    • /// <reference path="../tsfiles/jquery.d.ts"></reference>
/// <reference path="../tsfiles/ej.web.all.d.ts"></reference>

module PdfViewerComponent {
    $(function () {
        var viewer = new ej.PdfViewer($("#pdfviewer1"), {
            serviceUrl: "http://js.syncfusion.com/ejservices/api/PdfViewer",
            isResponsive: true
        });
    });
}

    NOTE

    Default PDF document will be rendered in the PDF viewer control, which is used in the online service.

    TypeScript PDF Viewer Getting Started