Skip to content

Commit c9a60b9

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
996400: Print Revamp and Restructure
1 parent 9de3293 commit c9a60b9

5 files changed

Lines changed: 273 additions & 1 deletion

File tree

‎Document-Processing-toc.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1480,7 +1480,15 @@
14801480
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pages/events">Events</a></li>
14811481
</ul>
14821482
</li>
1483-
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print">Print</a></li>
1483+
<li>Print
1484+
<ul>
1485+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/overview">Overview</a></li>
1486+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/print-quality">Print Quality</a></li>
1487+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/enable-print-rotation">Enable Print Rotation</a></li>
1488+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/print-modes">Print Modes</a></li>
1489+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print/events">Events</a></li>
1490+
</ul>
1491+
</li>
14841492
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/download">Download</a></li>
14851493
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/event">Event</a></li>
14861494
<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: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
layout: post
3+
title: Enable Print Rotation in TypeScript PDF Viewer | Syncfusion
4+
description: Learn how to enable print rotation 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)

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
layout: post
3+
title: Print Events in TypeScript PDF Viewer | Syncfusion
4+
description: Learn about print events 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 lifecycle 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 %}

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.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: Print Modes in TypeScript PDF Viewer | Syncfusion
4+
description: Learn about print modes 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)

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
layout: post
3+
title: Customize Print Quality in TypeScript PDF Viewer | Syncfusion
4+
description: Learn how to customize print quality in the Syncfusion TypeScript PDF Viewer component.
5+
platform: document-processing
6+
control: Print
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Customize print quality using the printScaleFactor API
12+
13+
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.
14+
15+
By default, `printScaleFactor` is set to 1.
16+
17+
N> Values outside the 0.5–5 range revert to the standard print quality (value 1).
18+
19+
The following example demonstrates how to update the scale factor before printing.
20+
{% tabs %}
21+
{% highlight ts tabtitle="Standalone" %}
22+
23+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
24+
25+
// Inject required modules
26+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
27+
28+
const pdfviewer: PdfViewer = new PdfViewer({
29+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
30+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
31+
});
32+
pdfviewer.printScaleFactor = 0.5;
33+
pdfviewer.appendTo('#PdfViewer');
34+
35+
{% endhighlight %}
36+
{% highlight ts tabtitle="Server-Backed" %}
37+
38+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
39+
40+
// Inject required modules
41+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
42+
43+
const pdfviewer: PdfViewer = new PdfViewer({
44+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
45+
serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/',
46+
});
47+
pdfviewer.printScaleFactor = 0.5;
48+
pdfviewer.appendTo('#PdfViewer');
49+
50+
{% endhighlight %}
51+
{% endtabs %}
52+
53+
[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/Customization%20%20of%20Print%20Quality)

0 commit comments

Comments
 (0)