Skip to content

1045872-UG Vue Documentation Changes #4407

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 6 commits into
base: hotfix/hotfix-v34.2.2
Choose a base branch
from
Open

1045872-UG Vue Documentation Changes #4407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2825ca4
1045872-changed saving-documents/google-cloud-storage,saving-document…
Vellaisamy5301 Aug 14, 2026
6010c3a
Merge branch 'hotfix/hotfix-v34.2.2' into 1045872-vue7
Vellaisamy5301 Aug 14, 2026
2697353
1045872-changed url
Vellaisamy5301 Aug 14, 2026
c66f604
Merge branch '1045872-vue7' of https://github.com/syncfusion-content/…
Vellaisamy5301 Aug 14, 2026
cbd96fd
1045872-empty commit
Vellaisamy5301 Aug 14, 2026
2abbbdc
1045872-ressolved ci issue heading, title, spell check
Vellaisamy5301 Aug 14, 2026
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
37 changes: 25 additions & 12 deletions ...ent-Processing/Word/Word-Processor/vue/saving-documents/google-cloud-storage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Save document to Google Cloud Storage in Vue Document editor control | Syncfusion
title: Save to Google Cloud Storage in Vue DOCX Editor | Syncfusion
description: Learn about how to Save document to Google Cloud Storage in Vue Document editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Save document to Google Cloud Storage
documentation: ug
domainurl: ##DomainURL##
---

# Save document to Google Cloud Storage
# Save Documents to Google Cloud Storage in Vue DOCX Editor

To save a document to Google Cloud Storage, you can follow the steps below
To save a document to Google Cloud Storage, you can follow the steps below.

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

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in vue. 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 Vue. This will give you a basic setup of the Document Editor component.

**Step 2:** Create the `DocumentEditorController.cs` File in the Web Service Project

Expand All @@ -30,7 +30,7 @@ using Google.Cloud.Storage.V1;
using Google.Apis.Auth.OAuth2;
```

* 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 readonly object _storageClient
Expand Down Expand Up @@ -67,7 +67,7 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToGoogleCloud")]
//Post action for downloading the document
//Post action for uploading the document to Google Cloud Storage
public void SaveToGoogleCloud(IFormCollection data)
{
if (data.Files.Count == 0)
Expand All @@ -80,12 +80,25 @@ public void SaveToGoogleCloud(IFormCollection data)
string bucketName = _bucketName;

Stream stream = new MemoryStream();
file.CopyTo(stream);
try
{
file.CopyTo(stream);
stream.Position = 0;

// Upload the document to Google Cloud Storage
_storageClient.UploadObject(bucketName, result + "_downloaded.docx", null, stream);
// Upload the document to Google Cloud Storage
_storageClient.UploadObject(bucketName, result + "_downloaded.docx", null, stream);
}
catch (Exception ex)
{
// Log or handle the upload failure (e.g., invalid credentials, bucket not found, permission denied)
throw;
}
finally
{
stream.Dispose();
}

}
}

private string GetValue(IFormCollection data, string key)
{
Expand Down Expand Up @@ -116,13 +129,13 @@ private string GetValue(IFormCollection data, string key)
}
```

N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket
N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket.

N> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.

**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/vue/documentation/api/document-editor#saveasblob) and sent to server-side for saving in Google Cloud Storage.
On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#saveasblob) and send it to the server side for saving in Google Cloud Storage.

```typescript
<template>
Expand Down
28 changes: 14 additions & 14 deletions Document-Processing/Word/Word-Processor/vue/saving-documents/google-drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Save document to Google Drive in Vue Document editor control | Syncfusion
title: Save to Google Drive in Vue DOCX Editor | Syncfusion
description: Learn about how to Save document to Google Drive in Vue Document editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Save document to Google Drive
documentation: ug
domainurl: ##DomainURL##
---

# Save document to Google Drive
# Save Documents to Google Drive in Vue DOCX Editor

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

**Step 1** Set up Google Drive API
**Step 1:** Set up Google Drive API

You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk).

**Step 2:** Create a Simple Document Editor sample in Vue

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in vue. 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 Vue. 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 @@ -34,7 +34,7 @@ using Google.Apis.Drive.v3;
using Google.Apis.Util.Store;
```

