Print

The PDF Viewer supports printing the loaded PDF file. Enable or disable printing using the following example.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enablePrint="true">
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enablePrint="true">
    </ejs-pdfviewer>
</div>

Print dialog in the PDF Viewer

You can also invoke the print action programmatically using the following example:

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   documentLoad="print">
    </ejs-pdfviewer>
</div>

<script>
    function print() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.print.print();
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   documentLoad="print">
    </ejs-pdfviewer>
</div>

<script>
    function print() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.print.print();
    }
</script>

Customize print quality using printScaleFactor

Adjust print quality using the PrintScaleFactor API (default: 1). The effective range is 0.5–5. Values below 0.5 and above 5 fall back to standard quality. Higher values within the range improve quality but may increase print time.

The following example demonstrates how to customize print quality using the PrintScaleFactor API:

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enablePrint="true"
                   printScaleFactor=0.5>
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enablePrint="true"
                   printScaleFactor=0.5>
    </ejs-pdfviewer>
</div>

Additional print options

EnablePrintRotation in the PDF Viewer

The EnablePrintRotation property controls whether landscape pages are auto-rotated to best fit when printing. The default value is true. Set to false to preserve the original page orientation and suppress automatic rotation during print.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enablePrintRotation="true"
                   printScaleFactor=0.5>
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enablePrintRotation="true"
                   printScaleFactor=0.5>
    </ejs-pdfviewer>
</div>

The printMode property allows you to specify how the document is printed.

The supported values are:

  • Default: Prints the document from the same window.
  • NewWindow: Prints the document from a new window/tab, which can be useful depending on browser popup policies.
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   printMode="NewWindow"
                   printScaleFactor=0.5>
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   printMode="NewWindow"
                   printScaleFactor=0.5>
    </ejs-pdfviewer>
</div>

The following events are available in the PDF Viewer component.

Name Description
printStart Triggers when a print action starts.
printEnd Triggers when a print action is completed.

printStart Event

The printStart event triggers when the print action is started.

Event Arguments

See PrintStartEventArgs for details such as fileName and the cancel option.

The following example illustrates how to handle the printStart event.

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" 
                   style="height:600px" 
                   documentPath="https://cdn.syncfusion.com/content/pdf/annotations.pdf"
                   printStart="printStarted">
    </ejs-pdfviewer>
</div>

<script>
    function printStarted(args) {
        console.log('Print action has started for file: ' + args.fileName);
        // To cancel the print action
        // args.cancel = true;
    }
</script>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" 
                   style="height:600px" 
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/annotations.pdf"
                   printStart="printStarted">
    </ejs-pdfviewer>
</div>

<script>
    function printStarted(args) {
        console.log('Print action has started for file: ' + args.fileName);
        // To cancel the print action
        // args.cancel = true;
    }
</script>

printEnd Event

The printEnd event triggers when a print action is completed.

Event Arguments

See PrintEndEventArgs for details such as fileName.

The following example illustrates how to handle the printEnd event.

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" 
                   style="height:600px" 
                   documentPath="https://cdn.syncfusion.com/content/pdf/annotations.pdf"
                   printEnd="printEnded">
    </ejs-pdfviewer>
</div>

<script>
    function printEnded(args) {
        console.log('Printed File Name: ' + args.fileName);
    }
</script>
<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" 
                   style="height:600px" 
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/annotations.pdf"
                   printEnd="printEnded">
    </ejs-pdfviewer>
</div>

<script>
    function printEnded(args) {
        console.log('Printed File Name: ' + args.fileName);
    }
</script>

See also