Resource Base
Table of contents

Edit Viewer

Edit Viewer is used to edit the pages in document, such as, rotating, cropping, filtering, etc. as well as adjust the layout of the display.

const editViewer = new Dynamsoft.DDV.EditViewer({
    container: document.getElementById("viewer"),
editViewer.openDocument("docUid"); // Open a document which has pages

Edit pages


The method rotate() is used to rotate the pages in the edit viewer.

Use cases

  • Rotate the current page 90 degrees counterclockwise.

  • Rotate all pages 90 degrees clockwise.

      const pageCount = editViewer.getPageCount();


The method crop() is used to crop the pages. If the rectangle selection is exceeds the bounds of the page, it won’t take effect.

Use cases

  • Crop the current page with the specified rectangle.

      const rect = {
          left: 100,
          top: 100,
          width: 200,
          height: 200,
  • Crop all pages with the specfied rectangle.

      const pageCount = editViewer.getPageCount(); 
      const rect = {
          left: 100,
          top: 100,
          width: 200,
          height: 200,


Rotating and cropping operations can be undone and redone in the edit viewer by using undo() and redo().

// Undo

// Redo

Adjust display layout of pages

Zoom in/out

To zoom in or zoom out, the property zoom can help.

//Actual size
editViewer.zoom = 1;

//Twice the actual size
editViewer.zoom = 2; 

//10% the actual size
editViewer.zoom = 0.1;

Display mode

The pages can be displayed in continous scrolling mode or page by page mode. displayMode is used to switch the different display modes.

// Display the pages page by page
editViewer.displayMode = "single";

// Display the pages continuously
editViewer.displayMode = "continuous";

Fit mode

fitMode can help to change the fit mode of the viewer.

// Fit Width
editViewer.fitMode = "width";

// Fit Height
editViewer.fitMode = "height";

// Fit Window
editViewer.fitMode = "window";

// Actual Size
editViewer.fitMode = "actualSize";

Built-in Thumbnail

Each edit viewer has a built-in thumbnail, as you may know, an IBrowseViewer object represents the thumbnail object in edit viewer. When you create an editViewer instance, the editViewer.thumbnail object will be generated at meanwhile.

Use case

Show/hide thumbnail.

// Show thumbnail;

// Hide thumbnail

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest version
    Change +
    © 2003–2024 Dynamsoft. All rights reserved.
    Privacy Statement / Site Map / Home / Purchase / Support