Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Save document to One Drive in Angular Document editor control | Syncfusion
description: Learn about how to Save document to One Drive in Angular Document editor control of Syncfusion Essential JS 2 and more details.
title: Save document to OneDrive in Angular DOCX Editor | Syncfusion
description: Learn how to save a document to OneDrive in the Syncfusion Angular Document Editor of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Save document to One Drive
control: Save document to OneDrive
documentation: ug
domainurl: ##DomainURL##
---

# Save document to One Drive
# Save document to OneDrive in Angular Document Editor

To save a document to One Drive, you can follow the steps below
To save a document to OneDrive, you can follow the steps below.

**Step 1:** Create the Microsoft graph API.
**Step 1:** Create the Microsoft Graph API.

Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs.
You must create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs.

**Step 2:** Create a Simple [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) sample in angular
**Step 2:** Create a Simple Angular Document Editor sample in Angular

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in angular. This will give you a basic setup of the Document Editor component.
Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in Angular. This will give you a basic setup of the Document Editor component.

**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project

Expand All @@ -35,7 +35,7 @@ using Microsoft.Identity.Client;
using Helpers;
```

* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
* Add the following private fields and constructor parameters to the `DocumentEditorController` class. In the constructor, assign the values from the configuration to the corresponding fields.

```csharp
private IConfiguration _configuration;
Expand All @@ -54,14 +54,14 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
}
```

* Create the `SaveToOneDrive()` method to save the downloaded document to One Drive bucket
* Create the `SaveToOneDrive()` method to save the downloaded document to OneDrive.

```csharp
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToOneDrive")]
//Post action for downloading the document
//Post action for uploading the document to OneDrive

public void SaveToOneDrive(IFormCollection data)
{
Expand Down Expand Up @@ -115,7 +115,7 @@ private string GetValue(IFormCollection data, string key)
}
```

* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
* Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration.

```json
{
Expand All @@ -130,14 +130,13 @@ private string GetValue(IFormCollection data, string key)
"applApplicationIdicationId": "Your_Application_ID",
"FolderName": "Your_Folder_Name_To_Access_The_Files_In_Onedrive"
}

```

> Replace **Your_Tenant_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_Onedrive** with your actual tenant ID, application ID, and folder name.
N> Replace **Your_Tenant_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_OneDrive** with your actual tenant ID, application ID, and folder name.

**Step 4:** Modify the index File in the Document Editor sample

In the client-side, to export the document into blob the document using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#saveasblob) and sent to server-side for saving in One Drive.
On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/angular/documentation/api/document-editor#saveasblob) and send it to the server side for saving in OneDrive.

```typescript

