Syncfusion Document Processing

https://help.syncfusion.com/document-processing/
Admin
Syncfusion Document Processing is a collection of .NET class libraries for creating, editing, and...
Tokens:11,404,465
Snippets:72,263
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Navigate to project and start development server

Source: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/setup-with-syncfusion-cli

If you selected 'no' for automatic setup, use these commands to navigate to your project, install dependencies, and start the development server. The app will run on http://localhost:5173 (or the next available port).

```bash
cd my-pdf-viewer-app
npm install
npm run dev
```

--------------------------------

### Command Line Installation Example

Source: https://help.syncfusion.com/document-processing/excel/excel-library/net/installation/offline-installer/how-to-install

Example command for silent installation. Replace 'x.x.x.x' with the Essential Studio version and the product unlock key with the actual key.

```text
"D:\Temp\syncfusionessentialexcel_x.x.x.x.exe" /Install silent /UNLOCKKEY:"product unlock key" /log "C:\Temp\EssentialStudio_Platform.log" /InstallPath:C:\Syncfusion\x.x.x.x /InstallSamples:true /InstallAssemblies:true /UninstallExistAssemblies:true /InstallToolbox:true
```

--------------------------------

### Install Syncfusion.DocIO.Net.Core package examples

Source: https://help.syncfusion.com/document-processing/nuget-packages

These examples show how to install a specific package or all packages from a package.config file. Use nuget.exe on Windows and mono nuget.exe on Mac/Linux.

```bash
#install specific package for Windows 
nuget.exe install “Syncfusion.DocIO.Net.Core"
```

```bash
#install all package which mention in package.config path for Windows 
nuget.exe install “C:\Users\SyncfusionApplication\package.config”
```

```bash
#install specific package for Mac and Linux 
mono nuget.exe install “Syncfusion.DocIO.Net.Core"
```

```bash
#install all package which mention in package.config path for Mac and Linux 
mono nuget.exe install “C:\Users\SyncfusionApplication\package.config”
```

--------------------------------

### Clone and install Essential JS 2 quickstart project

Source: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/use-local-script-and-style-references

Commands to clone the Essential JS 2 quickstart repository and install required npm packages. Run these in the terminal before setting up local resources.

```bash
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

```

--------------------------------

### Verify .NET SDK installation

Source: https://help.syncfusion.com/document-processing/PDF/PDF-Viewer/blazor/deployment

Run 'dotnet --info' to verify the installed SDK. The output should resemble the example shown in the documentation.

```bash
dotnet --info
```

--------------------------------

### Run the Angular project with npm install and ng serve

Source: https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started

Commands to install dependencies and start the development server for the created Angular application. Run these in the project directory.

```bash
cd syncfusion-angular-app
npm install
ng serve

```

--------------------------------

### Initialize document for PdfResetAction

Source: https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-action

Starts creating a PDF document and adding a page, which is the beginning of the reset action example. The code is incomplete in the source; it only shows the initial setup.

```csharp
using Syncfusion.Drawing;
using Syncfusion.Pdf;
using Syncfusion.Pdf.Graphics;
using Syncfusion.Pdf.Interactive;

//Create a PDF document
PdfDocument document = new PdfDocument();
//Add a new page
PdfPage page = document.Pages.Add();
```

--------------------------------

### Example output from interactive mode

Source: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/setup-with-syncfusion-cli

Shows the expected prompts and selections when running the CLI interactively. The output confirms the chosen configuration and whether to install dependencies and start the app.

```text
✓ Project name? ... my-pdf-viewer-app
✓ Choose Framework: » Angular 
✓ Choose Build Tool: » Webpack 
✓ Choose Language: » TypeScript 
✓ Choose Template: » PDF Viewer 
✓ Choose Theme: » Material3 
✓ Choose Style Format: » CSS 
✓ Would you like to integrate the Syncfusion MCP Server? ... no 
✓ Would you like to install Component Skills? ... no 
✓ Install dependencies and start app now? ... yes
```

--------------------------------

### Navigate to sample directory

Source: https://help.syncfusion.com/document-processing/powerpoint/powerpoint-library/net/open-and-save-powerpoint-presentation-in-google-app-engine

Change to the sample project directory.

```CLI
cd Open-and-save-PowerPoint-Presentation
```

--------------------------------

### Component tool: #sf_react_component

Source: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/depoyment-integration/agentic-builder

Use this tool to get API information and structure details for Syncfusion React components. The example integrates a tab component into an existing PDF Viewer setup.

```text
#sf_react_component Integrate a tab component in the existing PDF Viewer setup
```

--------------------------------

### Run the Angular PDF Viewer project

