From d3a5caf8596c1e9494e9d50c28d36e693e820423 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 25 Jun 2026 10:41:43 +0530 Subject: [PATCH 1/2] 1004886: Print Restructure and Revamp in Vue PDF Viewer --- Document-Processing-toc.html | 9 +- .../vue/print/enable-print-rotation.md | 110 ++++++++++ .../PDF/PDF-Viewer/vue/print/events.md | 200 ++++++++++++++++++ .../PDF/PDF-Viewer/vue/print/overview.md | 197 +++++++++++++++++ .../PDF/PDF-Viewer/vue/print/print-modes.md | 121 +++++++++++ .../PDF/PDF-Viewer/vue/print/print-quality.md | 124 +++++++++++ 6 files changed, 760 insertions(+), 1 deletion(-) create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/print/enable-print-rotation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/print/events.md create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/print/overview.md create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/print/print-modes.md create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/print/print-quality.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 1e6f96bc0b..4af3c66639 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1773,7 +1773,14 @@
  • Events
    • -
  • Print
    • +
  • Print + +
  • Download
  • Events
  • Text Selection
    • diff --git a/Document-Processing/PDF/PDF-Viewer/vue/print/enable-print-rotation.md b/Document-Processing/PDF/PDF-Viewer/vue/print/enable-print-rotation.md new file mode 100644 index 0000000000..b171f911d0 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/print/enable-print-rotation.md @@ -0,0 +1,110 @@ +--- +layout: post +title: Enable Print Rotation in Vue PDF Viewer | Syncfusion +description: Learn how to enable print rotation for landscape documents in the Syncfusion Vue PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Enable print rotation in Vue PDF Viewer + +This guide shows how to enable automatic rotation of landscape pages during printing so they match the paper orientation and reduce clipping. Use [`enablePrintRotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableprintrotation) when printing documents that include landscape pages and you want them rotated to match the printer paper orientation. + +## Prerequisites + +- The [`Print`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/print) module must be injected into [`PdfViewerComponent`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer). + +## Steps to enable print rotation + +1. Inject the required modules (including [`Print`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/print)) into [`PdfViewerComponent`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer). +2. Set [`enablePrintRotation={true}`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableprintrotation) in the PDF Viewer during initialization. + +## Example + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +![Print rotation demo showing landscape pages rotated for printing](../../javascript-es6/images/print-rotate.gif) + +[View sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) + +## Troubleshooting + +- If you need to preserve original page orientation for archival printing, set [`enablePrintRotation: false`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableprintrotation). +- Confirm that injected modules include [`Print`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/print) or the property will have no effect. + +## See also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Print modes](./print-modes) +- [Print events](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/print/events.md b/Document-Processing/PDF/PDF-Viewer/vue/print/events.md new file mode 100644 index 0000000000..1e6807f66a --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/print/events.md @@ -0,0 +1,200 @@ +--- +layout: post +title: Print Events in Vue PDF Viewer | Syncfusion +description: Learn how to configure print events and track usage and implements workflows in the Syncfusion Vue PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print events in Vue PDF Viewer + +This page lists each event emitted by the Vue PDF Viewer's [`Print`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/print) feature, the argument schema, and the minimal behavior notes needed for implementation. + +## Events + +| Name | Description | +|--------------|-------------| +| [`printStart`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printstart) | Raised when a print action begins. Use the event to log activity or cancel printing. | +| [`printEnd`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printend) | Raised after a print action completes. Use the event to notify users or clean up resources. | + +### `printStart` + +This event is emitted when printing is initiated by toolbar or through programmatic API. Use to validate prerequisites, record analytics, or cancel printing. + +**Arguments** - ([`PrintStartEventArgs`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printstarteventargs)): + +- `fileName` - The document file name being printed. +- `cancel` - Default: `false`. Set to `true` to cancel the print operation. + +Setting `args.cancel = true` prevents the client-side print flow; for server-backed printing it prevents the service request that produces print output. Find the code example [here](../security/restricting-download-and-print#3-block-print-with-the-printstart-event) + +**Minimal usage example:** + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### `printEnd` + +This event is emitted after the printing completes. Use to finalize analytics, clear temporary state, or notify users. + +Arguments - ([`PrintEndEventArgs`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printendeventargs)): + +- `fileName` - The printed document name. + +**Minimal usage example:** + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## See also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Enable print rotation](./enable-print-rotation) +- [Print modes](./print-modes) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/print/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/print/overview.md new file mode 100644 index 0000000000..bd2283f5eb --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/print/overview.md @@ -0,0 +1,197 @@ +--- +layout: post +title: Print PDF in Vue PDF Viewer | Syncfusion +description: Enable and customize printing, configure print events, cancel print, and monitor printing in the Syncfusion Vue PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print PDF in Vue PDF Viewer + +The Vue PDF Viewer includes built-in printing via the toolbar and APIs so users can control how documents are printed and monitor the process. + +Select **Print** in the built-in toolbar to open the browser print dialog. + +![Browser print dialog from PDF Viewer](../../javascript-es6/images/print.gif) + +## Enable or Disable Print in Vue PDF Viewer + +The Syncfusion Vue 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`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableprint) property (`true` enables printing; `false` disables it). + +The following Vue examples render the PDF Viewer with printing disabled. + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## Print programmatically in Vue PDF Viewer + +To start printing from code, call the [`pdfviewer.print.print()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/print#print-1) method after the document is fully loaded. This approach is useful when wiring up custom UI or initiating printing automatically; calling print before the document finishes loading can result in no output or an empty print dialog. + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## Key capabilities + +- Enable or disable printing with the [`enablePrint`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableprint) property +- Start printing from UI (toolbar Print) or programmatically using [`print.print()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/print#print-1). +- Control output quality with the [`printScaleFactor`](./print-quality) property (0.5–5) +- Auto‑rotate pages during print using [`enablePrintRotation`](./enable-print-rotation) +- Choose where printing happens with [`printMode`](./print-modes) (Default or NewWindow) +- Track the life cycle with [`printStart` and `printEnd` events](./events) + +## Troubleshooting + +- Ensure the [`resourceUrl`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourceurl) value matches the deployed `ej2-pdfviewer-lib` version. +- Calling [`print()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/print#print-1) launches the browser print dialog; behavior varies by browser and may be affected by popup blockers or browser settings. + +[View Sample in GitHub](https://github.com/SyncfusionExamples/vue-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/vue/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/vue/print/print-modes.md new file mode 100644 index 0000000000..ec77674c79 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/print/print-modes.md @@ -0,0 +1,121 @@ +--- +layout: post +title: Print Modes in Vue PDF Viewer | Syncfusion +description: Learn how to configure print modes for PDF Documents in the Syncfusion Vue PDF Viewer component and more. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print Modes in the Vue PDF Viewer + +This guide shows how to set the PDF Viewer [`printMode`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printmode) so PDFs print from the current window or from a new window/tab. + +## Prerequisites + +- A Vue app with the Syncfusion PDF Viewer and [`Print`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/print) module injected. + +## Steps to set print mode + +**Step 1:** Decide which [`printMode`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printmode) you need: + - `Default` — print from the same browser window. + - `NewWindow` — print from a new window or tab (may be blocked by pop-up blockers). + +**Step 2:** Set [`printMode`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printmode) during viewer initialization (recommended): + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +![Print in New Window](../../javascript-es6/images/print-newwindow.gif) + +**Step 3:** Print mode can also be changed at runtime after the viewer is created: + +```html +// switch to NewWindow at runtime +pdfviewer.ej2Instances.printMode = 'NewWindow'; +``` + +## Quick reference + +- `Default`: Print from the same window (default). +- `NewWindow`: Print from a new window or tab. + +N> Browser pop-up blockers must allow new windows or tabs when using `pdfviewer.ej2Instances.printMode = "NewWindow"`. + +[View live examples and samples on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) + +## See also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Enable print rotation](./enable-print-rotation) +- [Print events](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/print/print-quality.md b/Document-Processing/PDF/PDF-Viewer/vue/print/print-quality.md new file mode 100644 index 0000000000..e66df53b59 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/print/print-quality.md @@ -0,0 +1,124 @@ +--- +layout: post +title: Customize Print Quality in Vue PDF Viewer | Syncfusion +description: Learn how to customize print quality for PDF Documents in the Syncfusion Vue PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Customize Print Quality in Vue PDF Viewer + +This article shows a concise, task-oriented workflow to set and verify print quality for documents rendered by the Vue PDF Viewer by using the [`printScaleFactor`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printscalefactor) property. + +**Goal:** Set a suitable [`printScaleFactor`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printscalefactor) to improve printed output sharpness while balancing performance and memory use. + +## Steps + +### 1. Choose a target print quality. + +- Valid [`printScaleFactor`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printscalefactor) values: **0.5 – 5**. Higher values increase image sharpness and resource use. +- Default value: **1**. + +### 2. Set `printScaleFactor` during initialization + +It is recommended that you set the [`printScaleFactor`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printscalefactor) in the viewer options during initialization. + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### 3. Set `printScaleFactor` after instantiation + +As an alternative option, the [`printScaleFactor`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printscalefactor) can be dynamically changed during runtime + +{% highlight html %} +// Update printScaleFactor at runtime +pdfviewer.ej2Instances.printScaleFactor = 2; // increase print resolution for upcoming prints +{% endhighlight %} + +### 4. Verify output + +Use browser Print Preview or produce a printed/PDF copy to confirm sharpness and acceptable render time. + +## Notes + +- Values outside the supported range **0.5 – 5** will be ignored and fall back to the default (`1`). +- Increasing [`printScaleFactor`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printscalefactor) raises CPU, memory, and rendering time requirements. Test on target machines and documents before setting a higher factor. + +[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) + +## See Also + +- [Overview](./overview) +- [Enable print rotation](./enable-print-rotation) +- [Print modes](./print-modes) +- [Print events](./events) From 8eba275159f496e946aa2b45352614aa56f78fe9 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Thu, 25 Jun 2026 10:51:30 +0530 Subject: [PATCH 2/2] 100488: Resolved CI Failures --- .../PDF/PDF-Viewer/vue/print.md | 938 ------------------ .../PDF/PDF-Viewer/vue/print/print-quality.md | 2 +- 2 files changed, 1 insertion(+), 939 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/print.md diff --git a/Document-Processing/PDF/PDF-Viewer/vue/print.md b/Document-Processing/PDF/PDF-Viewer/vue/print.md deleted file mode 100644 index 84f0824a71..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/print.md +++ /dev/null @@ -1,938 +0,0 @@ ---- -layout: post -title: Print in Vue PDF Viewer | Syncfusion -description: Learn how to enable, customize, and monitor printing functionality in the Syncfusion Vue PDF Viewer component. -control: Print -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- -# Print in Vue PDF Viewer - -The print feature allows users to print PDF documents directly from the Vue PDF Viewer through the toolbar or programmatic methods. You can customize print behavior with scaling, rotation, and print mode options, and track print operations with lifecycle events. - -By default, printing is enabled through the built-in toolbar. Users can click the **Print** button in the toolbar to open the browser print dialog. - -![PDF Viewer print dialog preview](./images/print.png) -To start printing programmatically, call the `print.print()` method from your component logic: - -{% tabs %} -{% highlight html tabtitle="Composition API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Composition API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% endtabs %} - -## Customize print quality - -Use the [printScaleFactor](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#printScaleFactor) property to control print rendering quality. Higher values produce sharper output but increase rendering time. Valid range is 0.5 to 5 (default: 1). - -The following examples demonstrate print quality customization: - - -{% tabs %} -{% highlight html tabtitle="Composition API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Composition API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% endtabs %} - -[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to/Customization%20of%20PrintQuality) - -## 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 html tabtitle="Composition API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Composition API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% endtabs %} - -## 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 `PrintMode.NewWindow`. - -{% tabs %} -{% highlight html tabtitle="Composition API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Composition API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% endtabs %} - -## Print events - -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/vue/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/vue/documentation/api/pdfviewer/printStartEventArgs) for details such as `fileName` and the `cancel` option. - -The following examples log the file being printed and show how to cancel the operation. - -{% tabs %} -{% highlight html tabtitle="Composition API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Composition API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% endtabs %} - -### printEnd event - -The [`printEnd`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/pdfviewer/printEndEventArgs) for available values such as `fileName`. - -The following examples log the printed file name. - -{% tabs %} -{% highlight html tabtitle="Composition API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Standalone)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Composition API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (Server-Backed)" %} - - - - - -{% endhighlight %} -{% endtabs %} - -## See also - -* [Toolbar items](./toolbar) -* [Feature Modules](./feature-module) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/print/print-quality.md b/Document-Processing/PDF/PDF-Viewer/vue/print/print-quality.md index e66df53b59..9673cd7665 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/print/print-quality.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/print/print-quality.md @@ -1,7 +1,7 @@ --- layout: post title: Customize Print Quality in Vue PDF Viewer | Syncfusion -description: Learn how to customize print quality for PDF Documents in the Syncfusion Vue PDF Viewer component. +description: Learn here all about how to customize print quality for PDF Documents in the Syncfusion Vue PDF Viewer component. platform: document-processing control: Print documentation: ug