Expand All @@ -149,7 +148,7 @@ import {
@Component({
selector: 'app-root',
// specifies the template string for the DocumentEditorContainer component
template: `<button ejs-button (click)="save()" >Save to One Drive</button><ejs-documenteditorcontainer #documenteditor_default serviceUrl="http://localhost:62870/api/documenteditor/" height="600px" style="display:block" (created)="onCreate()" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
template: `<button ejs-button (click)="save()" >Save to OneDrive</button><ejs-documenteditorcontainer #documenteditor_default serviceUrl="http://localhost:62870/api/documenteditor/" height="600px" style="display:block" (created)="onCreate()" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
providers: [ToolbarService],
})
export class AppComponent implements OnInit {
Expand All @@ -160,13 +159,13 @@ export class AppComponent implements OnInit {
public save(): void {
//Export the document as Blob object.
this.container.documentEditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
//Now, save the document where ever you want.
//Now, save the document wherever you want.
let formData: FormData = new FormData();
formData.append('documentName', this.container.documentEditor.documentName);
formData.append('file', exportedDocument);
/* tslint:disable */
let req = new XMLHttpRequest();
// Replace your running Url here
// Replace your running URL here
req.open(
'POST',
'http://localhost:62870/api/documenteditor/SaveToOneDrive',
Expand All @@ -175,7 +174,7 @@ export class AppComponent implements OnInit {
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand All @@ -185,7 +184,7 @@ export class AppComponent implements OnInit {
}
```

> The following NuGet packages are required to use the previous code example
N> The following NuGet packages are required to use the previous code example:
* **Microsoft.Identity.Client**
* **Microsoft.Graph**
* **Microsoft.Extensions.Configuration**
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Server side export in Angular Document editor component | Syncfusion
description: Learn here all about Server side export in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Server-side export in Angular DOCX Editor | Syncfusion
description: Learn here all about Server-side export in the Syncfusion Angular Document Editor of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Server side export
control: Server-side export
documentation: ug
domainurl: ##DomainURL##
---

# Server side export in Angular Document editor component
# Server-side export in Angular Document Editor

## SFDT to DOCX export

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports server-side export of **Syncfusion Document Text (.SFDT)** to Doc, DOCX, RTF, Txt, WordML, Html formats using server-side helper **Syncfusion.EJ2.DocumentEditor** available in ASP.NET Core & ASP.NET MVC platform in the below NuGet's.
Angular Document Editor supports server-side export of **Syncfusion Document Text (.sfdt)** to Doc, DOCX, RTF, Txt, WordML, HTML formats using server-side helper **Syncfusion.EJ2.DocumentEditor** available in ASP.NET Core & ASP.NET MVC platform in the NuGet packages below.

* [Syncfusion.EJ2.WordEditor.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core)
* [Syncfusion.EJ2.WordEditor.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc5)
* [Syncfusion.EJ2.WordEditor.AspNet.Mvc4](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc4)

Please refer the following code example.
Please refer to the following code example.

```csharp
//API controller for the conversion.
Expand All @@ -39,7 +39,7 @@ Please refer the following code example.
}
```

Please refer the client side example to serialize the sfdt and send to the server.
Please refer to the client-side example to serialize the SFDT and send it to the server.

```typescript
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
Expand All @@ -64,11 +64,11 @@ export class AppComponent {
http.open('POST', 'http://localhost:5000/api/documenteditor/ExportSFDT');
http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
http.responseType = 'json';
//Serialize the document content as sfdt.
//Serialize the document content as SFDT.
let sfdt: any = { content: this.documentEditor.serialize() };
http.send(JSON.stringify(sfdt));
};
}
```

> `DocumentEditor` object is available in `DocumentEditorContainer` component(DocumentEditor packaged with toolbar, statusbar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#documenteditor)
N> The `DocumentEditor` object is available in the `DocumentEditorContainer` component (DocumentEditor packaged with toolbar, status bar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#documenteditor).
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Scrolling zooming in Angular Document editor component | Syncfusion
description: Learn here all about Scrolling zooming in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Scrolling and zooming in Angular DOCX Editor | Syncfusion
description: Learn here all about Scrolling and zooming in the Syncfusion Angular Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Scrolling zooming
control: Scrolling zooming
documentation: ug
domainurl: ##DomainURL##
---

# Scrolling zooming in Angular Document editor component
# Scrolling and zooming in Angular Document Editor

The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) renders the document as page by page. You can scroll through the pages by mouse wheel or touch interactions. You can also scroll through the page by using scrollToPage() method of document editor instance. Refer to the following code example.
The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) renders the document page by page. You can scroll through the pages by mouse wheel or touch interactions. You can also scroll through the pages by using the `scrollToPage()` method of the document editor instance. Refer to the following code example.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -24,9 +24,9 @@ The [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-doc

{% previewsample "/document-processing/samples/document-editor/angular/find-replace-cs3" %}

> Calling this method brings the specified page into view but doesnt move selection. Hence this method will work by default. That is, it works even if selection is not enabled.
N> Calling this method brings the specified page into view but doesn't move selection. Hence this method will work by default. That is, it works even if selection is not enabled.

In case, if you wish to move the selection to any page in document editor and bring it into view, you can use goToPage() method of selection instance. Refer to the following code example.
If you wish to move the selection to any page in the document editor and bring it into view, you can use the `goToPage()` method of the selection instance. Refer to the following code example.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
Expand All @@ -42,23 +42,23 @@ In case, if you wish to move the selection to any page in document editor and br

## Zooming

You can scale the contents in document editor ranging from 10% to 500% of the actual size. You can achieve this using mouse or touch interactions. You can also use `zoomFactor` property of document editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example.
You can scale the contents in the document editor ranging from 10% to 500% of the actual size. You can achieve this using mouse or touch interactions. You can also use the `zoomFactor` property of the document editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example.

```typescript
this.documentEditor.zoomFactor = 3;
```

## Page Fit Type

Apart from specifying the zoom factor as value, the Document Editor provides option to specify page fit options such as fit to full page or fit to page width. You can set this option using fitPage method of document editor instance. Refer to the following code example.
Apart from specifying the zoom factor as a value, the Document Editor provides an option to specify page fit options such as fit to full page or fit to page width. You can set this option using the `fitPage` method of the document editor instance. Refer to the following code example.

```typescript
this.documentEditor.fitPage('Fit page width');
this.documentEditor.fitPage('FitPageWidth');
```

## Zoom option using UI

The following code example shows how to provide zoom options in document editor.
The following code example shows how to provide zoom options in the document editor.

```typescript
import { NgModule } from '@angular/core';
Expand Down
31 changes: 16 additions & 15 deletions Document-Processing/Word/Word-Processor/angular/section-format.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Section format in Angular Document editor component | Syncfusion
description: Learn here all about Section format in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
title: Section format in Angular DOCX Editor | Syncfusion
description: Learn here all about Section format in the Syncfusion Angular Document Editor of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Section format
control: Section format
documentation: ug
domainurl: ##DomainURL##
---

# Section format in Angular Document editor component
# Section format in Angular Document Editor

[Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) supports various section formatting such as page size, page margins, and more.

## Page size

You can get or set the size of a section at cursor position by using the following sample code.
You can get or set the size of a section at the cursor position by using the following sample code.

```typescript
this.documentEditor.selection.sectionFormat.pageWidth = 500;
Expand All @@ -25,7 +25,8 @@ You can change the orientation of the page by swapping the values of page width

## Page margins

Left and right page margin defines the gap between the document content from left and right side of the page respectively. Top and bottom page margins defines the gap between the document content from header and footer of the page respectively.
Left and right page margins define the gap between the document content from the left and right sides of the page respectively. Top and bottom page margins define the gap between the document content from the header and footer of the page respectively.

Refer to the following sample code.

```typescript
Expand All @@ -35,7 +36,7 @@ this.documentEditor.selection.sectionFormat.bottomMargin = 10;
this.documentEditor.selection.sectionFormat.topMargin = 10;
```

>Note: The maximum value of Margin is 1584, as per Microsoft Word application and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then Syncfusion Document editor will automatically reset as 1584.
N> The maximum value of margin is 1584, as per Microsoft Word application, and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then the Syncfusion Document Editor will automatically reset it to 1584.

## Header distance

Expand All @@ -57,7 +58,7 @@ this.documentEditor.selection.sectionFormat.footerDistance = 72;

You can define the number of columns, column width, and space between columns for the pages in a section.

The following code example illustrates how to define the two columns layout for the pages in a section.
The following code example illustrates how to define the two column layout for the pages in a section.

```typescript
let column: SelectionColumnFormat = new SelectionColumnFormat(this.container.documentEditor.selection);
Expand All @@ -73,25 +74,25 @@ Explore how to format Word documents with multiple columns using the Angular Doc

## Breaks

You can insert Column break
You can insert a column break.

The following code indicate that the text following the column break will begin in the next column
The following code indicates that the text following the column break will begin in the next column.

```typescript
this.container.documentEditor.editor.insertColumnBreak();
```

You can insert next page section break to start the new section on the next page
You can insert a next-page section break to start the new section on the next page.

The following code example illustrates how to insert a next page section break
The following code example illustrates how to insert a next-page section break.

```typescript
this.container.documentEditor.editor.insertSectionBreak(SectionBreakType.NewPage);
```

You can insert continuous section break to start the new section on the same page
You can insert a continuous section break to start the new section on the same page.

The following code example illustrates how to insert a continuous section break
The following code example illustrates how to insert a continuous section break.

```typescript
this.container.documentEditor.editor.insertSectionBreak(SectionBreakType.Continuous);
Expand All @@ -103,4 +104,4 @@ Explore how to apply section formatting in Word documents using the Angular Docu

## See Also

*[Page setup dialog](./dialog#page-setup-dialog)
* [Page setup dialog](./dialog#page-setup-dialog)
Loading