Source: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/setup-with-syncfusion-cli

Use these commands if you selected 'no' for automatic setup. Navigate to the project, install dependencies, and start the development server. The app runs on http://localhost:4200.

```bash
cd my-pdf-viewer-app
npm install
npm start
```

--------------------------------

### Navigate to sample directory

Source: https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-image/net/convert-powerpoint-to-image-in-google-app-engine

Run this command to navigate to the sample directory 'Convert-PPTX-to-image'.

```bash
cd Convert-PPTX-to-image
```

--------------------------------

### Add square measurement annotation (VB.NET) - setup

Source: https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-annotations

Starts the VB.NET example for adding a square measurement annotation. It creates a PDF document, adds a page, and defines the rectangle bounds for the annotation.

```vbnet
Imports System.Drawing
Imports Syncfusion.Pdf
Imports Syncfusion.Pdf.Interactive
Imports Syncfusion.Pdf.Graphics

'Creates a new PDF document
Dim document As New PdfDocument()
'Creates a new page
Dim page As PdfPage = document.Pages.Add()
Dim rect As New RectangleF(10, 100, 100, 100)
```

--------------------------------

### Get selection start and end offsets on selection change in ASP.NET Core DOCX Editor

Source: https://help.syncfusion.com/document-processing/word/word-processor/asp-net-core/how-to/move-selection-to-specific-position

Shows how to retrieve the start and end hierarchical indices of the current selection using `startOffset` and `endOffset`. The `selectionChange` event is triggered on selection changes in the document. The example is provided in CSHTML and uses the `DocumentEditorContainer` component.

```html
<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        // Event gets triggered on selection change in document
        container.selectionChange = function () {
          //Get the start index of current selection
          let startOffset = container.documentEditor.selection.startOffset;
          //Get the end index of current selection
          let endOffset = container.documentEditor.selection.endOffset;
        };
    }
</script>
```

--------------------------------

### Navigate to sample directory

Source: https://help.syncfusion.com/document-processing/excel/excel-library/net/create-read-edit-excel-files-in-google-app-engine

Changes directory to the 'Create Excel' sample folder.

```bash
cd Create\ Excel
```

--------------------------------

### Navigate to the ej2-quickstart folder

Source: https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es6/getting-started

Changes the current directory to the cloned quickstart project so subsequent steps run inside it.

```bash
cd ej2-quickstart
```

--------------------------------

### Define PDF Viewer in Razor view (Index.cshtml)

Source: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/how-to/configure-annotation-selector-setting

Razor view markup that creates a PDF Viewer instance with a sample document and the required resource URL. This is the second step after following the Getting Started guide.

```html
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" resourceUrl="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
```

--------------------------------

### Interactive CLI selections for Spreadsheet Editor project

Source: https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/vue-3-getting-started

Example interactive CLI session for creating a Vue + Vite project with the Syncfusion Spreadsheet Editor using the Composition API. The selections generate a predefined template; you can adjust language, theme, style format, MCP setup, skills installation, and dependency installation as needed.

```plaintext
√ Project name? ... my-project
√ Choose Framework: » Vue
√ Choose Language: » TypeScript
√ Choose Template: » Spreadsheet Editor
√ Choose Theme: » Tailwind3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no      
√ Install dependencies and start app now? ... no
```

--------------------------------

### Navigate to sample directory

Source: https://help.syncfusion.com/document-processing/excel/excel-library/net/loading-and-saving/loading-and-saving-excel-files-in-google-app-engine

Run this command to change to the sample directory named 'LoadingandSaving'.

```bash
cd LoadingandSaving
```

--------------------------------

### Setup Angular PDF Viewer and download with hidden annotations (PdfAnnotationFlag.noView)

Source: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/how-to/control-annotation-visibility

Complete Angular component that configures the PDF Viewer, adds annotation controls, and implements the save() method to hide annotations on download by setting the PdfAnnotationFlag.noView flag. The documentLoaded handler adds basic annotation examples (Highlight, Underline, Strikethrough) used as a starting point. Requires following the Syncfusion Angular PDF Viewer getting-started guide and using the specified CDN resource URL.

