Skip to content

Commit c48aa9e

Browse files
AnanthaGokulaRamanAnanthaGokulaRaman
authored
Merge pull request #2026 from syncfusion-content/996400-print
996400: Print Restructure and Revamp
2 parents 1395124 + 23789fc commit c48aa9e

6 files changed

Lines changed: 426 additions & 1 deletion

File tree

‎Document-Processing-toc.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1519,7 +1519,15 @@
15191519
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pages/events">Events</a></li>
15201520
</ul>
15211521
</li>
1522-
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print">Print</a></li>
1522+
<li>Print
1523+
<ul>
1524+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/overview">Overview</a></li>
1525+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/print-quality">Print Quality</a></li>
1526+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/enable-print-rotation">Enable Print Rotation</a></li>
1527+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/print-modes">Print Modes</a></li>
1528+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/events">Events</a></li>
1529+
</ul>
1530+
</li>
15231531
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/download">Download</a></li>
15241532
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/event">Event</a></li>
15251533
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/textselection">Text Selection</a></li>

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/print/enable-print-rotation.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
layout: post
3+
title: Enable Print Rotation in TypeScript PDF Viewer | Syncfusion
4+
description: Learn how to enable print rotation for landscape documents in the Syncfusion TypeScript PDF Viewer component.
5+
platform: document-processing
6+
control: Print
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Enable print rotation in the PDF Viewer
12+
13+
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.
14+
15+
{% tabs %}
16+
{% highlight ts tabtitle="Standalone" %}
17+
18+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
19+
20+
// Inject required modules
21+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer);
22+
23+
const pdfviewer: PdfViewer = new PdfViewer({
24+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
25+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
26+
enablePrintRotation: true,
27+
});
28+
pdfviewer.appendTo('#PdfViewer');
29+
30+
{% endhighlight %}
31+
{% highlight ts tabtitle="Server-Backed" %}
32+
33+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
34+
35+
// Inject required modules
36+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer);
37+
38+
const pdfviewer: PdfViewer = new PdfViewer({
39+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
40+
serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/',
41+
enablePrintRotation: true,
42+
});
43+
pdfviewer.appendTo('#PdfViewer');
44+
45+
{% endhighlight %}
46+
{% endtabs %}
47+
48+
[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
49+
50+
## See Also
51+
52+
- [Overview](./overview)
53+
- [Print quality](./print-quality)
54+
- [Print modes](./print-modes)
55+
- [Print events](./events)

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/print/events.md‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
layout: post
3+
title: Print Events in TypeScript PDF Viewer | Syncfusion
4+
description: Learn how to configure print events and track usage and implements workflows in the Syncfusion TypeScript PDF Viewer component.
5+
platform: document-processing
6+
control: Print
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Print events in Typescript PDF Viewer
12+
13+
Subscribe to print life cycle events to track usage and implement custom workflows.
14+
15+
| Name | Description |
16+
|--------------|-------------|
17+
| `printStart` | Raised when a print action begins. Use the event to log activity or cancel printing. |
18+
| `printEnd` | Raised after a print action completes. Use the event to notify users or clean up resources. |
19+
20+
## printStart event
21+
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.
22+
23+
### Event arguments
24+
Review [`PrintStartEventArgs`](https://ej2.syncfusion.com/documentation/api/pdfviewer/printStartEventArgs) for details such as `fileName` and the `cancel` option.
25+
26+
The following example logs the file that is being printed and shows how to cancel the operation.
27+
28+
{% tabs %}
29+
{% highlight ts tabtitle="Standalone" %}
30+
31+
import { PdfViewer, PrintStartEventArgs, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
32+
33+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
34+
35+
let pdfviewer: PdfViewer = new PdfViewer({
36+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
37+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
38+
printStart: (args: PrintStartEventArgs) => {
39+
console.log('Print action has started for file: ' + args.fileName);
40+
// To cancel the print action
41+
// args.cancel = true;
42+
}
43+
});
44+
pdfviewer.appendTo('#PdfViewer');
45+
46+
{% endhighlight %}
47+
{% highlight ts tabtitle="Server-Backed" %}
48+
49+
import { PdfViewer, PrintStartEventArgs, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
50+
51+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
52+
53+
let pdfviewer: PdfViewer = new PdfViewer({
54+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
55+
serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/',
56+
printStart: (args: PrintStartEventArgs) => {
57+
console.log('Print action has started for file: ' + args.fileName);
58+
// To cancel the print action
59+
// args.cancel = true;
60+
}
61+
});
62+
pdfviewer.appendTo('#PdfViewer');
63+
64+
{% endhighlight %}
65+
{% endtabs %}
66+
67+
## printEnd event
68+
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.
69+
70+
### Event arguments
71+
See [`PrintEndEventArgs`](https://ej2.syncfusion.com/documentation/api/pdfviewer/printEndEventArgs) for available values such as `fileName`.
72+
73+
The following example logs the printed file name.
74+
75+
{% tabs %}
76+
{% highlight ts tabtitle="Standalone" %}
77+
78+
import { PdfViewer, PrintEndEventArgs, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
79+
80+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
81+
82+
let pdfviewer: PdfViewer = new PdfViewer({
83+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
84+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
85+
printEnd: (args: PrintEndEventArgs) => {
86+
console.log('Printed File Name: ' + args.fileName);
87+
}
88+
});
89+
pdfviewer.appendTo('#PdfViewer');
90+
91+
{% endhighlight %}
92+
{% highlight ts tabtitle="Server-Backed" %}
93+
94+
import { PdfViewer, PrintEndEventArgs, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer';
95+
96+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
97+
98+
let pdfviewer: PdfViewer = new PdfViewer({
99+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
100+
serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/',
101+
printEnd: (args: PrintEndEventArgs) => {
102+
console.log('Printed File Name: ' + args.fileName);
103+
}
104+
});
105+
pdfviewer.appendTo('#PdfViewer');
106+
107+
{% endhighlight %}
108+
{% endtabs %}
109+
110+
## See Also
111+
112+
- [Overview](./overview)
113+
- [Print quality](./print-quality)
114+
- [Enable print rotation](./enable-print-rotation)
115+
- [Print modes](./print-modes)

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/print/overview.md‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
layout: post
3+
title: Print Overview in TypeScript PDF Viewer | Syncfusion
4+
description: Learn how to enable, monitor and customize printing in the Syncfusion TypeScript PDF Viewer component.
5+
platform: document-processing
6+
control: Print
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Print Overview in TypeScript PDF Viewer Control
12+
13+
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.
14+
15+
Select **Print** in the built-in toolbar to open the browser print dialog.
16+
17+
![Print](../images/print.png)
18+
19+
## Enable or Disable Print in TypeScript PDF Viewer
20+
21+
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.
22+
23+
The following TypeScript examples render the PDF Viewer with printing enabled in standalone and server-backed applications.
24+
25+
{% tabs %}
26+
{% highlight ts tabtitle="Standalone" %}
27+
28+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
29+
30+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
31+
32+
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"});
33+
pdfviewer.appendTo('#PdfViewer');
34+
35+
{% endhighlight %}
36+
{% highlight ts tabtitle="Server-Backed" %}
37+
38+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
39+
40+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
41+
42+
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/'});
43+
pdfviewer.appendTo('#PdfViewer');
44+
45+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
46+
47+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
48+
49+
let pdfviewer: PdfViewer = new PdfViewer({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
50+
51+
pdfviewer.appendTo('#PdfViewer');
52+
53+
{% endhighlight %}
54+
{% endtabs %}
55+
56+
## Print programmatically in Typescript PDF Viewer
57+
58+
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.
59+
60+
```html
61+
<button id="print">Print PDF</button>
62+
```
63+
64+
{% tabs %}
65+
{% highlight ts tabtitle="Standalone" %}
66+
67+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
68+
69+
// Inject required modules
70+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
71+
72+
const pdfviewer: PdfViewer = new PdfViewer({
73+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
74+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
75+
});
76+
pdfviewer.appendTo('#PdfViewer');
77+
//print on button click
78+
const printButton = document.getElementById('print');
79+
if (printButton) {
80+
printButton.onclick = function () {
81+
pdfviewer.print.print();
82+
}
83+
}
84+
85+
{% endhighlight %}
86+
{% highlight ts tabtitle="Server-Backed" %}
87+
88+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
89+
90+
// Inject required modules
91+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
92+
93+
const pdfviewer: PdfViewer = new PdfViewer({
94+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
95+
serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
96+
});
97+
pdfviewer.appendTo('#PdfViewer');
98+
//print on button click
99+
const printButton = document.getElementById('print');
100+
if (printButton) {
101+
printButton.onclick = function () {
102+
pdfviewer.print.print();
103+
}
104+
}
105+
106+
{% endhighlight %}
107+
{% endtabs %}
108+
109+
## Key capabilities:
110+
111+
- Enable or disable printing with the enablePrint property
112+
- Start printing from UI (toolbar Print) or programmatically using print.print()
113+
- Control output quality with the printScaleFactor property (0.5–5)
114+
- Auto‑rotate pages during print using enablePrintRotation
115+
- Choose where printing happens with printMode (Default or NewWindow)
116+
- Track the life cycle with printStart and printEnd events
117+
118+
[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
119+
120+
## See Also
121+
122+
- [Print quality](./print-quality)
123+
- [Enable print rotation](./enable-print-rotation)
124+
- [Print modes](./print-modes)
125+
- [Print events](./events)

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
layout: post
3+
title: Print Modes in TypeScript PDF Viewer | Syncfusion
4+
description: Learn how to configure print modes for PDF Documents in the Syncfusion TypeScript PDF Viewer component.
5+
platform: document-processing
6+
control: Print
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Print modes in the PDF Viewer
12+
13+
Use the `printMode` property to choose how the document is printed.
14+
15+
The supported values are:
16+
* `Default`: Prints the document from the same window.
17+
* `NewWindow`: Prints the document from a new window or tab, which can help with browser pop-up policies.
18+
19+
N> Browser pop-up blockers must allow new windows or tabs when you use `pdfviewer.printMode ="NewWindow";`.
20+
21+
The following example shows how to set the print mode.
22+
{% tabs %}
23+
{% highlight ts tabtitle="Standalone" %}
24+
25+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer, PrintMode } from '@syncfusion/ej2-pdfviewer';
26+
27+
// Inject required modules
28+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer);
29+
30+
const pdfviewer: PdfViewer = new PdfViewer({
31+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
32+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
33+
});
34+
pdfviewer.printMode ="NewWindow";
35+
pdfviewer.appendTo('#PdfViewer');
36+
37+
{% endhighlight %}
38+
{% highlight ts tabtitle="Server-Backed" %}
39+
40+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer, PrintMode } from '@syncfusion/ej2-pdfviewer';
41+
42+
// Inject required modules
43+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer);
44+
45+
const pdfviewer: PdfViewer = new PdfViewer({
46+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
47+
serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/',
48+
});
49+
pdfviewer.printMode ="NewWindow";
50+
pdfviewer.appendTo('#PdfViewer');
51+
52+
{% endhighlight %}
53+
{% endtabs %}
54+
55+
[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
56+
57+
## See Also
58+
59+
- [Overview](./overview)
60+
- [Print quality](./print-quality)
61+
- [Enable print rotation](./enable-print-rotation)
62+
- [Print events](./events)

0 commit comments

Comments
 (0)