diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 635669582..ad923f1ca 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1519,7 +1519,15 @@
  • Events
    • -
  • Print
    • +
  • Print + +
  • Download
  • Event
  • Text Selection
    • diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/enable-print-rotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/enable-print-rotation.md new file mode 100644 index 000000000..268b12eb3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/enable-print-rotation.md @@ -0,0 +1,55 @@ +--- +layout: post +title: Enable Print Rotation in TypeScript PDF Viewer | Syncfusion +description: Learn how to enable print rotation for landscape documents in the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Enable print rotation in the PDF Viewer + +Set the `enablePrintRotation` property to control whether landscape pages are rotated automatically to fit the paper orientation. Keep it enabled to minimize clipping, or disable it to preserve the original orientation. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib", + enablePrintRotation: true, +}); +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', + enablePrintRotation: true, +}); +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See Also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Print modes](./print-modes) +- [Print events](./events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/events.md new file mode 100644 index 000000000..553fefadf --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/events.md @@ -0,0 +1,115 @@ +--- +layout: post +title: Print Events in TypeScript PDF Viewer | Syncfusion +description: Learn how to configure print events and track usage and implements workflows in the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print events in Typescript PDF Viewer + +Subscribe to print life cycle events to track usage and implement custom workflows. + +| Name | Description | +|--------------|-------------| +| `printStart` | Raised when a print action begins. Use the event to log activity or cancel printing. | +| `printEnd` | Raised after a print action completes. Use the event to notify users or clean up resources. | + +## printStart event +The [`printStart`](https://ej2.syncfusion.com/documentation/api/pdfviewer#printstart) event runs when printing starts from the toolbar or from code. Use it to validate prerequisites or cancel the action. + +### Event arguments +Review [`PrintStartEventArgs`](https://ej2.syncfusion.com/documentation/api/pdfviewer/printStartEventArgs) for details such as `fileName` and the `cancel` option. + +The following example logs the file that is being printed and shows how to cancel the operation. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, PrintStartEventArgs, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib", + printStart: (args: PrintStartEventArgs) => { + console.log('Print action has started for file: ' + args.fileName); + // To cancel the print action + // args.cancel = true; + } +}); +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, PrintStartEventArgs, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', + printStart: (args: PrintStartEventArgs) => { + console.log('Print action has started for file: ' + args.fileName); + // To cancel the print action + // args.cancel = true; + } +}); +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +## printEnd event +The [`printEnd`](https://ej2.syncfusion.com/documentation/api/pdfviewer#printend) event triggers after printing completes. Use it to finalize analytics or inform users that printing finished. + +### Event arguments +See [`PrintEndEventArgs`](https://ej2.syncfusion.com/documentation/api/pdfviewer/printEndEventArgs) for available values such as `fileName`. + +The following example logs the printed file name. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, PrintEndEventArgs, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib", + printEnd: (args: PrintEndEventArgs) => { + console.log('Printed File Name: ' + args.fileName); + } +}); +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, PrintEndEventArgs, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', + printEnd: (args: PrintEndEventArgs) => { + console.log('Printed File Name: ' + args.fileName); + } +}); +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +## See Also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Enable print rotation](./enable-print-rotation) +- [Print modes](./print-modes) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/overview.md new file mode 100644 index 000000000..c7d338beb --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/overview.md @@ -0,0 +1,125 @@ +--- +layout: post +title: Print Overview in TypeScript PDF Viewer | Syncfusion +description: Learn how to enable, monitor and customize printing in the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print Overview in TypeScript PDF Viewer Control + +The TypeScript PDF Viewer includes built‑in printing via the toolbar and APIs so you can control how documents are printed and monitor the process. + +Select **Print** in the built-in toolbar to open the browser print dialog. + +![Print](../images/print.png) + +## Enable or Disable Print in TypeScript PDF Viewer + +The Syncfusion TypeScript PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the `enablePrint` property. + +The following TypeScript examples render the PDF Viewer with printing enabled in standalone and server-backed applications. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"}); +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'}); +pdfviewer.appendTo('#PdfViewer'); + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); + +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +## Print programmatically in Typescript PDF Viewer + +To start printing from code, call the `print.print()` method after loading a document. This approach is useful when you need to wire up custom UI or initiate printing automatically. + +```html + +``` + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +pdfviewer.appendTo('#PdfViewer'); +//print on button click +const printButton = document.getElementById('print'); +if (printButton) { + printButton.onclick = function () { + pdfviewer.print.print(); + } +} + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' +}); +pdfviewer.appendTo('#PdfViewer'); +//print on button click +const printButton = document.getElementById('print'); +if (printButton) { + printButton.onclick = function () { + pdfviewer.print.print(); + } +} + +{% endhighlight %} +{% endtabs %} + +## Key capabilities: + +- Enable or disable printing with the enablePrint property +- Start printing from UI (toolbar Print) or programmatically using print.print() +- Control output quality with the printScaleFactor property (0.5–5) +- Auto‑rotate pages during print using enablePrintRotation +- Choose where printing happens with printMode (Default or NewWindow) +- Track the life cycle with printStart and printEnd events + +[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See Also + +- [Print quality](./print-quality) +- [Enable print rotation](./enable-print-rotation) +- [Print modes](./print-modes) +- [Print events](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.md new file mode 100644 index 000000000..382267699 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.md @@ -0,0 +1,62 @@ +--- +layout: post +title: Print Modes in TypeScript PDF Viewer | Syncfusion +description: Learn how to configure print modes for PDF Documents in the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print modes in the PDF Viewer + +Use the `printMode` property to choose 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 or tab, which can help with browser pop-up policies. + +N> Browser pop-up blockers must allow new windows or tabs when you use `pdfviewer.printMode ="NewWindow";`. + +The following example shows how to set the print mode. +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer, PrintMode } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib", +}); +pdfviewer.printMode ="NewWindow"; +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer, PrintMode } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', +}); +pdfviewer.printMode ="NewWindow"; +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See Also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Enable print rotation](./enable-print-rotation) +- [Print events](./events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-quality.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-quality.md new file mode 100644 index 000000000..ec0df6c44 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-quality.md @@ -0,0 +1,60 @@ +--- +layout: post +title: Customize Print Quality in TypeScript PDF Viewer | Syncfusion +description: Learn how to customize print quality for PDF Documents in the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Customize print quality using the printScaleFactor API + +The PDF Viewer allows you to adjust the print rendering quality by setting the [printScaleFactor](https://ej2.syncfusion.com/documentation/api/pdfviewer#printScaleFactor) property. Valid values range from 0.5 to 5. Higher values produce sharper output but also increase rendering time. + +By default, `printScaleFactor` is set to 1. + +N> Values outside the 0.5–5 range revert to the standard print quality (value 1). + +The following example demonstrates how to update the scale factor before printing. +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib", +}); +pdfviewer.printScaleFactor = 0.5; +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', +}); +pdfviewer.printScaleFactor = 0.5; +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/Customization%20%20of%20Print%20Quality) + +## See Also + +- [Overview](./overview) +- [Enable print rotation](./enable-print-rotation) +- [Print modes](./print-modes) +- [Print events](./events) \ No newline at end of file