```typescript
import { Component, OnInit} from '@angular/core';
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  FormFieldsService,
  FormDesignerService,
  PrintService,
  StickyNotesSettings,
  InkAnnotationSettings,
  HandWrittenSignatureSettings,
  DisplayMode,
  CustomStampSettings,
  StampSettings,
  StandardBusinessStampItem,
  SignStampItem,
  DynamicStampItem,
  FreeTextSettings,
  HighlightSettings,
  UnderlineSettings,
  StrikethroughSettings,
  LineSettings,
  ArrowSettings,
  RectangleSettings,
  CircleSettings,
  PolygonSettings,
  VolumeSettings,
  RadiusSettings,
  AreaSettings,
  PerimeterSettings,
  DistanceSettings,
  LoadEventArgs,
  PdfViewerComponent,

} from '@syncfusion/ej2-angular-pdfviewer';

// Import PdfAnnotationFlag and PdfDocument from the Syncfusion PDF library.
import { PdfAnnotationFlag, PdfDocument, PdfPage } from '@syncfusion/ej2-pdf';

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <button (click)="save()" style="margin-bottom: 20px;">Download</button>
      <ejs-pdfviewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resourceUrl"
        (documentLoad)='documentLoaded($event)'
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    FormFieldsService,
    FormDesignerService,
    PrintService
  ]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/annotations-v1.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib';

  documentLoaded(e: LoadEventArgs): void {
    var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];

    //Code snippet to add basic annotations. You can also include other annotations as needed.
        viewer.annotation.addAnnotation("Highlight", {
            bounds: [{ x: 97, y: 610, width: 350, height: 14 }],
            pageNumber: 1
        } as HighlightSettings);
        viewer.annotation.addAnnotation("Underline", {
            bounds: [{ x: 97, y: 723, width: 353.5, height: 14 }],
            pageNumber: 1
        } as UnderlineSettings);
        viewer.annotation.addAnnotation("Strikethrough", {
            bounds: [{ x: 97, y: 836, width: 376.5, height: 14 }],
            pageNumber: 1
        } as StrikethroughSettings);
    }

ngOnInit(): void {

}
save() {
  // Get the PDF viewer instance from the DOM element
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];

  // Save the PDF document as a Blob
  viewer.saveAsBlob().then((blob: Blob) => {
    const reader = new FileReader();

    reader.onload = () => {
      // Convert Blob data to a Base64 encoded string
      let base64data = reader.result as string;

      // Extract the Base64 string from the Data URL
      const base64EncodedData = base64data.split('base64,')[1];

      // Create a PdfDocument instance with the Base64 data
      const document1 = new PdfDocument(base64EncodedData);

      // Iterate over each page and annotation to modify the annotation flags
      for (let i = 0; i < document1.pageCount; i++) {
        const page = document1.getPage(i);
        for (let j = 0; j < page.annotations.count; j++) {
          const annot = page.annotations.at(j);

          // Set the annotation flag to noView
          annot.flags |= PdfAnnotationFlag.noView;
        }
      }

      // Save the modified document as a Blob
      document1.saveAsBlob().then((modifiedBlob: { blobData: Blob }) => {
        const internalReader = new FileReader();

        internalReader.onload = () => {
          // Convert the modified Blob data to a Base64 encoded string
          const modifiedBase64 = internalReader.result as string;

          // Create a link to download the modified PDF
          const downloadLink = document.createElement('a');
          downloadLink.href = modifiedBase64;
          downloadLink.download = 'modified.pdf';
          downloadLink.click();
        };
      });
    };
  });
}
}
```

--------------------------------

### Navigate to sample directory

Source: https://help.syncfusion.com/document-processing/word/word-library/net/create-word-document-in-google-app-engine

Change to the Create-Word-Document sample directory.

```bash
cd Create-Word-Document
```

--------------------------------

### Navigate to sample directory

Source: https://help.syncfusion.com/document-processing/excel/conversions/excel-to-image/net/convert-excel-to-image-in-google-app-engine

Use this command to navigate to the sample application directory.

```bash
cd Convert-Excel-to-Image
```

--------------------------------

### TypeScript method to open thumbnail pane using openThumbnailPane()

Source: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/how-to/open-thumbnail

Method that retrieves the PDF Viewer instance and calls thumbnailViewModule.openThumbnailPane() to open the thumbnail pane. Requires a basic PDF Viewer sample created as per the getting started guide.

```typescript
openThumbnail() {
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  // Open Thumbnail pane.
  viewer.thumbnailViewModule.openThumbnailPane();
}
```

--------------------------------

### Run the project with npm commands

Source: https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started

Navigate to the project directory and run these commands to install dependencies and start the development server.

```bash
cd my-app
npm install
npm run dev
```

--------------------------------

### Run the application

Source: https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-image/net/convert-powerpoint-to-image-in-aws-linux-ec2

Starts the application, binding to all network interfaces on port 5000. Replace 'your-application.dll' with the actual DLL name.

```bash
dotnet your-application.dll --urls http://0.0.0.0:5000
```

--------------------------------

### Create a new Vue application

Source: https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/getting-started

