Skip to content

1045872-VUE Platform UG Changes #4414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vellaisamy5301 wants to merge 1 commit into
base: hotfix/hotfix-v34.2.2
Choose a base branch
from
Open

1045872-VUE Platform UG Changes #4414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions Document-Processing/Word/Word-Processor/vue/how-to/show-hide-spinner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ domainurl: ##DomainURL##

# Show hide spinner in Vue Document editor component

Using [`spinner`](https://ej2.syncfusion.com/documentation/spinner/getting-started#create-the-spinner-globally) component, you can show/hide spinner while opening document in [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor).
Using the [`spinner`](https://ej2.syncfusion.com/documentation/spinner/getting-started#create-the-spinner-globally) component, you can show or hide a spinner while opening a document in the [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor).

Example code snippet to show/hide spinner
Example code snippet to show or hide a spinner

```
```ts
// showSpinner() will make the spinner visible
showSpinner(document.getElementById('container'));

// hideSpinner() method used hide spinner
// hideSpinner() method used to hide the spinner
hideSpinner(document.getElementById('container'));
```

Expand All @@ -35,6 +35,6 @@ Refer to the following example.

{% previewsample "/document-processing/code-snippet/document-editor/vue/spinner-cs1" %}

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor//` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

>Note: In above example, we have used setInterval to hide spinner, just for demo purpose.
N> In the above example, we have used setInterval to hide the spinner, just for demo purposes.
22 changes: 11 additions & 11 deletions Document-Processing/Word/Word-Processor/vue/print.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ domainurl: ##DomainURL##

To print the document, use the [`print`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#print) method from [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) instance.

Refer to the following example for showing a document and print it.
Refer to the following example for showing a document and printing it.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -25,7 +25,7 @@ Refer to the following example for showing a document and print it.

{% previewsample "/document-processing/code-snippet/document-editor/vue/print-cs1" %}

Refer to the following example for creating a document and print it.
Refer to the following example for creating a document and printing it.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -40,9 +40,9 @@ Refer to the following example for creating a document and print it.

## Improve print quality

Document editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorSettingsModel#printdevicepixelratio) in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using printDevicePixelRatio API, you can increase the image quality based on your requirement.
The Document Editor provides an option to improve the print quality using [`printDevicePixelRatio`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorSettingsModel#printdevicepixelratio) in Document Editor settings. The Document Editor uses a canvas approach to render content. The canvas is then converted to an image and processed for print. Using the `printDevicePixelRatio` API, you can increase the image quality based on your requirement.

The following example code illustrates how to improve the print quality in Document editor container.
The following example code illustrates how to improve the print quality in the Document Editor container.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -60,7 +60,7 @@ import { provide } from 'vue';
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
const settings = { printDevicePixelRatio: 2 };

//Inject require modules.
//Inject required modules.
provide('DocumentEditorContainer', [Toolbar])

</script>
Expand Down Expand Up @@ -88,7 +88,7 @@ export default {
};
},
provide: {
//Inject require modules.
//Inject required modules.
DocumentEditorContainer: [Toolbar]
}
}
Expand All @@ -99,11 +99,11 @@ export default {

> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.

>Note: By default, printDevicePixelRatio value is 1.
N> By default, the `printDevicePixelRatio` value is 1.

## Print using window object

You can print the document in Document Editor by passing the window instance. This is useful to implement print in third party frameworks such as electron, where the window instance will not be available. Refer to the following example.
You can print the document in the Document Editor by passing the window instance. This is useful to implement print in third-party frameworks such as Electron, where the window instance will be available. Refer to the following example.

> `this.$refs.documenteditor.print(window)`;

Expand All @@ -114,7 +114,7 @@ Some of the print options cannot be configured using JavaScript. Refer to the fo
* [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1/)
* [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox/)

However, you can customize margins, paper, and layout options by modifying the section format properties using page setup dialog
However, you can customize margins, paper, and layout options by modifying the section format properties using the page setup dialog.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down Expand Up @@ -178,7 +178,7 @@ export default {
{% endhighlight %}
{% endtabs %}

By customizing margins, papers, and layouts, the layout of the document will be changed in Document Editor. To modify these options during print operation, serialize the document as SFDT using the [`serialize`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#serialize) method in Document Editor instance and open the SFDT data in another instance of Document Editor in separate window.
By customizing margins, papers, and layouts, the layout of the document will be changed in the Document Editor. To modify these options during the print operation, serialize the document as SFDT using the [`serialize`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#serialize) method in the Document Editor instance and open the SFDT data in another instance of the Document Editor in a separate window.

The following example shows how to customize layout options only for printing.

Expand All @@ -193,6 +193,6 @@ The following example shows how to customize layout options only for printing.

{% previewsample "/document-processing/code-snippet/document-editor/vue/print-cs3" %}

## Online Demo
## Online demo

Explore how to print Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/print.html).