* 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,18 +54,18 @@ public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryC
}
```

* Create the `SaveToGoogleDrive()` method to save the downloaded document to Google Drive bucket
* Create the `SaveToGoogleDrive()` method to save the downloaded document to Google Drive.

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

public void SaveToGoogleDrive(IFormCollection data)
{
if (data.Files.Count == 0)
if (data.Files.Count == 0)
return;

IFormFile file = data.Files[0];
Expand Down Expand Up @@ -122,7 +122,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 @@ -139,15 +139,15 @@ private string GetValue(IFormCollection data, string key)
}
```

N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file.
N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google Drive folder ID, your name for your application, and the path for the JSON file.

N> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`.
N> The **FolderId** is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`.

N> You must use a unique `Client_ID` from json file to interface your application with the Google Drive API in order to save document directly to Google Drive. This Client_ID will serve as the authentication key, allowing you to save files securely.

**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/vue/documentation/api/document-editor#saveasblob) and sent to server-side for saving in Google Drive.
On the client side, export the document to a blob using [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#saveasblob) and send it to the server side for saving in Google Drive.

```typescript
<template>
Expand Down Expand Up @@ -189,7 +189,7 @@ In the client-side, to export the document into blob the document using [`saveAs
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand Down
26 changes: 13 additions & 13 deletions Document-Processing/Word/Word-Processor/vue/saving-documents/one-drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@ documentation: ug
domainurl: ##DomainURL##
---

# Save document to One Drive
# Save Documents to OneDrive in Vue DOCX 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 Document Editor sample in Vue

Follow the instructions provided in this [link](../getting-started) to create a simple Document Editor sample in vue. 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 Vue. 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 @@ -133,11 +133,11 @@ private string GetValue(IFormCollection data, string key)

```

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.
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/vue/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/vue/documentation/api/document-editor#saveAsBlob) and send it to the server side for saving in OneDrive.

```typescript
<template>
Expand Down Expand Up @@ -179,7 +179,7 @@ In the client-side, to export the document into blob the document using [`saveAs
req.onreadystatechange = () => {
if (req.readyState === 4) {
if (req.status === 200 || req.status === 304) {
console.log('Saved sucessfully');
console.log('Saved successfully');
}
}
};
Expand All @@ -192,7 +192,7 @@ In the client-side, to export the document into blob the document using [`saveAs

```

N> 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
14 changes: 7 additions & 7 deletions Document-Processing/Word/Word-Processor/vue/saving-documents/server-side-export.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ domainurl: ##DomainURL##

## SFDT to DOCX export

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.
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.

```c#
```csharp
//API controller for the conversion.
[HttpPost]
public void ExportSFDT([FromBody]SaveParameter data)
Expand All @@ -38,7 +38,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 following client-side example to serialize the SFDT and send it to the server.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -57,7 +57,7 @@ import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtEx
import { provide, ref } from 'vue';

const documenteditor = ref(null);
//Inject require modules.
//Inject required modules.
provide('DocumentEditor', [SfdtExport, WordExport, Selection, Editor])

const exportBlob = function () {
Expand Down Expand Up @@ -99,7 +99,7 @@ export default {
};
},
provide: {
//Inject require modules.
//Inject required modules.
DocumentEditor: [SfdtExport, WordExport, Selection, Editor]
},
methods: {
Expand All @@ -123,4 +123,4 @@ export default {
{% endhighlight %}
{% endtabs %}

> DocumentEditor object is available in DocumentEditorContainer component(DocumentEditor packaged with toolbar, status bar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#documenteditor-code-classlanguage-textdocumenteditorcode/)
N> The DocumentEditor object is available in the DocumentEditorContainer component (DocumentEditor packaged with toolbar, status bar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#documenteditor-code-classlanguage-textdocumenteditorcode).