Creates a new Vue project named 'quickstart' and navigates into it. When prompted, select 'Default ([Vue 2] babel, eslint)' to scaffold a Vue 2 project.

```bash
vue create quickstart
cd quickstart
```

--------------------------------

### Insert columns in Vue Spreadsheet (Composition API)

Source: https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/rows-and-columns

Composition API example for inserting columns in a Syncfusion Vue Spreadsheet. The template defines a spreadsheet with a data source starting at cell A2 and column widths, while the script setup imports the necessary components and initializes the spreadsheet ref and data source.

```html
<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :showFormulaBar="false" :showSheetTabs="false"
    :showRibbon="false">
    <e-sheets>
      <e-sheet>
        <e-ranges>
          <e-range :dataSource="dataSource" startCell="A2"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=90></e-column>
          <e-column :width=220></e-column>
          <e-column :width=90></e-column>
          <e-column :width=140></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet, getCellAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { data } from './data.js';

const spreadsheet = ref(null);
const dataSource = data;

```

--------------------------------

### Replace bookmark content with WordDocumentPart in Java using replaceContent

Source: https://help.syncfusion.com/document-processing/word/word-library/java/working-with-bookmarks

Replaces bookmark content using a WordDocumentPart obtained from a template document. This approach works when the bookmark start and end are in different sections. The example loads a template, gets its bookmark content as a WordDocumentPart, then replaces the content of a bookmark in another document with that part.

```java
//Loads the template document with bookmark "Northwind" whose start and end are preserved in different section.
WordDocument templateDocument = new WordDocument("Template.docx", FormatType.Docx);
//Creates the bookmark navigator instance to access the bookmark.
BookmarksNavigator bookmarkNavigator = new BookmarksNavigator(templateDocument);
//Moves the virtual cursor to the location before the end of the bookmark "Northwind".
bookmarkNavigator.moveToBookmark("Northwind");
//Gets the bookmark content as WordDocumentPart.
WordDocumentPart wordDocumentPart = bookmarkNavigator.getContent();
//Loads the Word document with bookmark NorthwindDB.
WordDocument document = new WordDocument("Bookmarks.docx", FormatType.Docx);
//Creates the bookmark navigator instance to access the bookmark.
bookmarkNavigator = new BookmarksNavigator(document);
//Moves the virtual cursor to the location before the end of the bookmark "NorthwindDB".
bookmarkNavigator.moveToBookmark("NorthwindDB");
//Replaces the bookmark content with word body part.
bookmarkNavigator.replaceContent(wordDocumentPart);
//Close the WordDocumentPart instance.
wordDocumentPart.close();
//Closes the template document.
templateDocument.close();
document.save("Result.docx", FormatType.Docx);
document.close();
```

--------------------------------

### Navigate to sample directory with cd

Source: https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-pdf/net/convert-powerpoint-to-pdf-in-google-app-engine

Navigates into the Convert-PPTX-to-PDF sample directory.

```bash
cd Convert-PPTX-to-PDF
```

--------------------------------

### Navigate to sample directory

Source: https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/convert-word-document-to-image-in-google-app-engine

Change directory to the sample folder 'Convert-Word-Document-to-Image'.

```bash
cd Convert-Word-Document-to-Image
```

--------------------------------

### Install Syncfusion.DocIO.Net.Core NuGet package

Source: https://help.syncfusion.com/document-processing/nuget-packages

Example commands to install the Syncfusion.DocIO.Net.Core package in the default project or a specified project named SyncfusionDemoApplication.

```powershell
#install specified package in default project
Install-Package Syncfusion.DocIO.Net.Core

#install specified package in specified project 
Install-Package Syncfusion.DocIO.Net.Core -ProjectName SyncfusionDemoApplication
```

--------------------------------

### List installed .NET runtimes

Source: https://help.syncfusion.com/document-processing/data-extraction/net/ocr-processor/amazon-linux-ec2-setup-guide

Finds the path of the installed .NET runtime version. Output will be similar to the example shown in the next step.

```BASH
dotnet --list-runtimes
```

--------------------------------

### Install dependencies from C# in Startup.cs (call InstallDependencies)

Source: https://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/convert-html-to-pdf-in-azure-app-service-linux

Include this code in the Configure method of Startup.cs to install dependency packages by running the shell script. It uses the shell file path and calls the InstallDependencies method.

```csharp
// Install the dependency packages for HTML to PDF conversion on Linux Azure App Service
string shellFilePath = System.IO.Path.Combine(env.ContentRootPath, "dependenciesInstall.sh");
InstallDependencies(shellFilePath);
```
Tokens:
Raw