-
-
- - Getting Started +
- Getting Started
- with Standalone PDF Viewer
- with Server-Backed PDF Viewer @@ -1090,8 +1165,7 @@
- From Azure Active Directory
- - - Save PDF files +
- Save PDF files
- To AWS S3
- To Azure Blob Storage @@ -1104,13 +1178,29 @@
- Toolbar -
- Mobile Toolbar Interface
- Navigation +
- Toolbar Customization + + +
- Interactive PDF Navigation
+
-
+
- Pages +
- Bookmark +
- Page Thumbnail +
- Hyperlink Navigation +
- Magnification
- Accessibility
- Text Search -
- - Annotation +
- Annotation
- Interaction Mode -
- - Form Designer +
- Form Designer + +
- Form Filling +
- Organize Pages
+
-
+
- Overview +
- Programmatic Support +
- UI Interactions +
- Toolbar +
- Mobile View +
- Events
- Organize Pages
- Download +
- Event +
- Text Selection
- Globalization -
- - Server Deployment +
- Server Deployment -
- - How To +
- How To -
- - Troubleshooting +
- Troubleshooting
- Why Do I Have to Manually Copy Files from node_modules into My App
- Troubleshoot error 'cp' is not recognized as a command diff --git a/Document-Processing/Excel/Excel-Library/NET/Working-with-Formulas.md b/Document-Processing/Excel/Excel-Library/NET/Working-with-Formulas.md index 59cb65336..58e5472b1 100644 --- a/Document-Processing/Excel/Excel-Library/NET/Working-with-Formulas.md +++ b/Document-Processing/Excel/Excel-Library/NET/Working-with-Formulas.md @@ -90,12 +90,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/Formula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/Formula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -163,12 +159,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/Formula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/Formula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -261,12 +253,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/Formula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/Formula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -344,12 +332,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/Formula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/Formula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } //Output @@ -469,12 +453,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/Formula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/Formula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -537,12 +517,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/Formula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/Formula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -615,12 +591,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/IncrementalFormula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/IncrementalFormula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -686,12 +658,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/ExternalFormula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/ExternalFormula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -768,12 +736,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/CalculatedColumn.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/CalculatedColumn.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -2098,10 +2062,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) //Use the function. The expected result is 30 sheet.Range["A3"].Formula = "AddInFunction(10,20)"; - //Saving the workbook as stream - FileStream stream = new FileStream("AddIn.xlsx", FileMode.Create, FileAccess.ReadWrite); - workbook.SaveAs(stream); - stream.Dispose(); + //Saving the workbook + workbook.SaveAs(Path.GetFullPath("Output/AddIn.xlsx")); } {% endhighlight %} @@ -2251,12 +2213,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/Formula.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/Formula.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -2362,9 +2320,8 @@ Following code illustrates on how to ignore or set error indicators. using (ExcelEngine excelEngine = new ExcelEngine()) { IApplication application = excelEngine.Excel; - application.DefaultVersion = ExcelVersion.Xlsx; - FileStream inputStream = new FileStream(Path.GetFullPath(@"Data/InputTemplate.xlsx"), FileMode.Open, FileAccess.Read); - IWorkbook workbook = application.Workbooks.Open(inputStream); + application.DefaultVersion = ExcelVersion.Xlsx; + IWorkbook workbook = application.Workbooks.Open(Path.GetFullPath(@"Data/InputTemplate.xlsx")); IWorksheet sheet = workbook.Worksheets[0]; //Sets warning if number is entered as text. @@ -2372,12 +2329,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/FormulaAuditing.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/FormulaAuditing.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -2455,12 +2408,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/CalculationMode.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/CalculationMode.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} @@ -2551,12 +2500,8 @@ using (ExcelEngine excelEngine = new ExcelEngine()) #region Save //Saving the workbook - FileStream outputStream = new FileStream(Path.GetFullPath("Output/Iteration.xlsx"), FileMode.Create, FileAccess.Write); - workbook.SaveAs(outputStream); + workbook.SaveAs(Path.GetFullPath("Output/Iteration.xlsx")); #endregion - - //Dispose streams - outputStream.Dispose(); } {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Library/NET/PdfGrid.md b/Document-Processing/PDF/PDF-Library/NET/PdfGrid.md index 7d35bd92a..30ce59073 100644 --- a/Document-Processing/PDF/PDF-Library/NET/PdfGrid.md +++ b/Document-Processing/PDF/PDF-Library/NET/PdfGrid.md @@ -3645,7 +3645,6 @@ using Syncfusion.Pdf; using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -3685,7 +3684,6 @@ using Syncfusion.Pdf; using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using System.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -3725,7 +3723,6 @@ Imports Syncfusion.Pdf Imports Syncfusion.Pdf.Graphics Imports Syncfusion.Pdf.Grid Imports Syncfusion.Drawing -Imports System.Reflection.Metadata 'Create a new PDF document. Dim pdfDocument As New PdfDocument() @@ -3777,7 +3774,6 @@ using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using Syncfusion.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -3832,7 +3828,6 @@ using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using System.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -3886,7 +3881,6 @@ Imports Syncfusion.Pdf Imports Syncfusion.Pdf.Graphics Imports Syncfusion.Pdf.Grid Imports Syncfusion.Drawing -Imports System.Reflection.Metadata 'Create a new PDF document. Dim pdfDocument As PdfDocument = New PdfDocument() @@ -3948,7 +3942,6 @@ using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using Syncfusion.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -4012,7 +4005,6 @@ using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using System.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -4078,7 +4070,6 @@ Imports Syncfusion.Pdf Imports Syncfusion.Pdf.Graphics Imports Syncfusion.Pdf.Grid Imports Syncfusion.Drawing -Imports System.Reflection.Metadata 'Create a new PDF document. Dim pdfDocument As PdfDocument = New PdfDocument() @@ -4155,7 +4146,6 @@ using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using Syncfusion.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -4206,7 +4196,6 @@ using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using System.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -4257,7 +4246,6 @@ Imports Syncfusion.Pdf Imports Syncfusion.Pdf.Graphics Imports Syncfusion.Pdf.Grid Imports Syncfusion.Drawing -Imports System.Reflection.Metadata 'Create a new PDF document. Dim pdfDocument As PdfDocument = New PdfDocument() @@ -4320,7 +4308,6 @@ using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using Syncfusion.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -4389,7 +4376,6 @@ using Syncfusion.Pdf.Graphics; using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using System.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -4459,7 +4445,6 @@ Imports Syncfusion.Pdf Imports Syncfusion.Pdf.Graphics Imports Syncfusion.Pdf.Grid Imports Syncfusion.Drawing -Imports System.Reflection.Metadata 'Create a new PDF document. Dim pdfDocument As PdfDocument = New PdfDocument() @@ -4535,7 +4520,6 @@ The following code illustrates how to create the nested table in a PDF document using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using Syncfusion.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -4590,7 +4574,6 @@ pdfDocument.Close(true); using Syncfusion.Pdf.Grid; using Syncfusion.Pdf; using System.Drawing; -using System.Reflection.Metadata; //Create a new PDF document. PdfDocument pdfDocument = new PdfDocument(); @@ -4645,7 +4628,6 @@ pdfDocument.Close(true); Imports Syncfusion.Pdf Imports Syncfusion.Pdf.Grid Imports Syncfusion.Drawing -Imports System.Reflection.Metadata 'Create a new PDF document. Dim pdfDocument As PdfDocument = New PdfDocument() diff --git a/Document-Processing/PDF/PDF-Library/NET/Working-with-Annotations.md b/Document-Processing/PDF/PDF-Library/NET/Working-with-Annotations.md index ca56ac094..d2fb53343 100644 --- a/Document-Processing/PDF/PDF-Library/NET/Working-with-Annotations.md +++ b/Document-Processing/PDF/PDF-Library/NET/Working-with-Annotations.md @@ -5074,7 +5074,7 @@ The [PdfAnnotationIntent.FreeTextTypeWriter](https://help.syncfusion.com/cr/docu {% tabs %} -{% highlight c# tabtitle="C# [Cross-platform]" %} +{% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/PDF-Examples/master/Annotation/Setting-Annotation-Intent/.NET/Setting-Annotation-Intent/Program.cs" %} using Syncfusion.Drawing; using Syncfusion.Pdf; @@ -5192,7 +5192,7 @@ End Using {% endtabs %} -You can download a complete working sample from GitHub. +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PDF-Examples/tree/260329/Annotation/Setting-Annotation-Intent/.NET). ## Adding comments and review status to the PDF annotation diff --git a/Document-Processing/PDF/PDF-Library/NET/Working-with-HyperLinks.md b/Document-Processing/PDF/PDF-Library/NET/Working-with-HyperLinks.md index cce02b755..c1c7ea535 100644 --- a/Document-Processing/PDF/PDF-Library/NET/Working-with-HyperLinks.md +++ b/Document-Processing/PDF/PDF-Library/NET/Working-with-HyperLinks.md @@ -559,7 +559,7 @@ To open a file in relative path, the [PdfLaunchAction](https://help.syncfusion.c {% endhighlight %} -{% highlight c# tabtitle="C#" [Windows-specific] %} +{% highlight c# tabtitle="C# [Windows-specific]" %} using Syncfusion.Pdf; using Syncfusion.Pdf.Interactive; @@ -587,7 +587,7 @@ document.Close(); {% endhighlight %} -{% highlight vb.net tabtitle="VB.NET" [Windows-specific] %} +{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} Imports Syncfusion.Pdf Imports Syncfusion.Pdf.Interactive diff --git a/Document-Processing/PDF/PDF-Library/NET/Working-with-Images.md b/Document-Processing/PDF/PDF-Library/NET/Working-with-Images.md index 38ca465a8..c95dee8ba 100644 --- a/Document-Processing/PDF/PDF-Library/NET/Working-with-Images.md +++ b/Document-Processing/PDF/PDF-Library/NET/Working-with-Images.md @@ -723,6 +723,160 @@ doc.Close(True) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PDF-Examples/tree/master/Images/Add-transparancy-and-rotation-to-the-image/). +## Unit conversion in image position + +The [PdfUnitConverter](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Graphics.PdfUnitConvertor.html) class provides precise measurement conversion capabilities for PDF layouts. When positioning images in a PDF document, the converter translates pixel dimensions to PDF points, enabling millimeter-perfect placement and sizing. This ensures images maintain their aspect ratio while rendering at exact locations and filling designated spaces like rectangles. + +The code snippet to illustrate the same is given below. + +{% tabs %} + +{% highlight c# tabtitle="C# [Cross-platform]" %} + +using Syncfusion.Drawing; +using Syncfusion.Pdf; +using Syncfusion.Pdf.Graphics; + +//Create a new PDF document +using (PdfDocument document = new PdfDocument()) +{ + using (FileStream stream = new FileStream("Image.png", FileMode.Open, FileAccess.Read)) + { + //Load the image from the disk + PdfBitmap image = new PdfBitmap(stream); + + //Add the first section to the PDF document + PdfSection section = document.Sections.Add(); + + //Initialize unit converter + PdfUnitConverter converter = new PdfUnitConverter(); + + //Convert the image size from pixel to points + SizeF size = converter.ConvertFromPixels(image.PhysicalDimension, PdfGraphicsUnit.Point); + + //Set section size based on the image size + section.PageSettings.Size = size; + + // Set section orientation based on the image size (by default Portrait) + if (image.Width > image.Height) + section.PageSettings.Orientation = PdfPageOrientation.Landscape; + + //Set a margin for the section + section.PageSettings.Margins.All = 0; + + //Add a page to the section + PdfPage page = section.Pages.Add(); + + //Draw image + page.Graphics.DrawImage(image, 0, 0); + + //Save the document + document.Save("Output.pdf"); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="C# [Windows-specific]" %} + +using System.Drawing; +using Syncfusion.Pdf; +using Syncfusion.Pdf.Graphics; + +//Create a new PDF document +using (PdfDocument document = new PdfDocument()) +{ + using (FileStream stream = new FileStream("Image.png", FileMode.Open, FileAccess.Read)) + { + //Load the image from the disk + PdfBitmap image = new PdfBitmap(stream); + + //Add the first section to the PDF document + PdfSection section = document.Sections.Add(); + + //Initialize unit converter + PdfUnitConverter converter = new PdfUnitConverter(); + + //Convert the image size from pixel to points + SizeF size = converter.ConvertFromPixels(image.PhysicalDimension, PdfGraphicsUnit.Point); + + //Set section size based on the image size + section.PageSettings.Size = size; + + // Set section orientation based on the image size (by default Portrait) + if (image.Width > image.Height) + section.PageSettings.Orientation = PdfPageOrientation.Landscape; + + //Set a margin for the section + section.PageSettings.Margins.All = 0; + + //Add a page to the section + PdfPage page = section.Pages.Add(); + + //Draw image + page.Graphics.DrawImage(image, 0, 0); + + //Save the document + document.Save("Output.pdf"); + } +} + +{% endhighlight %} + +{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} + +Imports Syncfusion.Pdf +Imports Syncfusion.Pdf.Graphics +Imports System.Drawing + +Module Program + Sub Main() + ' Create a new PDF document + Using document As New PdfDocument() + + ' Load the image from disk + Using stream As New FileStream("Image.png", FileMode.Open, FileAccess.Read) + Dim image As New PdfBitmap(stream) + + ' Add a section to the PDF document + Dim section As PdfSection = document.Sections.Add() + + ' Initialize unit converter + Dim converter As New PdfUnitConverter() + + ' Convert image size from pixels to points + Dim size As SizeF = converter.ConvertFromPixels(image.PhysicalDimension, PdfGraphicsUnit.Point) + + ' Set section size based on image size + section.PageSettings.Size = size + + ' Set orientation to landscape if image is wider than tall + If image.Width > image.Height Then + section.PageSettings.Orientation = PdfPageOrientation.Landscape + End If + + ' Remove margins + section.PageSettings.Margins.All = 0 + + ' Add a page to the section + Dim page As PdfPage = section.Pages.Add() + + ' Draw the image at position (0, 0) + page.Graphics.DrawImage(image, 0, 0) + + ' Save the document + document.Save("Output.pdf") + End Using + End Using + End Sub +End Module + +{% endhighlight %} + +{% endtabs %} + +You can download a complete working sample from GitHub. + ## Converting multi page TIFF to PDF Multi frame TIFF image can be converted to PDF document. This can be done by accessing each frame of the multi frame TIFF image and rendering it in each page of the PDF document using [PdfBitmap](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Graphics.PdfBitmap.html) class. diff --git a/Document-Processing/PDF/PDF-Library/NET/Working-with-Text.md b/Document-Processing/PDF/PDF-Library/NET/Working-with-Text.md index 18c4d8516..da52807df 100644 --- a/Document-Processing/PDF/PDF-Library/NET/Working-with-Text.md +++ b/Document-Processing/PDF/PDF-Library/NET/Working-with-Text.md @@ -798,6 +798,166 @@ document.Close(True) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PDF-Examples/tree/master/Text/Measure-tilting-space-in-PDF/.NET). +## Unit conversion in text layout + +The [PdfUnitConverter](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Graphics.PdfUnitConvertor.html) class is used to accurately position and layout paragraph text within a PDF document. By converting measurements from inches to points, it ensures consistent margins and precise placement of content. + +This example demonstrates how to use converted units to accurately position and format paragraph text within a PDF document. + +{% tabs %} + +{% highlight c# tabtitle="C# [Cross-platform]" playgroundButtonLink="https://raw.githubusercontent.com/SyncfusionExamples/PDF-Examples/master/Text/Unit-conversion-in-text-layout/.NET/Unit-conversion-in-text-layout/Program.cs" %} + +using Syncfusion.Pdf; +using Syncfusion.Pdf.Graphics; +using Syncfusion.Drawing; + +// Create a new PDF document +using (PdfDocument document = new PdfDocument()) +{ + // Add a page + PdfPage page = document.Pages.Add(); + + // Initialize unit converter + PdfUnitConverter converter = new PdfUnitConverter(); + + // Convert margins from inches to points + float margin = converter.ConvertUnits(1f, PdfGraphicsUnit.Inch, PdfGraphicsUnit.Point); + + // Define text bounds to fill the page with margins + RectangleF textBounds = new RectangleF( + margin, + margin, + page.Graphics.ClientSize.Width - 2 * margin, + page.Graphics.ClientSize.Height - 2 * margin + ); + + // Define font and paragraph text + PdfFont font = new PdfStandardFont(PdfFontFamily.TimesRoman, 14); + + string paragraphText = "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Washington with 290 employees, several regional sales teams are located throughout their market base."; + + // Create text element and layout format + PdfTextElement textElement = new PdfTextElement(paragraphText, font, PdfBrushes.Black); + + PdfLayoutFormat layoutFormat = new PdfLayoutFormat + { + Break = PdfLayoutBreakType.FitPage, + Layout = PdfLayoutType.Paginate + }; + + // Draw the paragraph text within the bounds + textElement.Draw(page, textBounds, layoutFormat); + + //Save the document + document.Save("Output.pdf"); +} + +{% endhighlight %} + +{% highlight c# tabtitle="C# [Windows-specific]" %} + +using Syncfusion.Pdf; +using Syncfusion.Pdf.Graphics; +using System.Drawing; + +// Create a new PDF document +using (PdfDocument document = new PdfDocument()) +{ + // Add a page + PdfPage page = document.Pages.Add(); + + // Initialize unit converter + PdfUnitConverter converter = new PdfUnitConverter(); + + // Convert margins from inches to points + float margin = converter.ConvertUnits(1f, PdfGraphicsUnit.Inch, PdfGraphicsUnit.Point); + + // Define text bounds to fill the page with margins + RectangleF textBounds = new RectangleF( + margin, + margin, + page.Graphics.ClientSize.Width - 2 * margin, + page.Graphics.ClientSize.Height - 2 * margin + ); + + // Define font and paragraph text + PdfFont font = new PdfStandardFont(PdfFontFamily.TimesRoman, 14); + + string paragraphText = "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Washington with 290 employees, several regional sales teams are located throughout their market base."; + + // Create text element and layout format + PdfTextElement textElement = new PdfTextElement(paragraphText, font, PdfBrushes.Black); + + PdfLayoutFormat layoutFormat = new PdfLayoutFormat + { + Break = PdfLayoutBreakType.FitPage, + Layout = PdfLayoutType.Paginate + }; + + // Draw the paragraph text within the bounds + textElement.Draw(page, textBounds, layoutFormat); + + //Save the document + document.Save("Output.pdf"); +} + +{% endhighlight %} + +{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} + +Imports Syncfusion.Pdf +Imports Syncfusion.Pdf.Graphics +Imports System.Drawing + +Module Program + Sub Main() + ' Create a new PDF document + Using document As New PdfDocument() + + ' Add a page + Dim page As PdfPage = document.Pages.Add() + + ' Initialize unit converter + Dim converter As New PdfUnitConverter() + + ' Convert 1 inch margin to points + Dim margin As Single = converter.ConvertUnits(1.0F, PdfGraphicsUnit.Inch, PdfGraphicsUnit.Point) + + ' Define text bounds to fill the page with margins + Dim textBounds As New RectangleF( + margin, + margin, + page.Graphics.ClientSize.Width - 2 * margin, + page.Graphics.ClientSize.Height - 2 * margin + ) + + ' Define font and paragraph text + Dim font As PdfFont = New PdfStandardFont(PdfFontFamily.TimesRoman, 14) + Dim paragraphText As String = "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Washington with 290 employees, several regional sales teams are located throughout their market base." + + ' Create text element and layout format + Dim textElement As New PdfTextElement(paragraphText, font, PdfBrushes.Black) + Dim layoutFormat As New PdfLayoutFormat With { + .Break = PdfLayoutBreakType.FitPage, + .Layout = PdfLayoutType.Paginate + } + + text within the bounds + textElement.Draw(page, textBounds, layoutFormat) + + ' Save the document + document.Save("Output.pdf") + End Using + End Sub +End Module + +{% endhighlight %} + +{% endtabs %} + +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PDF-Examples/tree/master/Text/Unit-conversion-in-text-layout/.NET). + ## Embedding fonts and working with Unicode text To embed a font or display Unicode text in the document, the ‘Unicode’ Boolean parameter of the [PdfTrueTypeFont](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Graphics.PdfTrueTypeFont.html#Syncfusion_Pdf_Base__ctor) constructor has to be set to true. The following code illustrates the same. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/accessibility.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/accessibility.md index 6c9036a22..acec186ae 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/accessibility.md @@ -1,19 +1,18 @@ --- layout: post -title: Accessibility in Javascript Pdfviewer control | Syncfusion -description: Learn here all about accessibility in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Accessibility in JavaScript PDF Viewer | Syncfusion +description: Learn about accessibility in Syncfusion JavaScript PDF Viewer - WCAG 2.2, Section 508, ADA, and keyboard navigation support. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Accessibility in Syncfusion PDF Viewer components +# Accessibility in Syncfusion JavaScript ES5 PDF Viewer components -The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The PDF Viewer component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the PDF Viewer component is outlined below. +The accessibility compliance for the PDF Viewer component is summarized below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -39,30 +38,31 @@ The accessibility compliance for the PDF Viewer component is outlined below.
+Note: Mobile device support is marked as partial due to platform-level constraints on hover interactions, complex keyboard navigation, and screen reader capabilities that vary by device and browser. + ## WAI-ARIA attributes -[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript,and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the PDF Viewer component: +[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the PDF Viewer component: | Attributes | Purpose | | --- | --- | | `aria-disabled`| Indicates whether the PDF Viewer component is in a disabled state or not.| -| `aria-expanded`| Indicates whether the suggestion list has expanded or not. | -| `aria-readonly` | Indicates the readonly state of the PDF Viewer element. | -| `aria-haspopup` | Indicates whether the PDF Viewer input element has a suggestion list or not. | -| `aria-label` | Indicates the breadcrumb item text. | -| `aria-labelledby` | Provides a label for the PDF Viewer. Typically, the "aria-labelledby" attribute will contain the id of the element used as the PDF Viewer's title. | -| `aria-describedby` | This attribute points to the PDF Viewer element describing the one it's set on. | -| `aria-orientation` | Indicates whether the PDF Viewer element is oriented horizontally or vertically. | -| `aria-valuetext` | Returns the current text of the PDF Viewer. | -| `aria-valuemax` | Indicates the Maximum value of the PDF Viewer. | -| `aria-valuemin` | Indicates the Minimum value of the PDF Viewer. | -| `aria-valuenow` | Indicates the current value of the PDF Viewer. | -| `aria-controls` | Attribute is set to the button and it points to the corresponding content. | - +| `aria-expanded`| Indicates whether an element within the PDF Viewer is expanded or collapsed. | +| `aria-readonly` | Indicates the read-only state of a PDF Viewer element. | +| `aria-haspopup` | Indicates the presence of a popup, such as a context menu or submenu. | +| `aria-label` | Provides a human-readable label for interactive elements in the PDF Viewer. | +| `aria-labelledby` | Identifies the element(s) that label the PDF Viewer, often referencing the title element. | +| `aria-describedby` | Identifies the element(s) that describe the PDF Viewer or its controls. | +| `aria-orientation` | Indicates whether an element is oriented horizontally or vertically. | +| `aria-valuetext` | Provides a human-readable text alternative for the current value of a range-type element. | +| `aria-valuemax` | Specifies the maximum value of a range-type element. | +| `aria-valuemin` | Specifies the minimum value of a range-type element. | +| `aria-valuenow` | Specifies the current value of a range-type element. | +| `aria-controls` | Identifies the element(s) controlled by the current element. | ## Keyboard interaction -The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Message component. +The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component. | **Press (Windows)** |**Press (Macintosh)** | **To do this** | | --- | --- | --- | @@ -71,7 +71,7 @@ The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/ | CONTROL + Right Arrow (or) CONTROL + Down Arrow |COMMAND + Right Arrow (or) COMMAND + Down Arrow |Navigate to the last page | |Left Arrow | Left Arrow (or) Shift + Space |Navigate to the previous page| | Right Arrow | Right Arrow (or) Space | Navigate to the next page | -| CONTROL + G | COMMAND + G | Go To The Page| +| CONTROL + G | COMMAND + G | Go to a specific page| |Up Arrow |Up Arrow |Scroll up| | Down Arrow | Down Arrow | Scroll down| |||**Shortcuts for Zooming**| @@ -97,16 +97,7 @@ The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/ |Shift + H |Shift + H |Enable pan mode| |Shift + V |Shift + V |Enable text selection mode| -The current implementation of our PDF Viewer includes keyboard shortcuts for various functions like scrolling, zooming, text search, printing, and annotation deletion. - -To enhance user experience, we're adding additional keyboard shortcuts for actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements like outlines, annotations, bookmarks, and thumbnails. - -To support this, we're introducing a new class called **commandManager**, which handles custom commands triggered by specific key gestures. These custom commands will be defined by users and executed accordingly. - -The **commandManager** will have a parameter called Commands, which will hold the collection of custom keyboard commands specified by users. Each custom command will be represented by a KeyboardCommand class, containing the `command name` and associated `keyboard combination`. - -Additionally, we're introducing the **keyboardCustomCommands** parameter for the CommandManager, which will utilize the EventCallback to handle keyboard events and trigger appropriate methods when specific key combinations are pressed. - +The PDF Viewer supports custom keyboard commands through a `commandManager`, which handles commands triggered by specific key gestures. Custom commands are defined by users and executed accordingly. The `commandManager` includes a `keyboardCommand` collection to hold custom keyboard commands. Each custom command is represented by a `KeyboardCommand` entry, containing the command name and associated keyboard combination. Additionally, the `keyboardCustomCommands` parameter utilizes an event callback to handle keyboard events and trigger methods when specific key combinations are pressed. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -140,7 +131,7 @@ Additionally, we're introducing the **keyboardCustomCommands** parameter for the var viewer = new ej.pdfviewer.PdfViewer({ //Sets the document path for initial loading documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - resourceUrl: "https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib" + resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" }); //Inject the dependencies required to render the PDF Viewer ej.pdfviewer.PdfViewer.Inject( @@ -266,18 +257,15 @@ viewer.commandManager = { {% endhighlight %} {% endtabs %} -Each `keyboardCommand` object consists of a name property, specifying the `name` of the `custom command`, and a `gesture property`, defining the key gesture associated with the command. - -For example, the first command named `customCopy` is associated with the **G** key and requires both the **Shift** and **Alt** modifier keys to be pressed simultaneously. - -Additionally, there's an explanation of the key modifiers used in the gestures: +Each `keyboardCommand` object consists of a `name` property for the custom command and a `gesture` property defining the key gesture associated with the command. For example, the `customCopy` command is associated with the G key and requires both the Shift and Alt modifier keys to be pressed simultaneously. -* Ctrl corresponds to the Control key, represented by the value `1`. -* Alt corresponds to the Alt key, represented by the value `2`. -* Shift corresponds to the Shift key, represented by the value `4`. -* Meta corresponds to the Command key on macOS or the Windows key on Windows, represented by the value `8`. +Key modifiers used in gestures: +- Ctrl corresponds to the Control key (value `1`). +- Alt corresponds to the Alt key (value `2`). +- Shift corresponds to the Shift key (value `4`). +- Meta corresponds to the Command key on macOS or the Windows key on Windows (value `8`). -This setup allows users to perform custom actions within the PDF viewer by pressing specific key combinations, enhancing the user experience and providing more efficient navigation and interaction options. +This setup enables users to perform custom actions within the PDF Viewer by pressing specific key combinations, improving navigation and interaction efficiency. ## Ensuring accessibility diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md new file mode 100644 index 000000000..fb0528a9a --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md @@ -0,0 +1,900 @@ +--- +title: Annotations Events in JavaScript PDF Viewer control | Syncfusion +description: Learn here all about Annotations Events in Syncfusion JavaScript PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Annotations Events in JavaScript Pdf viewer control + +The PDF Viewer component triggers various events based on user interactions and changes in the component's state. These events can be used to perform actions when a specific event occurs. This section describes the events available in the PDF Viewer component. + +| Event | Description | +| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | +| [`annotationAdd`](#annotationadd) | Triggers when an annotation is added to a page in the PDF document. | +| [`annotationDoubleClick`](#annotationdoubleclick) | Triggers when an annotation is double-clicked. | +| [`annotationMouseLeave`](#annotationmouseleave) | Triggers when the mouse pointer moves away from an annotation object. | +| [`annotationMouseover`](#annotationmouseover) | Triggers when the mouse pointer moves over an annotation object. | +| [`annotationMove`](#annotationmove) | Triggers when an annotation is moved on a page in the PDF document. | +| [`annotationMoving`](#annotationmoving) | Triggers while an annotation is being moved. | +| [`annotationPropertiesChange`](#annotationpropertieschange) | Triggers when the properties of an annotation are modified on a PDF page. | +| [`annotationRemove`](#annotationremove) | Triggers when an annotation is removed from a page in the PDF document. | +| [`annotationResize`](#annotationresize) | Triggers when an annotation is resized on a page in the PDF document. | +| [`annotationSelect`](#annotationselect) | Triggers when an annotation is selected on a page in the PDF document. | +| [`annotationUnSelect`](#annotationunselect) | Triggers when an annotation is unselected on a page in the PDF document. | +| [`beforeAddFreeText`](#beforeaddfreetext) | Triggers before adding a text in the freeText annotation. | +| [`addSignature`](#addsignature) | Triggers when a signature is added to a page in the PDF document. | +| [`removeSignature`](#removesignature) | Triggers when a signature is removed from a page in the PDF document. | +| [`resizeSignature`](#resizesignature) | Triggers when a signature is resized on a page in the PDF document. | +| [`signaturePropertiesChange`](#signaturepropertieschange) | Triggers when the properties of a signature are changed on a page in the PDF document. | +| [`signatureSelect`](#signatureselect) | Triggers when a signature is selected on a page in the PDF document. | +| [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected on a page in the PDF document. | + + +### annotationAdd + +The [annotationAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationaddevent) event is triggered when an annotation is added to a PDF document's page. + +#### Event Arguments + +For event data, see [AnnotationAddEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationAddEventArgs/). It provides properties such as `annotationId`, `pageNumber`, `annotationType`, and `bounds`. + +The following example illustrates how to handle the `annotationAdd` event. + +```html +{% raw %} + + + +
- The component does not meet the requirement.Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +var viewer = new ej.pdfviewer.PdfViewer ({ + documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", + annotationAdd: function (args) { + console.log('Annotation added with ID: ' + args.annotationId); + console.log('Annotation type: ' + args.annotationType); + } +}); + +ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.BookmarkView, ej.pdfviewer.ThumbnailView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.Annotation, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner,ej.pdfviewer.PageOrganizer); + +viewer.appendTo('#pdfViewer'); +``` + +### annotationDoubleClick + +The [annotationDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationdoubleclickevent) event is triggered when an annotation is double-clicked. + +#### Event Arguments + +For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationDoubleClickEventArgs/). + +The following example illustrates how to handle the `annotationDoubleClick` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + annotationDoubleClick: function (args) { + console.log('Annotation double-clicked on page: ' + args.pageIndex); + } +}); + +viewer.appendTo('#pdfViewer'); +``` + +### annotationMouseLeave + +The [annotationMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationmouseleaveevent) event is triggered when the user's mouse pointer moves away from an annotation object. + +#### Event Arguments + +For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/). + +The following example illustrates how to handle the `annotationMouseLeave` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationMouseLeave: function (args) { + console.log('Annotation mouse leave event is triggered for annotation with ID: ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### annotationMouseover + +The [annotationMouseover](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationmouseoverevent) event is triggered when the mouse is moved over an annotation object. + +#### Event Arguments + +For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationMouseOverEventArgs/). + +The following example illustrates how to handle the `annotationMouseover` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationMouseover: function (args) { + console.log('Annotation mouse over event is triggered for annotation with ID: ' + args.annotationId); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### annotationMove + +The [annotationMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationmoveevent) event is triggered when an annotation is moved over the page of the PDF document. + +#### Event Arguments + +For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationMoveEventArgs/). + +The following example illustrates how to handle the `annotationMove` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationMove: function (args) { + console.log('Annotation moved. ID: ' + args.annotationId + ' on page ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### annotationMoving + +The [annotationMoving](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationmovingevent) event is triggered while an annotation is being moved. + +#### Event Arguments + +For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationMovingEventArgs/). + +The following example illustrates how to handle the `annotationMoving` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationMoving: function (args) { + console.log('Annotation is being moved. Current Action: ' + args.currentPosition); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### annotationPropertiesChange + +The [annotationPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationpropertieschangeevent) event is triggered when an annotation's property is modified on a PDF document page. + +#### Event Arguments + +For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/). It provides properties such as `annotationId`, `pageNumber`, and `action`. + +The following example illustrates how to handle the `annotationPropertiesChange` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationPropertiesChange: function (args) { + console.log('Annotation properties changed for ID: ' + args.annotationId); + console.log('isThicknessChanged: ' + args.isThicknessChanged); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### annotationRemove + +The [annotationRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationremoveevent) event is triggered when an annotation is removed from a PDF document's page. + +#### Event Arguments + +For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationRemoveEventArgs/). It provides properties such as `annotationId` and `pageNumber`. + +The following example illustrates how to handle the `annotationRemove` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationRemove: function (args) { + console.log('Annotation removed with ID: ' + args.annotationId); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### annotationResize + +The [annotationResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationresizeevent) event is triggered when an annotation is resized on a PDF document page. + +#### Event Arguments + +For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationResizeEventArgs/). + +The following example illustrates how to handle the `annotationResize` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationResize: function (args) { + console.log('Annotation resized. ID: ' + args.annotationId); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### annotationSelect + +The [annotationSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationselectevent) event is triggered when an annotation is selected on a PDF document's page. + +#### Event Arguments + +For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationSelectEventArgs/). + +The following example illustrates how to handle the `annotationSelect` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationSelect: function (args) { + console.log('Annotation selected with ID: ' + args.annotationId); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### annotationUnselect + +The [annotationUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#annotationunselectevent) event is triggered when an annotation is unselected from the PDF document's page. + +#### Event Arguments + +For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationUnSelectEventArgs/). + +The following example illustrates how to handle the `annotationUnselect` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + annotationUnSelect: function (args) { + console.log('Annotation unselected with ID: ' + args.annotationId); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### beforeAddFreeText + +The [beforeAddFreeText](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#beforeaddfreetextevent) event is triggered before adding a text in the freeText annotation. + +#### Event Arguments + +For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/). + +The following example illustrates how to handle the `beforeAddFreeText` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + beforeAddFreeText: function (args) { + console.log('Before adding free text on page: ' + args.pageIndex); + // Set args.cancel to true to prevent adding the free text annotation + // args.cancel = true; + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## Signature-related events + +### addSignature + +The [addSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#addsignatureevent) event is triggered when a signature is added to a page of a PDF document. + +#### Event Arguments + +For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/addSignatureEventArgs/). It provides properties such as `pageNumber`. + +The following example illustrates how to handle the `addSignature` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + addSignature: function (args) { + console.log('Signature added to page: ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### removeSignature + +The [removeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#removesignatureevent) event is triggered when the signature is removed from the page of a PDF document. + +#### Event Arguments + +For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/removeSignatureEventArgs/). It provides properties such as `pageNumber`. + +The following example illustrates how to handle the `removeSignature` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + removeSignature: function (args) { + console.log('Signature removed from page: ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### resizeSignature + +The [resizeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resizesignatureevent) event is triggered when the signature is resized and placed on a page of a PDF document. + +#### Event Arguments + +For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/resizeSignatureEventArgs/). + +The following example illustrates how to handle the `resizeSignature` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + resizeSignature: function (args) { + console.log('Signature resized on page ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### signaturePropertiesChange + +The [signaturePropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signaturepropertieschangeevent) event is triggered when the property of the signature is changed in the page of the PDF document. + +#### Event Arguments + +For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/). + +The following example illustrates how to handle the `signaturePropertiesChange` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + signaturePropertiesChange: function (args) { + console.log('Signature properties changed on page ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### signatureSelect + +The [signatureSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureselectevent) event is triggered when signature is selected over the page of the PDF document. + +#### Event Arguments + +For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureSelectEventArgs/). + +The following example illustrates how to handle the `signatureSelect` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + signatureSelect: function (args) { + console.log('Signature selected on page ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +### signatureUnselect + +The [signatureUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureunselectevent) event is triggered when signature is unselected over the page of the PDF document. + +#### Event Arguments + +For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureUnSelectEventArgs/). + +The following example illustrates how to handle the `signatureUnselect` event. + +```html +{% raw %} + + + +++Essential JS 2 + + + + + + +++ + +{% endraw %} +``` + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, + ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, + ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + signatureUnselect: function (args) { + console.log('Signature unselected on page ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md index e9a39decb..68394df40 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/comments.md @@ -1,17 +1,16 @@ --- layout: post -title: Comments in Javascript PDF Viewer control | Syncfusion -description: Learn here all about Comments in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Comments in JavaScript PDF Viewer control | Syncfusion +description: Learn about comments, replies, and status in the Syncfusion JavaScript PDF Viewer control (Essential JS 2). platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Comments in Javascript PDF Viewer control +# Comments in JavaScript PDF Viewer control -The PDF Viewer control provides options to add, edit, and delete the comments to the following annotation in the PDF documents: +The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents: * Shape annotation * Stamp annotation @@ -21,11 +20,11 @@ The PDF Viewer control provides options to add, edit, and delete the comments to * Free text annotation * Ink annotation - + ## Adding a comment to the annotation -Annotation comment, comment replies, and status can be added to the PDF document using the comment panel. +Annotation comments, replies, and status can be managed in the PDF document using the comment panel. ### Comment panel @@ -34,87 +33,87 @@ Annotation comments can be added to the PDF using the comment panel. The comment 1. Using the annotation menu * Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it. - * Click the Comment Panel button. A comment panel will appear. + * Click the Comment Panel button. The comment panel opens. 2. Using Context menu - * Select annotation in the PDF document and right-click it. - * Select the comment option in the context menu that appears. + * Select the annotation in the PDF document and right-click it. + * Select Comment from the context menu. 3. Using the Mouse click - * Select annotation in the PDF document and double click it, a comment panel will appear. + * Select the annotation in the PDF document and double-click it. The comment panel opens. -If the comment panel is already in the open state, you can select the annotations and add annotation comments using the comment panel. +If the comment panel is already open, select the annotation and add comments using the panel. ### Adding comments -* Select annotation in the PDF document and click it. -* The selected annotation comment container is highlighted in the comment panel. -* Now, you can add comment and comment replies using the comment panel. +* Select the annotation in the PDF document. +* The corresponding comment thread is highlighted in the comment panel. +* Add comments and replies using the comment panel. - + ### Adding Comment Replies -* The PDF Viewer control provides an option to add multiple replies to the comment. -* After adding the annotation comment, you can add a reply to the comment. +* Multiple replies can be added to a comment. +* After adding a comment, add replies as needed. ### Adding Comment or Reply Status -* Select the Annotation Comments in the comment panel. -* Click the more options button showing in the Comments or reply container. -* Select the Set Status option in the context menu that appears. -* Select the status of the annotation comment in the context menu that appears. +* Select the annotation comment in the comment panel. +* Click More options in the comment or reply container. +* Select Set Status from the context menu. +* Choose a status for the comment. - + ### Editing the comments and comments replies of the annotations -The comment, comment replies, and status of the annotation can be edited using the comment panel. +Comments, replies, and status can be edited using the comment panel. ### Editing the Comment or Comment Replies -The annotation comment and comment replies can be edited in the following ways: +Edit comments and replies in the following ways: 1. Using the Context menu - * Select the Annotation Comments in the comment panel. - * Click the More options button showing in the Comments or reply container. - * Select the Edit option in the context menu that appears. - * Now, an editable text box appears. You can change the content of the annotation comment or comment reply. + * Select the annotation comment in the comment panel. + * Click More options in the comment or reply container. + * Select Edit from the context menu. + * An editable text box appears. Change the content of the comment or reply. 2. Using the Mouse Click - * Select the annotation comments in the comment panel. - * Double click the comment or comment reply content. - * Now, an editable text box appears. You can change the content of the annotation comment or comment reply. + * Select the annotation comment in the comment panel. + * Double-click the comment or reply content. + * An editable text box appears. Change the content of the comment or reply. ### Editing Comment or Reply Status -* Select the Annotation Comments in the comment panel. -* Click the more options button showing in the Comments or reply container. -* Select the Set Status option in the context menu that appears. -* Select the status of the annotation comment in the context menu that appears. -* Status ‘None’ is the default state. If the status is set to ‘None,’ the comments or reply does not appear. +* Select the annotation comment in the comment panel. +* Click More options in the comment or reply container. +* Select Set Status from the context menu. +* Choose a status for the comment. +* None is the default state. Selecting None clears the status indicator; the comment or reply remains visible. - + ### Delete Comment or Comment Replies -* Select the Annotation Comments in the comment panel. -* Click the more options button shown in the Comments or reply container. -* Select the Delete option in the context menu that appears. +* Select the annotation comment in the comment panel. +* Click More options in the comment or reply container. +* Select Delete from the context menu. - + ->The annotation will be deleted on deleting the comment using comment panel. +>Deleting the root comment from the comment panel also deletes the associated annotation. ## How to check the comments added by the user -The comments added to the PDF document can be viewed by using the [comments](https://ej2.syncfusion.com/documentation/api/pdfviewer/commentEventArgs/) property of the annotation. +Comments added to the PDF document can be read using the annotation's `comments` property. -Refer to the following code to check the comments added in the PDF document using a button click event. +The following example logs comments in response to a button click. ```html @@ -125,7 +124,7 @@ Refer to the following code to check the comments added in the PDF document usin var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"; + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"; }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md index a74a8354c..bc46a7f0b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/free-text-annotation.md @@ -1,31 +1,30 @@ --- layout: post -title: Free text annotation in Javascript PDF Viewer control | Syncfusion -description: Learn here all about Free text annotation in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Free text annotation in JavaScript PDF Viewer control | Syncfusion +description: Learn about free text annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Free text annotation in Javascript PDF Viewer control +# Free text annotation in JavaScript PDF Viewer control -The PDF Viewer control provides the options to add, edit, and delete the free text annotations. +The PDF Viewer control provides options to add, edit, and delete free text annotations. -## Adding a free text annotation to the PDF document +## Add a free text annotation to the PDF document -The Free text annotations can be added to the PDF document using the annotation toolbar. +Free text annotations can be added to the PDF document using the annotation toolbar. -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Select the **Free Text Annotation** button in the annotation toolbar. It enables the Free Text annotation mode. -* You can add the text over the pages of the PDF document. +* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. +* Select the **Free Text Annotation** button to enable free text annotation mode. +* Add text anywhere on the pages of the PDF document. -In the pan mode, if the free text annotation mode is entered, the PDF Viewer control will switch to text select mode. +When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode. - + -Refer to the following code sample to switch to the Free Text annotation mode using a button click. +The following example switches to free text annotation mode using a button click. ```html @@ -36,7 +35,7 @@ Refer to the following code sample to switch to the Free Text annotation mode us var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib" + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -73,11 +72,11 @@ if (addFreeTextAnnotationButton) { {% endhighlight %} {% endtabs %} -## Adding a free text annotation programatically to the PDF document +## Add a free text annotation programmatically to the PDF document -The PDF Viewer library allows you to add the free text annotation in the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#annotation) method. -Here is an example of how you can use the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#addannotation) method to move the free text annotation programmatically: +Here is an example of adding a free text annotation programmatically using addAnnotation(): ```html @@ -88,7 +87,7 @@ Here is an example of how you can use the [**addAnnotation()**](https://ej2.sync var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib" + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -143,11 +142,11 @@ if (addFreeTextAnnotation) { {% endhighlight %} {% endtabs %} -## Change the content of an existing Free text annotation programmatically +## Change the content of an existing free text annotation programmatically -To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To change the content of an existing free text annotation programmatically, use the editAnnotation() method. -Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation: +Here is an example of changing the content of a free text annotation using editAnnotation(): ```html @@ -157,7 +156,7 @@ Here is an example of how you can use the **editAnnotation()** method to change var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib" + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -205,78 +204,78 @@ if (changeContent) { {% endhighlight %} {% endtabs %} -N> Please note that the current version of the PDF Viewer does not offer the functionality to edit existing text within a PDF document. However, you can add new free text annotations and modify existing free text annotations within the document. +N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document. -## Editing the properties of free text annotation +## Edit the properties of free text annotations -The font family, font size, font styles, font color, text alignment, fill color, the border stroke color, border thickness, and opacity of the free text annotation can be edited using the Font Family tool, Font Size tool, Font Color tool, Text Align tool, Font Style tool Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar. +Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. -### Editing font family +### Edit font family -The font family of the annotation can be edited by selecting the desired font in the Font Family tool. +Edit the font family by selecting a font in the Font Family tool. - + -### Editing font size +### Edit font size -The font size of the annotation can be edited by selecting the desired size in the Font Size tool. +Edit the font size by selecting a size in the Font Size tool. - + -### Editing font color +### Edit font color -The font color of the annotation can be edited using the color palette provided in the Font Color tool. +Edit the font color using the color palette in the Font Color tool. - + -### Editing the text alignment +### Edit text alignment -The text in the annotation can be aligned by selecting the desired styles in the drop-down pop-up in the Text Align tool. +Align text by selecting an option from the Text Align tool. - + -### Editing text styles +### Edit text styles -The style of the text in the annotation can be edited by selecting the desired styles in the drop-down pop-up in the Font Style tool. +Edit text styles by selecting options in the Font Style tool. - + -### Editing fill color +### Edit fill color -The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. +Edit the fill color using the color palette in the Edit Color tool. - + -### Editing stroke color +### Edit stroke color -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. +Edit the stroke color using the color palette in the Edit Stroke Color tool. - + -### Editing thickness +### Edit thickness -The border thickness of the annotation can be edited using the range slider provided in the Edit Thickness tool. +Edit border thickness using the range slider in the Edit Thickness tool. - + -### Editing opacity +### Edit opacity -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. +Edit opacity using the range slider in the Edit Opacity tool. - + -## Setting default properties during control initialization +## Set default properties during control initialization -The properties of the free text annotation can be set before creating the control using the FreeTextSettings. +Default properties for free text annotations can be set before creating the control using FreeTextSettings. -After editing the default values, they will be changed to the selected values. Refer to the following code sample to set the default free text annotation settings. +After changing default values, the selected values are applied. The following example sets default free text annotation settings. {% tabs %} {% highlight ts tabtitle="Standalone" %} var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' } }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md index abd11847e..477e9f990 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/ink-annotation.md @@ -1,31 +1,30 @@ --- layout: post -title: Ink annotation in Javascript PDF Viewer control | Syncfusion -description: Learn here all about Ink annotation in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Ink annotation in JavaScript PDF Viewer control | Syncfusion +description: Learn about ink annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Ink annotation in Javascript PDF Viewer control +# Ink annotation in JavaScript PDF Viewer control -The PDF Viewer control provides the options to add, edit, and delete the ink annotations. +The PDF Viewer control provides options to add, edit, and delete ink annotations. - + -## Adding an ink annotation to the PDF document +## Add an ink annotation to the PDF document -The ink annotations can be added to the PDF document using the annotation toolbar. +Ink annotations can be added to the PDF document using the annotation toolbar. -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Select the **Draw Ink** button in the annotation toolbar. It enables the ink annotation mode. -* You can draw anything over the pages of the PDF document. +* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. +* Select the **Draw Ink** button to enable ink annotation mode. +* Draw on any page of the PDF document. - + -Refer to the following code sample to switch to the ink annotation mode. +The following example switches to ink annotation mode. ```html @@ -36,7 +35,7 @@ Refer to the following code sample to switch to the ink annotation mode. var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -74,11 +73,11 @@ if (addInkAnnotation) { {% endhighlight %} {% endtabs %} -## Adding a Ink annotation programatically to the PDF document +## Add an ink annotation programmatically to the PDF document -The PDF Viewer library allows you to add the Ink annotation in the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. +The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. -Here is an example of how you can use the **addAnnotation()** method to move the Ink annotation programmatically: +Here is an example of adding an ink annotation programmatically using addAnnotation(): ```html @@ -89,7 +88,7 @@ Here is an example of how you can use the **addAnnotation()** method to move the var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -139,11 +138,11 @@ if (addInkAnnotation) { {% endhighlight %} {% endtabs %} -## Edit the existing Ink annotation programmatically +## Edit an existing ink annotation programmatically -To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify an existing ink annotation programmatically, use the editAnnotation() method. -Here is an example of how you can use the **editAnnotation()** method: +Here is an example of using editAnnotation(): ```html @@ -154,7 +153,7 @@ Here is an example of how you can use the **editAnnotation()** method: var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -212,33 +211,33 @@ if (editInkAnnotation) { {% endhighlight %} {% endtabs %} -## Editing the properties of the ink annotation +## Edit the properties of ink annotations -The stroke color, thickness, and opacity of the ink annotation can be edited using the Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar. +Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. -### Editing stroke color +### Edit stroke color -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. +Edit the stroke color using the color palette in the Edit Stroke Color tool. - + -### Editing thickness +### Edit thickness -The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool. +Edit thickness using the range slider in the Edit Thickness tool. - + -### Editing opacity +### Edit opacity -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. +Edit opacity using the range slider in the Edit Opacity tool. - + -## Setting default properties during the control initialization +## Set default properties during control initialization -The properties of the ink annotation can be set before creating the control using the InkAnnotationSettings. +Default properties for ink annotations can be set before creating the control using InkAnnotationSettings. -After editing the default values, they will be changed to the selected values. +After changing default values, the selected values are applied. Refer to the following code sample to set the default ink annotation settings. {% tabs %} @@ -250,7 +249,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"; pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6}; pdfviewer.appendTo('#PdfViewer'); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md index df5041d95..ebaea69c8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/line-angle-constraints.md @@ -1,20 +1,19 @@ --- layout: post -title: Line Angle Constraint in JavaScript PdfViewer | Syncfusion -description: Learn here all about Line Angle Constraints in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Line angle constraints in JavaScript PDF Viewer | Syncfusion +description: Learn to add, edit, delete, and configure highlight, underline, strikethrough, and squiggly text markup annotations programmatically in PDF Viewer. platform: document-processing -control: Line Angle Constraints -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Line Angle Constraints in JavaScript PDF Viewer +# Line angle constraints in JavaScript PDF Viewer The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents. -## Enabling Line Angle Constraints -To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles. +## Enable line angle constraints +Configure the `enableLineAngleConstraints` property within `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles. The following code demonstrates how to enable line angle constraints: @@ -22,7 +21,7 @@ The following code demonstrates how to enable line angle constraints: var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib", + resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", annotationDrawingOptions : {enableLineAngleConstraints : true, restrictLineAngleTo: 90} }); @@ -49,50 +48,49 @@ The `enableLineAngleConstraints` property activates angle snapping for line-base - Automatic angle snapping during the drawing - Enhanced precision for technical drawings and measurements -- Desktop support: Hold **Shift** while drawing to activate constraints +- Desktop behavior: hold Shift while drawing to toggle constraints (when disabled, Shift temporarily enables; when enabled, Shift enforces snapping) - Real-time visual feedback showing angle snapping behavior ### restrictLineAngleTo -The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**. +Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45. -**Angle Snapping Rules:** +Angle snapping rules: - The initial drawing direction is treated as the 0° reference point - Snapped angles are calculated based on the increment - If the increment doesn’t divide 360 evenly, angles reset after 360° -**Examples:** +Examples: - restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° - restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° -## Working with Constrained Annotations +## Work with constrained annotations ### Drawing Behavior When line angle constraints are enabled: -**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual. -**Angle Snapping:** The line snaps to the nearest allowed angle. -**Visual Feedback:** Snapped angle is shown in real time. -**Completion:** Release to complete the annotation. +- Start drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter). +- The segment snaps to the nearest allowed angle. +- A visual indicator reflects snapping in real time. +- Release to complete the annotation. ### Keyboard Shortcuts -**Desktop Platforms:** - -**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false. +Desktop platforms: +- Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping. ### Selector-Based Modifications When modifying existing line annotations using selectors: - Constraints apply based on the original line direction. -- The reference angle (0°) is determined by the lines current orientation. -- Only lines and arrows support constraint snapping during modification. -- Adjustments snap to the configured angle increment relative to the original direction. +- The reference angle (0°) is determined by the line’s current orientation. +- Constraint snapping during modification is supported for Line and Arrow. +- Adjustments snap to the configured angle increment. -[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) +[View a sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) -N> You can refer to our [JavaScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript PDF Viewer example](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) to know how to render and configure the PDF Viewer. +N> Refer to the JavaScript PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) for feature highlights. Explore the [JavaScript PDF Viewer examples](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) to learn how to render and configure the PDF Viewer. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md index fd2dfe3a1..5bda021b5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/measurement-annotation.md @@ -1,17 +1,16 @@ --- layout: post -title: Measurement annotation in Javascript PDF Viewer control | Syncfusion -description: Learn here all about Measurement annotation in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Measurement annotation in JavaScript PDF Viewer control | Syncfusion +description: Learn about measurement annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Measurement annotation in Javascript PDF Viewer control +# Measurement annotation in JavaScript PDF Viewer control -The PDF Viewer provides the options to add measurement annotations. You can measure the page annotations with the help of measurement annotation. The supported measurement annotations in the PDF Viewer control are: +The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are: * Distance * Perimeter @@ -19,22 +18,22 @@ The PDF Viewer provides the options to add measurement annotations. You can meas * Radius * Volume - + ## Adding measurement annotations to the PDF document The measurement annotations can be added to the PDF document using the annotation toolbar. * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Measurement Annotation** dropdown button. A dropdown pop-up will appear and shows the measurement annotations to be added. -* Select the measurement type to be added to the page in the dropdown pop-up. It enables the selected measurement annotation mode. -* You can measure and add the annotation over the pages of the PDF document. +* Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types. +* Select a measurement type to enable its annotation mode. +* Measure and add annotations on the pages of the PDF document. -In the pan mode, if the measurement annotation mode is entered, the PDF Viewer control will switch to text select mode. +When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode.  -Refer to the following code snippet to switch to distance annotation mode. +The following example switches to distance annotation mode. ```html @@ -44,7 +43,7 @@ Refer to the following code snippet to switch to distance annotation mode. var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -81,11 +80,11 @@ if (distanceMode) { {% endhighlight %} {% endtabs %} -## Adding a measurement annotation to the PDF document Programmatically +## Add a measurement annotation to the PDF document programmatically -With the PDF Viewer library, you can add a measurement annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. -Here's a example of how you can utilize the **addAnnotation()** method to include a measurement annotation programmatically: +Here is an example showing how to add measurement annotations programmatically using addAnnotation(): ```html @@ -100,7 +99,7 @@ Here's a example of how you can utilize the **addAnnotation()** method to includ var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -252,11 +251,11 @@ if (addVolumeAnnotation) { {% endhighlight %} {% endtabs %} -## Edit the existing measurement annotation programmatically +## Edit an existing measurement annotation programmatically -To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify an existing measurement annotation programmatically, use the editAnnotation() method. -Here is an example of how you can use the **editAnnotation()** method: +Here is an example of using editAnnotation(): ```html @@ -271,7 +270,7 @@ Here is an example of how you can use the **editAnnotation()** method: var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -459,43 +458,43 @@ if (editVolumeAnnotation) { {% endhighlight %} {% endtabs %} -## Editing the properties of measurement annotation +## Edit the properties of measurement annotations -The fill color, stroke color, thickness, and opacity of the measurement annotation can be edited using the Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar. +The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. -### Editing fill color +### Edit fill color The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.  -### Editing stroke color +### Edit stroke color The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.  -### Editing thickness +### Edit thickness -The thickness of the border of the annotation can be edited using the range slider provided in the Edit thickness tool. +Edit border thickness using the range slider provided in the Edit Thickness tool.  -### Editing opacity +### Edit opacity The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.  -### Editing the line properties +### Edit the line properties -The properties of the line shapes such as distance and perimeter annotations can be edited using the Line properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the distance and perimeter annotations. +Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu.  -## Setting default properties during control initialization +## Set default properties during control initialization -The properties of the shape annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings and volumeSettings. +Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings. Refer to the following code snippet to set the default annotation settings. @@ -504,7 +503,7 @@ Refer to the following code snippet to set the default annotation settings. var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, @@ -559,7 +558,7 @@ The properties of scale ratio for measurement annotation can be set before creat var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}, }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md index cba03bdc0..3b547003b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/shape-annotation.md @@ -1,17 +1,16 @@ --- layout: post -title: Shape annotation in Javascript PDF Viewer control | Syncfusion -description: Learn here all about Shape annotation in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Shape annotation in JavaScript PDF Viewer control | Syncfusion +description: Learn about shape annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2), including add, edit, delete, and default settings. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Shape annotation in Javascript PDF Viewer control +# Shape annotation in JavaScript PDF Viewer control -The PDF Viewer control provides the options to add, edit, and delete the shape annotations. The shape annotation types supported in the PDF Viewer control are: +The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are: * Line * Arrow @@ -19,20 +18,20 @@ The PDF Viewer control provides the options to add, edit, and delete the shape a * Circle * Polygon - + ## Adding a shape annotation to the PDF document Shape annotations can be added to the PDF document using the annotation toolbar. * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Shape Annotation** drop-down button. A drop-down pop-up will appear and shows the shape annotations to be added. -* Select the shape types to be added to the page in the drop-down pop-up. It enables the selected shape annotation mode. -* You can add the shapes over the pages of the PDF document. +* Click the **Shape Annotation** drop-down button. The pop-up lists available shape annotation types. +* Select a shape type to enable its annotation mode. +* Draw the shape on the pages of the PDF document. -N> While you're in the pan mode, for navigating through the document, and you click on the shape annotation button to add the shape annotation , the PDF Viewer control will smoothly transition to text select mode. This seamless transition ensures a fluid experience when switching between different interaction modes within the PDF Viewer interface. +N> When in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience. - + Refer to the following code sample to switch to the circle annotation mode. @@ -45,7 +44,7 @@ Refer to the following code sample to switch to the circle annotation mode. var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib" + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -83,11 +82,11 @@ if (circleAnnotationButton) { {% endhighlight %} {% endtabs %} -## Adding a Shape annotation to the PDF document Programmatically +## Add a shape annotation to the PDF document programmatically -With the PDF Viewer library, you can add a Shape annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's a example of how you can utilize the **addAnnotation()** method to include a Shape annotation programmatically: +Here is an example showing how to add shape annotations programmatically using addAnnotation(): ```html @@ -101,7 +100,7 @@ Here's a example of how you can utilize the **addAnnotation()** method to includ var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -255,11 +254,11 @@ if (addPolygonAnnotation) { {% endhighlight %} {% endtabs %} -## Edit the existing shape annotation programmatically +## Edit an existing shape annotation programmatically -To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify an existing shape annotation programmatically, use the editAnnotation() method. -Here is an example of how you can use the **editAnnotation()** method: +Here is an example of using editAnnotation(): ```html @@ -273,7 +272,7 @@ Here is an example of how you can use the **editAnnotation()** method: var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -461,50 +460,50 @@ if (editPolygonAnnotation) { ## Editing the properties of the shape annotation -The fill color, stroke color, thickness, and opacity of the shape annotation can be edited using the Edit color tool, Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar. +The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. ### Editing fill color The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. - + ### Editing stroke color The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. - + ### Editing thickness The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool. - + ### Editing opacity The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. - + ### Editing the line properties -The properties of the line shapes such as line and arrow annotations can be edited using the Line Properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the line and arrow annotations. +Line and arrow annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu. Refer to the following code sample to set the default annotation settings. - + -## Setting default properties during the control initialization +## Set default properties during control initialization -The properties of the shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings. +Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings. {% tabs %} {% highlight ts tabtitle="Standalone" %} var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}, arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}, rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md index e399be281..dec244e46 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/signature-annotation.md @@ -1,34 +1,33 @@ --- layout: post -title: Handwritten signature in Javascript PDF Viewer control | Syncfusion -description: Learn here all about Handwritten signature in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Handwritten signature in JavaScript PDF Viewer control | Syncfusion +description: Learn about handwritten signatures in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, enable/disable, and edit properties. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Handwritten signature Javascript PDF Viewer control +# Handwritten signature in JavaScript PDF Viewer control -The PDF Viewer control supports adding handwritten signatures to a PDF document. The handwritten signature reduces the paper work of reviewing the content and verifies it digitally. +The PDF Viewer control supports adding handwritten signatures to a PDF document. Handwritten signatures reduce paperwork and enable digital verification. ## Adding a handwritten signature to the PDF document The handwritten signature can be added to the PDF document using the annotation toolbar. * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel will appear. +* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel appears. - + -* Draw the signature in the signature panel. +* Draw the signature in the panel. - + -* Then click **Create** button and move the signature using the mouse and place them in the desired location. +* Click **Create**, move the signature, and place it at the desired location. - + Refer to the following code sample to switch to the handwritten signature mode programmatically. @@ -40,7 +39,7 @@ Refer to the following code sample to switch to the handwritten signature mode p var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -76,16 +75,16 @@ if (handWrittenSignature) { {% endtabs %} -## How to enable the handwritten signature +## Enable the handwritten signature -The following code snippet describes how to enable the handwritten signature in PDF Viewer. When the value is set to `false` it disables the handwritten signature. +The following example enables or disables the handwritten signature in the PDF Viewer. Setting the value to `false` disables the feature. {% tabs %} {% highlight ts tabtitle="Standalone" %} var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", enableHandwrittenSignature : false, }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, @@ -107,11 +106,11 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## Adding Handwritten signature programatically to the PDF document +## Add a handwritten signature programmatically to the PDF document With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. -Here is an example of how you can use the **addAnnotation()** method to add the Handwritten signature programmatically +Here is an example of adding a handwritten signature programmatically using addAnnotation(): ```html @@ -122,7 +121,7 @@ Here is an example of how you can use the **addAnnotation()** method to add the var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -234,24 +233,24 @@ if(addHandwrittenSignature){ [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Add%20Handwritten%20Signature%20Programmatically) -## Editing the properties of handwritten signature +## Edit the properties of handwritten signatures -The stroke color, border thickness, and opacity of the handwritten signature can be edited using the edit stroke color tool, edit thickness tool, and edit opacity tool in the annotation toolbar. +Stroke color, border thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. -### Editing stroke color +### Edit stroke color -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. +Edit the stroke color using the color palette in the Edit Stroke Color tool. - + -### Editing thickness +### Edit thickness -The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool. +Edit border thickness using the range slider in the Edit Thickness tool. - + -### Editing opacity +### Edit opacity -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. +Edit opacity using the range slider in the Edit Opacity tool. - \ No newline at end of file + \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md index b1cd2ae15..0af4ee5c8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/stamp-annotation.md @@ -1,17 +1,16 @@ --- layout: post -title: Stamp annotation in Javascript PDF Viewer control | Syncfusion -description: Learn here all about Stamp annotation in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Stamp annotation in JavaScript PDF Viewer control | Syncfusion +description: Learn about stamp annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Stamp annotation in Javascript PDF Viewer control +# Stamp annotation in JavaScript PDF Viewer control -The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotation in the PDF documents: +The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents: * Dynamic * Sign Here @@ -20,24 +19,24 @@ The PDF Viewer control provides options to add, edit, delete, and rotate the fol  -## Adding stamp annotations to the PDF document +## Add stamp annotations to the PDF document The stamp annotations can be added to the PDF document using the annotation toolbar. * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added. +* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.  -* Select the annotation type to be added to the page in the pop-up. +* Select a stamp type to enable its annotation mode.  -* You can add the annotation over the pages of the PDF document. +* Place the stamp on the pages of the PDF document. -N> While you're in the pan mode, for navigating through the document, and you click on the stamp annotation button to add the stamp annotation , the PDF Viewer control will smoothly transition to text select mode. This seamless transition ensures a fluid experience when switching between different interaction modes within the PDF Viewer interface. +N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience. -Refer to the following code sample to switch to the stamp annotation mode. +The following examples switch to stamp annotation modes. ```html @@ -49,7 +48,7 @@ Refer to the following code sample to switch to the stamp annotation mode. var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib" + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -120,23 +119,23 @@ if (standardBusinessStamp) { {% endhighlight %} {% endtabs %} -## Adding custom stamp to the PDF document +## Add a custom stamp to the PDF document * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added. +* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. * Click the Custom Stamp button.  -* The file explorer dialog will appear, choose the image and then add the image to the PDF page. +* In the file explorer dialog, choose an image and add it to the PDF page. ->The JPG and JPEG image format is only supported in the custom stamp annotations. +>Only JPG and JPEG image formats are supported for custom stamp annotations. -## Adding a Stamp annotation to the PDF document Programmatically +## Add a stamp annotation to the PDF document programmatically -With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#annotation) method. -Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically: +Here are examples showing how to add stamp annotations programmatically using addAnnotation(): ```html @@ -150,7 +149,7 @@ Here's a example of how you can utilize the **addAnnotation()** method to includ var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -283,11 +282,11 @@ if (customStamp) { {% endhighlight %} {% endtabs %} -## Edit the existing sticky note annotation programmatically +## Edit an existing stamp annotation programmatically -To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify an existing stamp annotation programmatically, use the editAnnotation() method. -Here is an example of how you can use the **editAnnotation()** method: +Here is an example of using editAnnotation(): ```html @@ -298,7 +297,7 @@ Here is an example of how you can use the **editAnnotation()** method: var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -348,19 +347,18 @@ if (editAnnotation) { {% endhighlight %} {% endtabs %} -## Setting default properties during control initialization +## Set default properties during control initialization -The properties of the stamp annotation can be set before creating the control using the StampSettings. +Default properties for stamp annotations can be set before creating the control using StampSettings. -After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values. -Refer to the following code sample to set the default sticky note annotation settings. +After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default stamp annotation settings. {% tabs %} {% highlight ts tabtitle="Standalone" %} var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", stampSettings : {opacity: 0.3, author: 'Guest User'} }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md index 36248a481..e5a5c63bd 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/sticky-notes-annotation.md @@ -1,44 +1,42 @@ --- layout: post -title: Sticky notes in Javascript PDF Viewer control | Syncfusion -description: Learn here all about Sticky notes in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Sticky notes in JavaScript PDF Viewer control | Syncfusion +description: Learn about sticky note annotations in the Syncfusion JavaScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Sticky notes in Javascript PDF Viewer control +# Sticky notes in JavaScript PDF Viewer control -The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document. +The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document.  -## Adding a sticky note annotation to the PDF document +## Add a sticky note annotation to the PDF document Sticky note annotations can be added to the PDF document using the annotation toolbar. -* Click the **Comments** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the position where you want to add sticky note annotation in the PDF document. -* Sticky note annotation will be added in the clicked positions. +* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it. +* Click the position where the sticky note annotation should be added. +* The sticky note annotation is added at the clicked position.  - Annotation comments can be added to the PDF document using the comment panel. +Annotation comments can be added using the comment panel. -* Select a Sticky note annotation in the PDF document and right-click it. -* Select the Comment option in the context menu that appears. -* Now, you can add Comments, Reply, and Status using the Comment Panel. -* Now, you can add Comments, Reply, and Status using the Comment Panel. +* Select a sticky note annotation in the PDF document and right-click it. +* Select Comment from the context menu. +* Add comments, replies, and status using the comment panel.  -## Adding a sticky note annotation to the PDF document Programmatically +## Add a sticky note annotation to the PDF document programmatically -With the PDF Viewer library, you can add a sticky note annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's a example of how you can utilize the **addAnnotation()** method to include a sticky note annotation programmatically: +Here is an example showing how to add a sticky note annotation programmatically using addAnnotation(): ```html @@ -49,7 +47,7 @@ Here's a example of how you can utilize the **addAnnotation()** method to includ var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -95,11 +93,11 @@ if (stickyNote) { {% endhighlight %} {% endtabs %} -## Edit the existing sticky note annotation programmatically +## Edit an existing sticky note annotation programmatically -To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify an existing sticky note annotation programmatically, use the editAnnotation() method. -Here is an example of how you can use the **editAnnotation()** method: +Here is an example of using editAnnotation(): ```html @@ -110,7 +108,7 @@ Here is an example of how you can use the **editAnnotation()** method: var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -162,38 +160,38 @@ if (stickyNote) { {% endhighlight %} {% endtabs %} -## Editing the properties of the sticky note annotation +## Edit the properties of sticky note annotations ### Editing opacity -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. +Edit opacity using the range slider in the Edit Opacity tool.  ### Editing comments -The comment, comment reply, and comment status of the annotation can be edited using the Comment Panel. +Comment text, replies, and status can be edited using the comment panel. -* Open the comment panel using the Comment Panel button showing in the annotation toolbar. +* Open the comment panel using the Comment Panel button in the annotation toolbar.  -You can modify or delete the comments or comments replay and it’s status using the menu option provided in the comment panel. +Modify or delete comments or replies, and change status using the menu options in the comment panel.  -## Setting default properties during the control initialization +## Set default properties during control initialization -The properties of the sticky note annotation can be set before creating the control using the StickyNoteSettings. +Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings. -After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values. Refer to the following code sample to set the default sticky note annotation settings. +After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings. {% tabs %} {% highlight ts tabtitle="Standalone" %} var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", stickyNotesSettings : {author: 'Syncfusion'} }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, @@ -215,16 +213,16 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## Disabling sticky note annotations +## Disable sticky note annotations -The PDF Viewer control provides an option to disable the sticky note annotations feature. The code sample for disabling the feature is as follows. +The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature. {% tabs %} {% highlight ts tabtitle="Standalone" %} var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", enableStickyNotesAnnotation : false }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md index f93b9c7b9..4f9df6aea 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/text-markup-annotation.md @@ -1,40 +1,39 @@ --- layout: post -title: Text markup annotation in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Text markup annotation in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Text markup annotation in JavaScript PDF Viewer | Syncfusion +description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion JavaScript PDF Viewer. platform: document-processing -control: Text markup annotation -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Text markup annotation in Javascript Pdfviewer control +# Text markup annotation in JavaScript PDF Viewer -The PDF Viewer control provides the options to add, edit, and delete text markup annotations such as highlight, underline, strikethrough and squiggly annotations in the PDF document. +The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly.  -## Highlight a text +## Highlight text -There are two ways to highlight a text in the PDF document: +There are two ways to highlight text: 1. Using the context menu - * Select a text in the PDF document and right-click it. - * Select **Highlight** option in the context menu that appears. +* Select text in the PDF document and right-click it. +* Select **Highlight** in the context menu.  2. Using the annotation toolbar - * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. - * Select the **Highlight** button in the annotation toolbar. It enables the highlight mode. - * Select the text and the highlight annotation will be added. - * You can also select the text and apply the highlight annotation using the **Highlight** button. +* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +* Select **Highlight** to enable highlight mode. +* Select text to add the highlight annotation. +* Alternatively, select text first and then click **Highlight**.  -In the pan mode, if the highlight mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for highlighting the text. +When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection. Refer to the following code snippet to switch to highlight mode. @@ -64,11 +63,11 @@ Add the below `serviceUrl` in the `index.html` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/highlight-normal-mode-cs1/index.html" %} -## Highlight a text programmatically +## Highlight text programmatically -The PDF Viewer library enables you to programmatically highlight text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. +Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's an example of how you can use the **addAnnotation()** method to apply highlighting programmatically: +Example: ```html @@ -78,7 +77,7 @@ Here's an example of how you can use the **addAnnotation()** method to apply hig var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -120,21 +119,22 @@ if (highlight) { {% endhighlight %} {% endtabs %} -## Underline a text +## Underline text -There are two ways to underline a text in the PDF document: +There are two ways to underline text: 1. Using the context menu - * Select a text in the PDF document and right-click it. - * Select **Underline** option in the context menu that appears. +* Select text in the PDF document and right-click it. +* Select **Underline** in the context menu.  + 2. Using the annotation toolbar - * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. - * Select the **Underline** button in the annotation toolbar. It enables the underline mode. - * Select the text and the underline annotation will be added. - * You can also select the text and apply the underline annotation using the **Underline** button. +* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +* Select **Underline** to enable underline mode. +* Select text to add the underline annotation. +* Alternatively, select text first and then click **Underline**.  @@ -169,11 +169,11 @@ Add the below `serviceUrl` in the `index.html` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/underline-normal-mode-cs1/index.html" %} -## Underline a text programmatically +## Underline text programmatically -The PDF Viewer library enables you to programmatically Underline text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. +Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's an example of how you can use the **addAnnotation()** method to apply Underline programmatically: +Example: ```html @@ -183,7 +183,7 @@ Here's an example of how you can use the **addAnnotation()** method to apply Und var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -226,21 +226,22 @@ if (underline) { {% endhighlight %} {% endtabs %} -## Strikethrough a text +## Strikethrough text -There are two ways to strikethrough a text in the PDF document: +There are two ways to strikethrough text: 1. Using the context menu - * Select a text in the PDF document and right-click it. - * Select **Strikethrough** option in the context menu that appears. +* Select text in the PDF document and right-click it. +* Select **Strikethrough** in the context menu.  + 2. Using the annotation toolbar - * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. - * Select the **Strikethrough** button in the annotation toolbar. It enables the strikethrough mode. - * Select the text and the strikethrough annotation will be added. - * You can also select the text and apply the strikethrough annotation using the **Strikethrough** button. +* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +* Select **Strikethrough** to enable strikethrough mode. +* Select text to add the strikethrough annotation. +* Alternatively, select text first and then click **Strikethrough**.  @@ -260,7 +261,7 @@ Add the below `serviceUrl` in the `index.html` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-mode-cs1/index.html" %} -Refer to the following code snippet to switch back to normal mode from underline mode. +Refer to the following code snippet to switch back to normal mode from strikethrough mode. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -274,11 +275,11 @@ Add the below `serviceUrl` in the `index.html` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/strikethrough-normal-mode-cs1/index.html" %} -## Strikethrough a text programmatically +## Strikethrough text programmatically -The PDF Viewer library enables you to programmatically Strikethrough text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. +Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically: +Example: ```html @@ -288,7 +289,7 @@ Here's an example of how you can use the **addAnnotation()** method to apply Str var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -330,21 +331,21 @@ if (strikethrough) { {% endhighlight %} {% endtabs %} -## Squiggly a text +## Add squiggly to text -There are two ways to add squiggly to a text in the PDF document: +There are two ways to add squiggly to text: 1. Using the context menu - * Select a text in the PDF document and right-click it. - * Select **Squiggly** option in the context menu that appears. +* Select text in the PDF document and right-click it. +* Select **Squiggly** in the context menu.  2. Using the annotation toolbar - * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. - * Select the **Squiggly** button in the annotation toolbar. It enables the squiggly mode. - * Select the text and the squiggly annotation will be added. - * You can also select the text and apply the squiggly annotation using the **Squiggly** button. +* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +* Select **Squiggly** to enable squiggly mode. +* Select text to add the squiggly annotation. +* Alternatively, select text first and then click **Squiggly**.  @@ -378,11 +379,11 @@ Add the below `serviceUrl` in the `index.html` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/squiggly-normal-mode-cs1/index.html" %} -## Squiggly a text programmatically +## Add squiggly to text programmatically -The PDF Viewer library enables you to programmatically add squiggly to text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. +Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's an example of how you can use the **addAnnotation()** method to apply squiggly programmatically: +Example: ```html @@ -393,7 +394,7 @@ Here's an example of how you can use the **addAnnotation()** method to apply squ var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); @@ -437,39 +438,39 @@ if (squiggly) { ## Deleting a text markup annotation -The selected annotation can be deleted by the following ways: +The selected annotation can be deleted in the following ways: -1. Using Delete key - * Select the annotation to be deleted. - * Click the Delete key in the keyboard. The selected annotation will be deleted. +1. Using the Delete/Backspace key + * Select the annotation. + * Press Delete (or Backspace). The selected annotation is removed. 2. Using the annotation toolbar - * Select the annotation to be deleted. - * Click the **Delete Annotation** button in the annotation toolbar. The selected annotation will be deleted. + * Select the annotation. + * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed.  -## Editing the properties of the text markup annotation +## Edit text markup annotation properties The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar. -### Editing color +### Edit color -The color of the annotation can be edited using the color palette provided in the Edit Color tool. +Use the color palette in the Edit Color tool to change the annotation color.  -### Editing opacity +### Edit opacity -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. +Use the range slider in the Edit Opacity tool to change annotation opacity.  -## Setting default properties during control initialization +## Set default properties during control initialization -The properties of the text markup annotation can be set before creating the control using highlightSettings, underlineSettings, strikethroughSettings and squigglySettings. +Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`. ->After editing the default color and opacity using the Edit Color tool and Edit Opacity tool, they will be changed to the selected values. +> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default annotation settings. @@ -503,22 +504,22 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## Performing undo and redo +## Perform undo and redo -The PDF Viewer performs undo and redo for the changes made in the PDF document. In text markup annotation, undo and redo actions are provided for: +The PDF Viewer supports undo and redo for changes. For text markup annotations, undo and redo are provided for: * Inclusion of the text markup annotations. * Deletion of the text markup annotations. * Change of either color or opacity of the text markup annotations. -Undo and redo actions can be done by the following ways: +Undo and redo actions can be performed in the following ways: 1. Using keyboard shortcuts: - After performing a text markup annotation action, you can undo it by using Ctrl + Z shortcut and redo by using Ctrl + Y shortcut. -2. Using toolbar: - Undo and redo can be done using the **Undo** tool and **Redo** tool provided in the toolbar. + After performing a text markup annotation action, press Ctrl+Z to undo and Ctrl+Y to redo. +2. Using the toolbar: + Use the **Undo** and **Redo** tools in the toolbar. -Refer to the following code snippet for calling undo and redo actions from the client-side. +Refer to the following code snippet to call undo and redo actions from the client side. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -526,19 +527,23 @@ Refer to the following code snippet for calling undo and redo actions from the c {% endhighlight %} {% endtabs %} +N> To set up the **server-backed PDF Viewer**, +Add the below `serviceUrl` in the `index.html` file +`serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` + {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/es5-text-markup-annotation/undo-redo-cs1/index.html" %} -## Saving the text markup annotation +## Save text markup annotations -When you click the download tool in the toolbar, the text markup annotations will be saved in the PDF document. This action will not affect the original document. +Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified. -## Printing the text markup annotation +## Print text markup annotations -When the print tool is selected in the toolbar, the PDF document will be printed along with the text markup annotations added to the pages. This action will not affect the original document. +Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified. -## Disabling text markup annotation +## Disable text markup annotation -The PDF Viewer control provides an option to disable the text markup annotation feature. The code snippet for disabling the feature is as follows. +Disable text markup annotations using the `enableTextMarkupAnnotation` property. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -567,4 +572,4 @@ pdfviewer.appendTo('#PdfViewer'); ## See also * [Toolbar items](../toolbar) -* [Feature Modules](../feature-module) +* [Feature modules](../feature-module) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/download.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/download.md index 6190aa153..4817bb014 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/download.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/download.md @@ -1,14 +1,13 @@ --- layout: post -title: Download in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Download in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Download in Javascript PDF Viewer control | Syncfusion +description: Learn here all about Download in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Download -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Download in Javascript Pdfviewer control +# Download in JavaScript PDF Viewer control The PDF Viewer supports downloading the loaded PDF file. You can enable/disable the download using the following code snippet. @@ -104,7 +103,7 @@ document.getElementById('download').addEventListener('click', function () { The [downloadEnd](https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadend) event of the PDF viewer allows you to get the downloaded document as a base64 string. -The following code illustrates how to get the invoke the download action in a button click to get the downloaded document as a base64 string. And load the document from base64 string in another button click. +The following code illustrates how to get the downloaded document as a base64 string. ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/ej1-api-migration.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/ej1-api-migration.md index fa866472f..b9f3cb221 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/ej1-api-migration.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 api migration in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: EJ1 API migration in Javascript PDF Viewer control | Syncfusion +description: Learn here all about EJ1 API migration in Syncfusion Javascript PDF Viewer control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Ej1 api migration -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Ej1 api migration in Javascript Pdfviewer control +# EJ1 API migration in Javascript PDF Viewer control This article describes API migration process of PDF Viewer component from Essential JS 1 to Essential JS 2. @@ -32,7 +31,7 @@ This article describes API migration process of PDF Viewer component from Essent | Specifies the viewer interaction mode | **Property**: *interactionMode*++
`$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', interactionMode: ej.PdfViewer.InteractionMode.Pan})` | **Property**: *interactionMode*
`var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer',interactionMode:"Pan"});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| | Gets the current zoom percentage of the PDF document in viewer | **Property**: *zoomPercentage*
`var pdfviewerObj = $("#viewer").data("ejPdfViewer");var zoomPercentage = pdfviewerObj.zoomPercentage;` | **Property**: *zoomPercentage*
`var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0]; var zoomPercentage = pdfviewerObj.zoomPercentage;`| | Specifies the name of the action method in the server | **Property**: *serverActionSettings*
`$("#viewer").ejPdfViewer ({ServiceUrl:'../api/PdfViewer', serverActionSettings: { load: "Load", fileUpload: "FileUpload", print: "Print", download: "Download" } });});` | **Property**: *serverActionSettings*
`var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer',serverActionSettings: {load:'Upload', renderPages:'RenderPdfPages', renderComments:'RenderAnnotationComments', renderThumbnail:'RenderThumbnailImages' , unload:'Unload', print:'PrintImages', download:'Donwload' },});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| -| Defines the settings of the PdfViewer toolbar | **Property**: *toolbarSettings*
`$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', toolbarSettings: { showTooltip: false } });` | **Property**: *toolbarSettings*
`var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', toolbarSettings: { showTooltip : true, toolbarItem: ['OpenOption']}});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| +| Defines the settings of the PDF Viewer toolbar | **Property**: *toolbarSettings*
`$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', toolbarSettings: { showTooltip: false } });` | **Property**: *toolbarSettings*
`var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', toolbarSettings: { showTooltip : true, toolbarItem: ['OpenOption']}});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| | Gets/sets the settings of the highlight annotation | **Property**: *highlightSettings*
`$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', highlightSettings: {color: "#ffff00", author: "Guest", opacity: 0.5, subject: "highlight", modifiedDate: "2017-03-27 12:00:51", isLocked: true} });` | **Property**: *highlightSettings*
`var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''},});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| | Gets/sets the settings of the underline annotation | **Property**: *underlineSettings*
`$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', underlineSettings: {color: "#ffff00", author: "Guest", opacity: 0.5, subject: "highlight", modifiedDate: "2017-03-27 12:00:51", isLocked: true} });` | **Property**: *underlineSettings*
`var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', underlineSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''},});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| | Gets/sets the settings of the strikethrough annotation | **Property**: *strikethroughSettings*
`$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', strikethroughSettings: {color: "#ffff00", author: "Guest", opacity: 0.5, subject: "highlight", modifiedDate: "2017-03-27 12:00:51", isLocked: true} });` | **Property**: *strikethroughSettings*
`var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', strikethroughSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''},});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/event.md new file mode 100644 index 000000000..873f0ab95 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/event.md @@ -0,0 +1,1298 @@ +--- +layout: post +title: Events in JavaScript PDF Viewer | Syncfusion +description: Comprehensive list of events in the Syncfusion JavaScript PDF Viewer with descriptions, event arguments, and usage examples to integrate custom logic. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Events in JavaScript PDF Viewer + +The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows. + +The following table lists commonly used events supported by the PDF Viewer component: + +| Event | Description | +| ----- | ----------- | +| [`bookmarkClick`](#bookmarkclick) | Triggers when a bookmark item is clicked in the bookmark panel. | +| [`buttonFieldClick`](#buttonfieldclick) | Triggers when a button form field is clicked. | +| [`commentAdd`](#commentadd) | Triggers when a comment is added to the comment panel. | +| [`commentDelete`](#commentdelete) | Triggers when a comment is deleted from the comment panel. | +| [`commentEdit`](#commentedit) | Triggers when a comment is edited in the comment panel. | +| [`commentSelect`](#commentselect) | Triggers when a comment is selected in the comment panel. | +| [`commentStatusChanged`](#commentstatuschanged) | Triggers when a comment’s status changes in the comment panel. | +| [`created`](#created) | Triggers during the creation of the PDF Viewer component. | +| [`customContextMenuBeforeOpen`](#customcontextmenubeforeopen) | Fires before the custom context menu opens. | +| [`customContextMenuSelect`](#customcontextmenuselect) | Fires when a custom context menu item is selected. | +| [`documentLoad`](#documentload) | Triggers while loading a document into the PDF Viewer. | +| [`documentLoadFailed`](#documentloadfailed) | Triggers when document loading fails. | +| [`documentUnload`](#documentunload) | Triggers when the document is closed. | +| [`downloadEnd`](#downloadend) | Triggers after a document is downloaded. | +| [`downloadStart`](#downloadstart) | Triggers when the download action is initiated. | +| [`exportFailed`](#exportfailed) | Triggers when exporting annotations fails. | +| [`exportStart`](#exportstart) | Triggers when exporting annotations starts. | +| [`exportSuccess`](#exportsuccess) | Triggers when annotations are exported successfully. | +| [`extractTextCompleted`](#extracttextcompleted) | Triggers when text extraction is completed. | +| [`hyperlinkClick`](#hyperlinkclick) | Triggers when a hyperlink is clicked. | +| [`hyperlinkMouseOver`](#hyperlinkmouseover) | Triggers when hovering over a hyperlink. | +| [`importFailed`](#importfailed) | Triggers when importing annotations fails. | +| [`importStart`](#importstart) | Triggers when importing annotations starts. | +| [`importSuccess`](#importsuccess) | Triggers when annotations are imported successfully. | +| [`keyboardCustomCommands`](#keyboardcustomcommands) | Triggers when customized keyboard command keys are pressed. | +| [`moveSignature`](#movesignature) | Triggers when a signature is moved across the page. | +| [`pageChange`](#pagechange) | Triggers when the current page number changes. | +| [`pageClick`](#pageclick) | Triggers when a mouse click occurs on a page. | +| [`pageMouseover`](#pagemouseover) | Triggers when moving the mouse over a page. | +| [`pageOrganizerSaveAs`](#pageorganizersaveas) | Triggers when a `save as` action is performed in the page organizer. | +| [`pageRenderComplete`](#pagerendercomplete) | Triggers after a page finishes rendering. | +| [`pageRenderInitiate`](#pagerenderinitiate) | Triggers when page rendering begins. | +| [`printEnd`](#printend) | Triggers when a print action is completed. | +| [`printStart`](#printstart) | Triggers when a print action is initiated. | +| [`removeSignature`](#removesignature) | Triggers when a signature is removed. | +| [`resizeSignature`](#resizesignature) | Triggers when a signature is resized. | +| [`resourcesLoaded`](#resourcesloaded) | Triggers after PDFium resources are loaded. | +| [`signaturePropertiesChange`](#signaturepropertieschange) | Triggers when signature properties are changed. | +| [`signatureSelect`](#signatureselect) | Triggers when a signature is selected. | +| [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected. | +| [`textSearchComplete`](#textsearchcomplete) | Triggers when a text search is completed. | +| [`textSearchHighlight`](#textsearchhighlight) | Triggers when the searched text is highlighted. | +| [`textSearchStart`](#textsearchstart) | Triggers when a text search is initiated. | +| [`textSelectionEnd`](#textselectionend) | Triggers when text selection is complete. | +| [`textSelectionStart`](#textselectionstart) | Triggers when text selection is initiated. | +| [`thumbnailClick`](#thumbnailclick) | Triggers when a thumbnail is clicked. | +| [`toolbarClick`](#toolbarclick) | Triggers when a toolbar item is clicked. | +| [`validateFormFields`](#validateformfields) | Triggers when form field validation fails. | +| [`zoomChange`](#zoomchange) | Triggers when the magnification value changes. | + +Note: For annotation and signature events, see the dedicated Annotations Events topic. + +## bookmarkClick + +The [bookmarkClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel. + +- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/bookmarkClickEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + bookmarkClick: function (args) { + console.log('Bookmark clicked: ' + args.name); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## toolbarClick + +The [toolbarClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#toolbarclickevent) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name. + +- Event arguments: `ClickEventArgs`. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + toolbarClick: function (args) { + console.log('Toolbar item clicked: ' + args.name); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## validateFormFields + +The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#validateformfieldsevent) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed. + +- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) + - name: Event name + - documentName: Current document name + - formField: The last interacted field’s data (if applicable) + - nonFillableFields: Array detailing required/invalid fields + +When it triggers +- Add a form field and mark it Required (UI: right‑click field > Properties > Required). +- Leave the field empty and click Download. The event fires and provides the list of fields that failed validation. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); + +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib' +}); + +viewer.enableFormFieldsValidation = true; +viewer.validateFormFields = function (args) { + console.log('form field event name: ' + args.name); + console.log('form field document name: ' + args.documentName); + console.log('form field data: ' + args.formField); + console.log('non fillable form field details: ', + args.nonFillableFields); +}; + +viewer.appendTo('#pdfViewer'); +``` + +Tip +- To require a field programmatically, set isRequired: true when creating or editing the field via Form Designer APIs. + +## zoomChange + +The [zoomChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#zoomchangeevent) event triggers when the magnification value changes. + +- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/zoomChangeEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + zoomChange: function (args) { + console.log('Zoom changed to: ' + args.zoomValue + '%'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## buttonFieldClick + +The [buttonFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#buttonfieldclickevent) event triggers when a button form field is clicked. + +- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/buttonFieldClickEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + buttonFieldClick: function (args) { + console.log('Button field clicked. Name: ' + args.name); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## commentAdd + +The [commentAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentaddevent) event triggers when a comment is added in the comment panel. + +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + commentAdd: function (args) { + console.log('Comment added. Id: ' + args.id); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## commentDelete + +The [commentDelete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentdeleteevent) event triggers when a comment is deleted in the comment panel. + +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + commentDelete: function (args) { + console.log('Comment deleted. Id: ' + args.id); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## commentEdit + +The [commentEdit](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commenteditevent) event triggers when a comment is edited in the comment panel. + +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + commentEdit: function (args) { + console.log('Comment edited. Id: ' + args.id); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## commentSelect + +The [commentSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentselectevent) event triggers when a comment is selected in the comment panel. + +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + commentSelect: function (args) { + console.log('Comment selected. Id: ' + args.id ); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## commentStatusChanged + +The [commentStatusChanged](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#commentstatuschangedevent) event triggers when a comment status is changed in the comment panel. + +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/commentEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + commentStatusChanged: function (args) { + console.log('Comment status changed. Id: ' + args.id + ', Status: ' + args.status ); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## created + +The [created](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#createdevent) event is triggered during the creation of the PDF Viewer component. + +- Event arguments: `void`. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + created: function (args) { + console.log('PDF Viewer created'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## customContextMenuBeforeOpen + +The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenubeforeopenevent) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected). + +- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs/) + - name: Event name + - ids: Array of menu item ids that will be shown; remove ids to hide items for this open + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + customContextMenuBeforeOpen: function (args) { + console.log('Before open context menu at page ' + args.name); + } +}); +var menuItems = [ + { + text: 'SEARCH_ON_WEB', + id: 'web_search', + iconCss: 'e-icons e-search', + items: [ + { + text: 'SEARCH_IN_GOOGLE_IMAGE', + id: 'web_search_images', + }, + { + text: 'SEARCH_IN_WIKIPEDIA', + id: 'web_search_wikipedia', + }, + { + text: 'SEARCH_IN_YOUTUBE', + id: 'web_search_youtube', + }, + { + text: 'SEARCH_GOOGLE', + id: 'web_search_google', + }, + ], + }, + { + id: 'web_search_separator', + separator: true, + }, +]; + + viewer.appendTo("#pdfViewer"); + viewer.documentLoad = function (args) { + viewer.addCustomMenu(menuItems, false, false); + }; +``` + +## customContextMenuSelect + +The [customContextMenuSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#customcontextmenuselectevent) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id. + +- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customContextMenuSelectEventArgs/). + +- name: Event name +- id: The id of the clicked menu item + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + customContextMenuSelect: function (args) { + console.log('Context menu item selected: ' + args.name); + } +}); +var menuItems = [ + { + text: 'SEARCH_ON_WEB', + id: 'web_search', + iconCss: 'e-icons e-search', + items: [ + { text: 'SEARCH_IN_GOOGLE_IMAGE', id: 'web_search_images' }, + { text: 'SEARCH_IN_WIKIPEDIA', id: 'web_search_wikipedia' }, + { text: 'SEARCH_IN_YOUTUBE', id: 'web_search_youtube' }, + { text: 'SEARCH_GOOGLE', id: 'web_search_google' } + ] + }, + { id: 'web_search_separator', separator: true } +]; + +viewer.appendTo('#pdfViewer'); +viewer.documentLoad = function (args) { + viewer.addCustomMenu(menuItems, false, false); +}; + +``` + +## documentLoad + +The [documentLoad](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadevent) event occurs after a document is successfully loaded and parsed. + +- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + textSelectionStart: function (args) { + console.log('Text selection started on page ' + args.pageIndex + '.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## documentLoadFailed + +The [documentLoadFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentloadfailedevent) event triggers when loading a document fails. + +- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/loadFailedEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/invalid.pdf' +}); +viewer.appendTo('#pdfViewer'); +viewer.documentLoadFailed = function (args) { + console.log('Load failed. Error: ' + args.documentName); +}; +``` + +## documentUnload + +The [documentUnload](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#documentunloadevent) event triggers when closing the current document. + +- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/unloadEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib' +}); +viewer.appendTo('#pdfViewer'); +viewer.documentUnload = function (args) { + console.log('Document unloaded'); +}; +``` + +## downloadEnd + +The [downloadEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadendevent) event triggers after a document download completes. + +- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadEndEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + downloadEnd: function (args) { + console.log('Download finished. File name: ' + args.fileName); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## downloadStart + +The [downloadStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#downloadstartevent) event triggers when the download operation is initiated. + +- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/downloadStartEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + downloadStart: function (args) { + console.log('Download started'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## exportFailed + +The [exportFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportfailedevent) event triggers when exporting annotations fails. + +- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportFailureEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + exportFailed: function (args) { + console.log('Export failed: ' + args.name); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## exportStart + +The [exportStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportstartevent) event triggers when exporting annotations starts. + +- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportStartEventArgs/). + +Example: + +```javascript +// ES5 example: exportStart +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + exportStart: function (args) { + console.log('Export started'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## exportSuccess + +The [exportSuccess](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportsuccessevent) event triggers when annotations are exported successfully. + +- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/exportSuccessEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + exportSuccess: function (args) { + console.log('Export success'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## extractTextCompleted + +The [extractTextCompleted](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#extracttextcompletedevent) event triggers when text extraction completes. + +- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/extractTextCompletedEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + extractTextCompleted: function (args) { + var text = (args.documentTextCollection || ''); + console.log('Extracted text length: ' + text.length); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## hyperlinkClick + +The [hyperlinkClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkclickevent) event triggers when a hyperlink is clicked. + +- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/hyperlinkClickEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + hyperlinkClick: function (args) { + console.log('Hyperlink clicked: ' + args.hyperlink); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## hyperlinkMouseOver + +The [hyperlinkMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink. + +- Event arguments: HyperlinkMouseOverArgs. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + hyperlinkMouseOver: function (args) { + console.log('Hyperlink hover at page: ' + args.name); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## importFailed + +The [importFailed](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importfailedevent) event triggers when importing annotations fails. + +- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importFailureEventArgs/). + +Example: + +```javascript +// ES5 example: importFailed +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + importFailed: function (args) { + console.log('Import failed: ' + args.name); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## importStart + +The [importStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importstartevent) event triggers when importing annotations starts. + +- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importStartEventArgs/). + +Example: + +```javascript +// ES5 example: importStart +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + importStart: function (args) { + console.log('Import started'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## importSuccess + +The [importSuccess](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#importsuccessevent) event triggers when annotations are imported successfully. + +- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/importSuccessEventArgs/). + +Example: + +```javascript +// ES5 example: importSuccess +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + importSuccess: function (args) { + console.log('Import success'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## keyboardCustomCommands + +The [keyboardCustomCommands](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#keyboardcustomcommandsevent) event triggers when customized keyboard command keys are pressed. + +- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs/). + + - name: Event name + - keyboardCommand: The command metadata raised by Command Manager + +When it triggers +- After registering gestures in commandManager.keyboardCommand. For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this to handle custom keyboard shortcuts. + +Refer to [Keyboard interaction](./accessibility#keyboard-interaction) for details about adding and handling custom shortcut keys. +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib' +}); +viewer.commandManager = { + keyboardCommand: [ + { name: 'customCopy', gesture: { pdfKeys: ej.pdfviewer.PdfKeys.G, modifierKeys: ej.pdfviewer.ModifierKeys.Shift | ej.pdfviewer.ModifierKeys.Alt } }, + { name: 'customPaste', gesture: { pdfKeys: ej.pdfviewer.PdfKeys.H, modifierKeys: ej.pdfviewer.ModifierKeys.Shift | ej.pdfviewer.ModifierKeys.Alt } }, + { name: 'customCut', gesture: { pdfKeys: ej.pdfviewer.PdfKeys.Z, modifierKeys: ej.pdfviewer.ModifierKeys.Control } }, + { name: 'customSelectAll', gesture: { pdfKeys: ej.pdfviewer.PdfKeys.E, modifierKeys: ej.pdfviewer.ModifierKeys.Control } } + ] +}; +viewer.appendTo('#pdfViewer'); +viewer.keyboardCustomCommands = function (args) { + console.log('Custom command triggered:', args); +}; +``` + +## moveSignature + +The [moveSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#movesignatureevent) event triggers when a signature is moved across the page. + +- Event arguments: `MoveSignatureEventArgs`. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + moveSignature: function (args) { + console.log('Signature moved on page ' + args.id); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## pageChange + +The [pageChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagechangeevent) event triggers when the current page number changes (for example, via scrolling or navigation controls). + +- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageChangeEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + pageChange: function (args) { + console.log('Page changed from ' + args.previousPageNumber + ' to ' + args.currentPageNumber); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## pageClick + +The [pageClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageclickevent) event triggers when a mouse click occurs on a page. + +- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageClickEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + pageClick: function (args) { + console.log('Page ' + args.pageNumber + ' clicked at (' + args.x + ', ' + args.y + ')'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## pageMouseover + +The [pageMouseover](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagemouseoverevent) event triggers when the mouse moves over a page. + +- Event arguments: `PageMouseoverEventArgs`. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + pageMouseover: function (args) { + console.log('Mouse over page ' + args.name); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## pageOrganizerSaveAs + +The [pageOrganizerSaveAs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer. + +- Event arguments: `PageOrganizerSaveAsEventArgs`. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + pageOrganizerSaveAs: function (args) { + console.log('Page organizer save triggered. File name: ' + args.downloadDocument); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## pageRenderComplete + +The [pageRenderComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerendercompleteevent) event triggers after a page finishes rendering. + +- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderCompleteEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + pageRenderComplete: function (args) { + console.log('Page ' + args.data + ' rendering completed.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## pageRenderInitiate + +The [pageRenderInitiate](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#pagerenderinitiateevent) event triggers when page rendering begins. + +- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pageRenderInitiateEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + pageRenderInitiate: function (args) { + console.log('Page ' + args.jsonData + ' rendering initiated.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## printEnd + +The [printEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printendevent) event triggers when a print action completes. + +- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printEndEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + printEnd: function (args) { + console.log('Print action completed.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## printStart + +The [printStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printstartevent) event triggers when a print action is initiated. + +- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/printStartEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + printStart: function () { + console.log('Print action initiated.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## removeSignature + +The [removeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#removesignatureevent) event triggers when a signature is removed. + +- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/removeSignatureEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + removeSignature: function (args) { + console.log('Signature removed from page ' + args.bounds); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## resizeSignature + +The [resizeSignature](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resizesignatureevent) event triggers when a signature is resized. + +- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/resizeSignatureEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + resizeSignature: function (args) { + console.log('Signature resized on page ' + args.currentPosition ); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## resourcesLoaded + +The [resourcesLoaded](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#resourcesloadedevent) event triggers after the viewer's required resources are loaded. + +- Event arguments: `void`. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + resourcesLoaded: function (args) { + console.log('PDFium resources loaded.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## signaturePropertiesChange + +The [signaturePropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signaturepropertieschangeevent) event triggers when signature properties change. + +- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + signaturePropertiesChange: function (args) { + console.log('Signature properties changed on page ' + args.type ); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## signatureSelect + +The [signatureSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureselectevent) event triggers when a signature is selected. + +- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureSelectEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + signatureSelect: function (args) { + console.log('Signature selected on page ' + args.signature ); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## signatureUnselect + +The [signatureUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#signatureunselectevent) event triggers when a signature is unselected. + +- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/signatureUnselectEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + signatureUnselect: function (args) { + console.log('Signature unselected ' + args.signature ); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## textSearchComplete + +The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchcompleteevent) event triggers when a text search completes. + +- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchCompleteEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + textSearchComplete: function (args) { + console.log('Text search completed.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## textSearchHighlight + +The [textSearchHighlight](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchhighlightevent) event triggers when searched text is highlighted. + +- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchHighlightEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + textSearchHighlight: function (args) { + console.log('Search result ' + args.bounds + ' highlighted.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## textSearchStart + +The [textSearchStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchstartevent) event triggers when a text search is initiated. + +- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchStartEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + textSearchStart: function (args) { + console.log('Text search started for: "' + args.searchText + '"'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## textSelectionEnd + +The [textSelectionEnd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionendevent) event triggers when text selection is complete. + +- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSelectionEndEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + textSelectionEnd: function (args) { + console.log('Text selection ended on page ' + args.pageIndex ); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## textSelectionStart + +The [textSelectionStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textselectionstartevent) event triggers when text selection is initiated. + +- Event arguments: `TextSelectionStartEventArgs`. + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + textSelectionStart: function (args) { + console.log('Text selection started on page ' + args.pageIndex); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## thumbnailClick + +The [thumbnailClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#thumbnailclickevent) event triggers when a thumbnail is clicked. + +- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/thumbnailClickEventArgs/). + +Example: + +```javascript +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, + ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer +); +var viewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + thumbnailClick: function (args) { + console.log('Thumbnail clicked for page index ' + args.pageNumber + '.'); + } +}); +viewer.appendTo('#pdfViewer'); +``` + +> Tip: For annotation and signature-specific events and arguments, see the dedicated Annotations Events topic. + +## See also + +- [Annotation events](./annotations/annotation-event) +- [Form field events](./form-designer/form-field-events) +- [Organize PDF events](./organize-pdf/organize-pdf-events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/feature-module.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/feature-module.md index 50db04aea..f4d465f5f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/feature-module.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/feature-module.md @@ -1,32 +1,31 @@ --- layout: post -title: Feature module in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Feature module in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Feature module in JavaScript PDF Viewer Control | Syncfusion +description: Learn here all about Feature module in Syncfusion Essential JavaScript PDF Viewer control, its elements and more. platform: document-processing -control: Feature module -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Feature module in Javascript Pdfviewer control +# Feature module in JavaScript PDF Viewer Control The PDF Viewer features are segregated into individual feature-wise modules to enable selectively referencing in the application. The required modules should be injected to extend its functionality. The following are the selective modules of PDF Viewer that can be included as required: -The available PdfViewer modules are: - -* **Toolbar**:- Built-in toolbar for better user interaction. -* **Magnification**:- Perform zooming operation for better viewing experience. -* **Navigation**:- Easy navigation across the PDF pages. -* **LinkAnnotation**:- Easy navigation within and outside of the PDF document. -* **ThumbnailView**:- Easy navigation with in the PDF document. -* **BookmarkView**:- Easy navigation based on the bookmark content of the PDF document. -* **TextSelection**:- Select and copy text from a PDF file. -* **TextSearch**:- Search a text easily across the PDF document. -* **Print**:- Print the entire document or a specific page directly from the browser. -* **Annotation**:- Annotations can be added or edited in the PDF document. -* **FormFields**:- Preserve the form fields in the PDF document. -* **FormDesigner**:- Form fields can be added or edited in the PDF document. +The available PDF Viewer modules are: + +* [**Toolbar**](./toolbar-customization):- Built-in toolbar for better user interaction. +* [**Magnification**](./magnification):- Perform zooming operation for better viewing experience. +* [**Navigation**](./interactive-pdf-navigation/page-navigation):- Easy navigation across the PDF pages. +* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation):- Easy navigation within and outside of the PDF document. +* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation):- Easy navigation with in the PDF document. +* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation):- Easy navigation based on the bookmark content of the PDF document. +* [**TextSelection**](./textselection):- Select and copy text from a PDF file. +* [**TextSearch**](./text-search):- Search a text easily across the PDF document. +* [**Print**](./print):- Print the entire document or a specific page directly from the browser. +* [**Annotation**](./annotations/text-markup-annotation):- Annotations can be added or edited in the PDF document. +* [**FormFields**](./form-designer/create-programmatically):- Preserve the form fields in the PDF document. +* [**FormDesigner**](./form-designer/create-programmatically):- Form fields can be added or edited in the PDF document. >In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a PDF Viewer instance. Refer to the following table. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-programmatically.md index d0a9fc88d..3a73f2b88 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-programmatically.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-programmatically.md @@ -1,30 +1,29 @@ --- layout: post -title: Create programmatically in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Create programmatically in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Create form fields in the JavaScript PDF Viewer component | Syncfusion +description: Learn how to add, update, delete, save, print, validate, and import/export form fields in the Syncfusion JavaScript PDF Viewer component. platform: document-processing -control: Create programmatically -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Create programmatically in Javascript Pdfviewer control +# Create programmatically in JavaScript PDF Viewer control -The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are: +The PDF Viewer component provides options to add, edit, and delete form fields. The supported form field types are: - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field ## Add a form field to PDF document programmatically -Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code. +Use the addFormField method to add form fields programmatically. Pass the form field type and the corresponding property object as parameters. The following example demonstrates adding multiple fields on document load. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -35,15 +34,14 @@ Using addFormField method, the form fields can be added to the PDF document prog {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file +N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.html` file: `serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/addformfield-cs1/index.html" %} ## Edit/Update form field programmatically -Using updateFormField method, Form Field can be updated programmatically. We should get the Form Field object/Id from FormFieldCollections property that you would like to edit and pass it as a parameter to updateFormField method. The second parameter should be the properties that you would like to update for Form Field programmatically. We have updated the value and background Color properties of Textbox Form Field. +Use the updateFormField method to modify a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it as the first parameter. Provide the properties to update as the second parameter. The following example updates the background color of a Textbox field. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -54,15 +52,14 @@ Using updateFormField method, Form Field can be updated programmatically. We sho {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file +N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.html` file: `serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/updateformfield-cs1/index.html" %} ## Delete form field programmatically -Using deleteFormField method, the form field can be deleted programmatically. We should retrieve the Form Field object/Id from FormFieldCollections property that you would like to delete and pass it as a parameter to deleteFormField method. To delete a Form Field programmatically, use the following code. +Use the deleteFormField method to remove a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it to deleteFormField. The following example deletes the first form field. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -73,19 +70,18 @@ Using deleteFormField method, the form field can be deleted programmatically. We {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.html` file +N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.html` file: `serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'` {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/deleteformfield-cs1/index.html" %} ## Saving the form fields -When the download icon is selected on the toolbar, the Form Fields will be saved in the PDF document and this action will not affect the original document. Refer the below GIF for further reference. +Selecting the Download icon on the toolbar saves the form fields in the exported PDF without modifying the original document. See the following GIF for reference. - + -You can invoke download action using following code snippet. +You can invoke the download action using the following code snippet. ``` @@ -127,11 +123,11 @@ document.getElementById('download').addEventListener('click', function () { ## Printing the form fields -When the print icon is selected on the toolbar, the PDF document will be printed along with the Form Fields added to the pages and this action will not affect the original document. Refer the below GIF for further reference. +Selecting the Print icon on the toolbar prints the PDF with the added form fields. This action does not modify the original document. See the following GIF for reference. - + -You can invoke print action using the following code snippet., +You can invoke the print action using the following code snippet: ``` @@ -173,7 +169,7 @@ document.getElementById('print').addEventListener('click', function () { ## setFormFieldMode programmatically -The **setFormFieldMode** method is a function in the Syncfusion PDF Viewer library that allows you to add a form field dynamically by passing the type of the form field. You can pass the form fields as a parameter like below. +The setFormFieldMode method enables adding a form field dynamically by specifying the field type. For example, the following adds a Password field when a button is clicked. ``` @@ -211,16 +207,15 @@ document.getElementById('addPasswordField').addEventListener('click', function ( ## Open the existing PDF document -We can open the already saved PDF document contains Form Fields in it by clicking the open icon in the toolbar. Refer the below GIF for further reference. +Open a PDF that already contains form fields by clicking the Open icon on the toolbar. See the following GIF for reference. - + ## Validate form fields -The form fields in the PDF Document will be validated when the `enableFormFieldsValidation` is set to true and hook the validateFormFields. The validateFormFields will be triggered when the PDF document is downloaded or printed with the non-filled form fields. The non-filled fields will be obtained in the `nonFillableFields` property of the event arguments of validateFormFields. - -Add the following code snippet to validate the form fields, +Form fields are validated when `enableFormFieldsValidation` is set to true and the validateFormFields event is handled. The event triggers during download or print if required fields are not filled. The non-filled fields are available in the `nonFillableFields` property of the event arguments. +Add the following code to validate form fields: {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -255,11 +250,11 @@ viewer.validateFormFields = function (args) { ## Export and import form fields -The PDF Viewer control provides the support to export and import the form field data in the following formats using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. +The PDF Viewer component supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods in the following formats: -* FDF -* XFDF -* JSON +- FDF +- XFDF +- JSON ### Export and import as FDF @@ -268,7 +263,7 @@ Using the `exportFormFields` method, the form field data can be exported in the * The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting. * The second parameter should be the format type of the form data. -The following code explains how to export the form field data as FDF. +The following example exports and imports form field data as FDF. ```javascript @@ -293,7 +288,7 @@ document.getElementById('importFdf').addEventListener('click', ()=> { ### Export and import as XFDF -The following code explains how to export the form field data as XFDF. +The following example exports and imports form field data as XFDF. ```javascript @@ -316,7 +311,7 @@ document.getElementById('importXfdf').addEventListener('click', ()=> { ### Export and import as JSON -The following code explains how to export the form field data as JSON. +The following example exports and imports form field data as JSON. ```javascript @@ -340,7 +335,7 @@ document.getElementById('importJson').addEventListener('click', ()=> { ### Export and import as Object -The PDF Viewer control supports exporting the form field data as an object, and the exported data will be imported into the current PDF document from the object. +The PDF Viewer component supports exporting the form field data as an object and importing that data back into the current PDF document. The following code shows how to export the form field data as an object and import the form field data from that object into the current PDF document via a button click. @@ -385,20 +380,20 @@ document.getElementById('importData').addEventListener('click', ()=> { ``` ## Form field properties -Form field properties in Syncfusion PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion PDF Viewer and explains how to use them effectively. +Form field properties allow customization and interaction with fields embedded in PDF documents. The following sections outline the supported field types and their configurable settings. - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field ### Signature and initial fields settings -Using the `updateFormField` method, the form fields can be updated programmatically. +Use the `updateFormField` method to modify form fields programmatically. The following code example explains how to update the signature field properties on a button click. @@ -424,7 +419,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the signature field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a signature field added from the Form Designer toolbar. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -607,7 +602,7 @@ pdfviewer.initialFieldSettings = { Using the `updateFormField` method, the form fields can be updated programmatically. -The following code example explains how to update the Textbox field properties on a button click. +The following example updates Textbox field properties on a button click. ```html @@ -643,7 +638,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the Textbox field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a Textbox field added from the Form Designer toolbar. {% tabs %} @@ -749,7 +744,7 @@ pdfviewer.textFieldSettings = { Using the `updateFormField` method, the form fields can be updated programmatically. -The following code example explains how to update the Password field properties on a button click. +The following example updates Password field properties on a button click. ```html @@ -784,7 +779,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the Password field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a Password field added from the Form Designer toolbar. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -887,7 +882,7 @@ pdfviewer.passwordFieldSettings = { Using the `updateFormField` method, the form fields can be updated programmatically. -The following code example explains how to update the CheckBox field properties on a button click. +The following example updates CheckBox field properties on a button click. ```html @@ -916,7 +911,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the CheckBox field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a CheckBox field added from the Form Designer toolbar. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -990,13 +985,13 @@ pdfviewer.checkBoxFieldSettings = { {% endhighlight %} {% endtabs %} - + ### RadioButton field settings Using the `updateFormField` method, the form fields can be updated programmatically. -The following code example explains how to update the RadioButton field properties on a button click. +The following example updates RadioButton field properties on a button click. ```html @@ -1025,7 +1020,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the RadioButton field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a RadioButton field added from the Form Designer toolbar. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -1101,13 +1096,13 @@ pdfviewer.radioButtonFieldSettings = { {% endhighlight %} {% endtabs %} - + ### ListBox field settings Using the `updateFormField` method, the form fields can be updated programmatically. -The following code example explains how to update the ListBox field properties on a button click. +The following example updates ListBox field properties on a button click. ```html @@ -1140,7 +1135,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the Listbox field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a ListBox field added from the Form Designer toolbar. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -1239,13 +1234,13 @@ pdfviewer.listBoxFieldSettings = { {% endhighlight %} {% endtabs %} - + ### DropDown field settings Using the [updateFormField](https://ej2.syncfusion.com/documentation/api/pdfviewer/#updateformfields) method, the form fields can be updated programmatically. -The following code example explains how to update the DropDown field properties on a button click. +The following example updates DropDown field properties on a button click. ```html @@ -1279,7 +1274,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the Dropdown field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a DropDown field added from the Form Designer toolbar. {% tabs %} @@ -1378,4 +1373,4 @@ pdfviewer.DropdownFieldSettings = { {% endhighlight %} {% endtabs %} - \ No newline at end of file + \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-with-user-interface-interaction.md index 8162303cb..85189f12f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-with-user-interface-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/create-with-user-interface-interaction.md @@ -1,30 +1,29 @@ --- layout: post -title: User interaction in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Create with user interface interaction in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Design form fields in the JavaScript PDF Viewer component | Syncfusion +description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion JavaScript PDF Viewer component. platform: document-processing -control: Create with user interface interaction -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Create with user interface interaction +# Create with user interface interaction for JavaScript -The PDF viewer control provides the option for interaction with Form Fields such as Drag and resize. you can draw a Form Field dynamically by clicking the Form Field icon on the toolbar and draw it in the PDF document. The Form Fields type supported by the PDF Viewer Control are: +The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. Supported form field types include: - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field ## Enable or Disable form designer toolbar -We should inject FormDesigner module and set enableFormDesignerToolbar as true to enable the Form designer icon on the toolbar. By default, enableFormDesignerToolbar is set as true. Use the following code to inject FormDesigner module and to enable the enableFormDesignerToolbar property. +Inject the FormDesigner module and set enableFormDesignerToolbar to true to display the Form Designer icon on the toolbar. The default value is true. Use the following code to enable the toolbar option. @@ -55,41 +54,41 @@ pdfviewer.appendTo('#PdfViewer'); ## Add the form field dynamically -Click the Form Field icon on the toolbar and then click on to the PDF document to draw a Form Field. Refer the below GIF for further reference. +Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference. - + ## Drag the form field -We provide options to drag the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference. +Drag the selected form field to reposition it within the PDF document. See the following GIF for reference. - + ## Resize the form field -We provide options to resize the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference. +Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference. - + ## Edit or Update the form field dynamically -The properties of the Form Fields can be edited using the Form Field Properties window. It can be opened by selecting the Properties option in the context menu that appears on the right by clicking the Form Field object. Refer the below image for the properties available to customize the appearance of the Form Field. +Edit form field properties using the Form Field Properties dialog. Open it by right-clicking a form field and selecting Properties from the context menu. The following images show examples of available settings. - + - + - + ## Clipboard operation with form field -The PDF Viewer control supports the clipboard operations such as cut, copy and paste for Form Fields. You can right click on the Form Field object to view the context menu and select to the clipboard options that you would like to perform. Refer the below image for the options in the context menu. +The PDF Viewer supports clipboard operations such as cut, copy, and paste for form fields. Right-click a form field to open the context menu and choose the desired clipboard action. The following image shows the available options. - + ## Undo and Redo -We provided support to undo/redo the Form Field actions that are performed at runtime. Use the following code example to perform undo/redo actions. +Undo and redo actions are supported for runtime changes made to form fields. Use the following code to perform undo and redo operations. ``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/form-field-events.md index 64f800d72..96246440b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/form-field-events.md @@ -1,15 +1,14 @@ --- layout: post -title: Form Field Events in Javascript Pdfviewer control | Syncfusion -description: Learn here all about different form field in Syncfusion Javascript Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Form Field Events in JavaScript PDF Viewer control | Syncfusion +description: Learn here all about different form field in Syncfusion JavaScript PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Form Field Events -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# PDF Viewer Form Field events +# PDF Viewer Form Field events in JavaScript The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are: diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-filling.md new file mode 100644 index 000000000..dbf113167 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/form-filling.md @@ -0,0 +1,86 @@ +--- +layout: post +title: Form filling in JavaScript PDF Viewer | Syncfusion +description: View, fill, export, and import PDF form fields in Syncfusion JavaScript PDF Viewer, with signature support and interaction control. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Form filling in JavaScript PDF Viewer + +The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data. + +The PDF Viewer supports the following form field types: + +* Text box +* Password +* Check box +* Radio button +* List box +* Dropdown +* Signature field +* Initial field + + + +## Disabling form fields + +The PDF Viewer provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer. + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +ej.pdfviewer.PdfViewer.Inject( + ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation, + ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, + ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner +); + +var pdfviewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + enableFormDesigner: false +}); +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +## Add a handwritten signature to a signature field + +Add a handwritten signature to a signature field by following these steps: + +* Click the signature field in the PDF document to open the signature panel. + + + +* Draw the signature in the signature panel. + + + +* Select **CREATE**. The drawn signature is added to the signature field. + + + +## Delete a signature from a signature field + +Delete a signature placed in a signature field by using the Delete option in the annotation toolbar. + + + +## Export and import form fields + +The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported: + +* FDF +* XFDF +* JSON + +For more information, see the [Form fields documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/form-designer/create-programmatically#export-and-import-form-fields). + +## See also + +* [Handwritten signature in JavaScript PDF Viewer](./annotations/signature-annotation) +* [Form Designer events](./form-designer/form-field-events) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/formdesigner/programmatically-work-with-form-field.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/formdesigner/programmatically-work-with-form-field.md deleted file mode 100644 index c3a4c8cda..000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/formdesigner/programmatically-work-with-form-field.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -layout: post -title: Programmatically work with form field in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Programmatically work with form field in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. -platform: document-processing -control: Programmatically work with form field -publishingplatform: Javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Programmatically work with form field in Javascript Pdfviewer control - -The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are: - - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField - -## Add a form field to PDF document programmatically - -Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/pdfviewer/javascript-es5/addformfield-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/addformfield-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/addformfield-cs2/index.html" %} - -## Edit/Update form field programmatically - -Using updateFormField method, Form Field can be updated programmatically. We should get the Form Field object/Id from FormFieldCollections property that you would like to edit and pass it as a parameter to updateFormField method. The second parameter should be the properties that you would like to update for Form Field programmatically. We have updated the value and background Color properties of Textbox Form Field. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/pdfviewer/javascript-es5/updateformfield-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/updateformfield-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/updateformfield-cs2/index.html" %} - -## Delete form field programmatically - -Using deleteFormField method, the form field can be deleted programmatically. We should retrieve the Form Field object/Id from FormFieldCollections property that you would like to delete and pass it as a parameter to deleteFormField method. To delete a Form Field programmatically, use the following code. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/pdfviewer/javascript-es5/deleteformfield-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/pdfviewer/javascript-es5/deleteformfield-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/deleteformfield-cs2/index.html" %} - -## Saving the form fields - -When the download icon is selected on the toolbar, the Form Fields will be saved in the PDF document and this action will not affect the original document. Refer the below GIF for further reference. - - - -You can invoke download action using following code snippet. - -```javascript -var pdfviewer = new ej.pdfviewer.PdfViewer({ - enableDownload: true, - documentPath: "PDF_Succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.download(); - -``` - -## Printing the form fields - -When the print icon is selected on the toolbar, the PDF document will be printed along with the Form Fields added to the pages and this action will not affect the original document. Refer the below GIF for further reference. - - - -You can invoke print action using the following code snippet., - -```javascript - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - enablePrint: true, - documentPath: "PDF_Succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer' - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print); -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.print.print(); - -``` - -## Open the existing PDF document - -We can open the already saved PDF document contains Form Fields in it by clicking the open icon in the toolbar. Refer the below GIF for further reference. - - \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/formdesigner/user-interaction-with-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/formdesigner/user-interaction-with-form-fields.md deleted file mode 100644 index 6af6e526a..000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/formdesigner/user-interaction-with-form-fields.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -layout: post -title: User interaction with form fields in Javascript Pdfviewer control | Syncfusion -description: Learn here all about User interaction with form fields in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. -platform: document-processing -control: User interaction with form fields -publishingplatform: Javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# User interaction with form fields in Javascript Pdfviewer control - -The PDF viewer control provides the option for interaction with Form Fields such as Drag and resize. you can draw a Form Field dynamically by clicking the Form Field icon on the toolbar and draw it in the PDF document. The Form Fields type supported by the PDF Viewer Control are: - - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField - -## Enable or Disable form designer toolbar - -We should inject FormDesigner module and set enableFormDesignerToolbar as true to enable the Form designer icon on the toolbar. By default, enableFormDesignerToolbar is set as true. Use the following code to inject FormDesigner module and to enable the enableFormDesignerToolbar property. - -```javascript -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "FormDesigner.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', - enableFormDesignerToolbar: true -}); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.FormDesigner); -pdfviewer.appendTo('#PdfViewer'); -``` - -## Add the form field dynamically - -Click the Form Field icon on the toolbar and then click on to the PDF document to draw a Form Field. Refer the below GIF for further reference. - - - -## Drag the form field - -We provide options to drag the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference. - - - -## Resize the form field - -We provide options to resize the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference. - - - -## Edit or Update the form field dynamically - -The properties of the Form Fields can be edited using the Form Field Properties window. It can be opened by selecting the Properties option in the context menu that appears on the right by clicking the Form Field object. Refer the below image for the properties available to customize the appearance of the Form Field. - - - - - - - -## Clipboard operation with form field - -The PDF Viewer control supports the clipboard operations such as cut, copy and paste for Form Fields. You can right click on the Form Field object to view the context menu and select to the clipboard options that you would like to perform. Refer the below image for the options in the context menu. - - - -## Undo and Redo - -We provided support to undo/redo the Form Field actions that are performed at runtime. Use the following code example to perform undo/redo actions. - -```javascript -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "FormDesigner.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer', -}); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.FormDesigner); -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.undo(); -pdfviewer.redo(); -``` \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md index 4849dfaf0..8e98b9384 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started-with-server-backed.md @@ -1,23 +1,23 @@ --- layout: post -title: Getting started with Javascript PDF Viewer control | Syncfusion -description: Checkout and learn about Getting started with Javascript PDF Viewer control of Syncfusion Essential JS 2 and more details. +title: Server-backed JavaScript PDF Viewer | Syncfusion +description: Learn how to set up and use the Syncfusion JavaScript PDF Viewer in server-backed mode using CDN resources, injecting modules and web service configuration. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Getting started in Javascript PDF Viewer control +# Getting started with JavaScript PDF Viewer (server-backed) -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +This guide explains how to create the PDF Viewer component and configure its features in JavaScript (global script) using CDN-hosted resources in server-backed mode. -## Component Initialization with CDN link for script and style reference +> Ensure that the same version is used for all script and style references to avoid compatibility issues. -**Step 1:** Create an app folder `my_app` for the Essential JS 2 JavaScript components. +## Set up the application -**Step 2:** The Essential JS 2 component's global scripts and styles are already hosted in the below CDN link formats. +1. Create an app folder `my_app` for the Essential JS 2 JavaScript components. +2. The Essential JS 2 component's global scripts and styles are already hosted in the following CDN link formats. **Syntax:** > Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js` @@ -29,7 +29,7 @@ The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaS > > Styles: [`https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `my_app` location and add the CDN link references. Now, add the `Div` element and initiate the `Essential JS 2 PDF Viewer` component in the index.html by using following code. +3. Create an HTML page (`index.html`) in the `my_app` location, add the CDN link references, add the `div` element, and initialize the Essential JS 2 PDF Viewer component by using the following code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -49,34 +49,51 @@ N> The Web API hosted link https://document.syncfusion.com/web-services/pdf-view {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es5/es5-getting-started-cs1/index.html" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Essential JS 2 PDF Viewer` component. +## Run the application -> For PDF Viewer serviceUrl creation, follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/create-pdfviewer-service) +Open the `index.html` file in a web browser to render the Essential JS 2 PDF Viewer component. -## How to run the PDF Viewer web service +> For PDF Viewer serviceUrl creation, follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/create-pdfviewer-service). -1. Download the sample from the [Web service sample in GitHub](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) link. +## Module injection -2. Navigate to the `ASP.NET Core` folder and open it in the command prompt. +To enable additional features, inject the required modules. The following modules extend the PDF Viewer's functionality: + +* `LinkAnnotation`: Enables hyperlink navigation. +* `BookmarkView`: Displays and navigates document bookmarks. +* `Magnification`: Provides zoom in/out operations. +* `Navigation`: Enables page navigation. +* `TextSelection`: Enables text selection. +* `ThumbnailView`: Displays page thumbnails for navigation. +* `Toolbar`: Enables the built-in toolbar UI. +* `Print`: Enables printing. +* `Annotation`: Enables annotation features. +* `TextSearch`: Enables text search. +* `FormFields`: Enables form field support. +* `FormDesigner`: Enables designing and editing of form fields. + +## Run the PDF Viewer web service +1. Download the sample from the [Web service sample in GitHub](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices). +2. Navigate to the `ASP.NET Core` folder and open it in the command prompt. 3. Navigate to the appropriate subfolder based on your .NET version: - .NET 6.0 → `PdfViewerWebService_6.0` - .NET 8.0 → `PdfViewerWebService_8.0` -4. Use the below command to restore the required packages. +4. Use the following command to restore the required packages. ``` dotnet restore ``` -5. Use the below command to run the web service. +5. Use the following command to run the web service. ``` dotnet run ``` -6. You can see that the PDF Viewer server instance runs in the local host with the port number `localhost:5001` and navigate to the PDF Viewer Web control `localhost:5001/pdfviewer` which returns the default get response method. We can bind the link to the `serviceUrl` property of PDF Viewer as below. +6. The PDF Viewer server instance runs at `https://localhost:5001`. Navigate to `https://localhost:5001/pdfviewer`, which returns the default GET response method. Bind this link to the `serviceUrl` property of the PDF Viewer as shown below. ```javascript var pdfviewer = new ej.pdfviewer.PdfViewer({ @@ -87,6 +104,8 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ N> When configuring the server-backed PDF viewer, it's essential to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context. +> Refer to the [JavaScript PDF Viewer feature tour](https://www.syncfusion.com/pdf-viewer-sdk) for an overview of capabilities. Explore the [JavaScript PDF Viewer example](https://document.syncfusion.com/demos/pdf-viewer/javascript-es5/#/tailwind3/pdfviewer/default.html) to see core features in action. + N> For hosting the web service on the Linux platform, ensure to include the [SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1). Additionally, for AWS environments, utilize the following packages: | **Amazon Web Services (AWS)** |**NuGet package name** | diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md index e41cacc28..6a005580d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/getting-started.md @@ -1,15 +1,14 @@ --- layout: post -title: Getting started with Javascript PDF Viewer control | Syncfusion -description: Checkout and learn about Getting started with Javascript PDF Viewer control of Syncfusion Essential JS 2 and more details. +title: Getting started with JavaScript PDF Viewer control | Syncfusion +description: Checkout and learn about Getting started with JavaScript PDF Viewer control of Syncfusion Essential JS 2 and more details. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Getting started in Standalone PDF Viewer control +# Getting started in JavaScript Standalone PDF Viewer control The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/globalization.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/globalization.md index c99ed3e1c..b0caafde0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/globalization.md @@ -1,15 +1,14 @@ --- layout: post -title: Globalization in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Globalization in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Globalization in JavaScript PDF Viewer control | Syncfusion +description: Learn here all about Globalization in Syncfusion JavaScript PDF Viewer control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Globalization -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Globalization in Javascript Pdfviewer control +# Globalization in JavaScript PDF Viewer control The text contents provided in the PDF Viewer can be localized using the collection of localized strings for different cultures. By default, the PDF Viewer is localized in “__en-US__”. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md new file mode 100644 index 000000000..08b7d57ce --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md @@ -0,0 +1,69 @@ +--- +layout: post +title: FAQ Section in PDF Viewer control | Syncfusion +description: In this section, you can know about the various questions asked about manipulation of in PDF Viewer control. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Frequently Asked Questions Section in JavaScript PDF Viewer control + +The frequently asked questions in Essential® PDF Viewer are listed below. + +* [How to add annotation in text search in typescript?](./how-to/add-annotation-in-text-search-js) +* [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value) +* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button-js) +* [How to customize the annotation selectors?](./how-to/annotation-selectors) +* [How to change the author name of the annotation dynamically?](./how-to/change-author-name-using-annotation-settings) +* [How to clear all the annotations from the PDF document?](./how-to/clear-annotations) +* [How to configure the annotation selector settings?](./how-to/configure-annotationselector-setting-js) +* [What are the supported conformance or standards of PDF Viewer?](./how-to/conformance) +* [How to change the border color of rectangle annotations?](./how-to/change-rectangle-annotations-border-color) +* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility-js) +* [How to convert the PDF library bounds to PDF viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-js) +* [How to create PDF Viewer service using ASP.NET Core?](./how-to/create-pdfviewer-service-core) +* [How to create PDF viewer web service using ASP.NET MVC?](./how-to/create-pdfviewer-service) +* [How to customize the context menu in PDF Viewer?](./how-to/custom-context-menu) +* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field-js) +* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts) +* [How to add a new page to the pdf document?](./how-to/add-new-page-to-the-pdf-document) +* [How to customize text search highlight color in PDF Viewer?](./how-to/customize-text-search-color) +* [How to delete a specific annotation from the PDF document?](./how-to/delete-annotation) +* [How to disable the context menu?](./how-to/disable-context-menu) +* [How to disable tile rendering in PDF Viewer?](./how-to/disable-tile-rendering) +* [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation) +* [How to download the pdf document when closing the browser window?](./how-to/download-document-on-window-closing) +* [How to focus on a form field after loading a document?](./how-to/focus-on-a-form-field-after-loading) +* [How to get the download start event?](./how-to/download-start-event-js) +* [How to enable or disable the local storage?](./how-to/enable-local-storage-js) +* [Enable the resizer for text markup annotation?](./how-to/enable-resize) +* [How to enable or disable the text selection?](./how-to/enable-text-selection-js) +* [How to export the PDF pages as images?](./how-to/export-as-image-js) +* [How to extract text from the PDF document?](./how-to/extract-text-completed-js) +* [How to extract text from a specific region?](./how-to/extract-text-option-js) +* [How to extract text from the PDF document?](./how-to/extract-text-js) +* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async-js) +* [How to get the base64 string of the loaded document?](./how-to/get-base64-js) +* [How to get the page information of the loaded document?](./how-to/get-page-info-js) +* [How to perform highlight, underline, and strikethrough for the selected text?](./how-to/highlight-underline-strikeout-text) +* [How to identify the added annotation and its mode?](./how-to/identify-added-annotation-mode) +* [How to import annotations from the PDF document?](./how-to/import-annotations) +* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation-js) +* [How to load a PDF document in PDF Viewer?](./how-to/load-document) +* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom-js) +* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark-js) +* [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail) +* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation) +* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-js) +* [How to print the PDF document silently?](./how-to/print-document) +* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error) +* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode-js) +* [How to select annotations in multi page?](./how-to/select-multi-page-annotations) +* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item-js) +* [How to show or hide a particular annotation?](./how-to/show-hide-annotation-js) +* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-js) +* [How to unload the PDF document from the viewer?](./how-to/unload-document) +* [How to use local script and style references?](./how-to/use-local-script-and-style-references) + diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md index b0fbdd140..608f0481f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md @@ -1,39 +1,36 @@ --- layout: post -title: Add Annotation in Text Search in JavaScript PdfViewer | Syncfusion -description: Learn how to add rectangle annotations using search text bounds in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Add rectangle annotation via textSearch | Syncfusion PDF Viewer +description: Learn to add rectangle annotations using text search bounds in the JavaScript PDF Viewer component, including initialization and search controls. platform: document-processing control: PDF Viewer -publishingplatform: Javascript documentation: ug domainurl: ##DomainURL## --- -# Add Rectangle Annotations Using Search Text Bounds in PDF Viewer +# Add rectangle annotations using text search bounds in JS PDF Viewer -## Overview +A concise guide to adding rectangle annotations at highlighted text search results in the JavaScript PDF Viewer to visually emphasize matches and improve readability. -This guide demonstrates how to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer. This technique is useful for emphasizing search results with visual markers in annotation-supported applications. - -## Steps to Add Rectangle Annotations on Search Result Highlight +## Steps to add rectangle annotations on search result highlight **Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a simple PDF Viewer sample. -**Step 2:** Initialize the PDF Viewer with Required Modules +**Step 2:** Initialize the PDF Viewer with the required modules ```js var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - resourceUrl:'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib' + resourceUrl:'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib' }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); pdfviewer.appendTo('#PdfViewer'); ``` -**Step 3:** Implement code blocks to automatically add Rectangle Annotation on Search Result Highlight +**Step 3:** Add a rectangle annotation when a search result is highlighted -Define a callback function for the `textSearchHighlight` event to add rectangle annotations +Define a callback for the `textSearchHighlight` event to add a rectangle annotation at each match. ```js // Highlight event handler for text search, which adds a rectangle annotation where the text is found @@ -50,9 +47,9 @@ pdfviewer.textSearchHighlight = function(args){ } ``` -**Step 3:** Add Search Controls +**Step 4:** Add search controls -Ensure you have the appropriate HTML buttons for text search operations +Ensure that the HTML includes buttons for text search operations. ```html @@ -60,7 +57,7 @@ Ensure you have the appropriate HTML buttons for text search operations ``` -Use the following JavaScript to handle search controls: +Use the following JavaScript code to handle search controls: ```js // Event listener for initiating a search @@ -79,6 +76,6 @@ document.getElementById("searchCancel").addEventListener("click", function() { }); ``` -By following this guide, you will enable the PDF Viewer to add rectangle annotations at search result locations, thus increasing the visibility of search results in your application. +Following these steps enables the PDF Viewer to add rectangle annotations at search result locations, improving the visibility of matches. [View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md index ed3ba91d6..19f5ba372 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md @@ -1,19 +1,17 @@ --- layout: post -title: Add header value in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Add header value in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Add header values to AJAX requests | Syncfusion PDF Viewer +description: Learn how to include custom headers in PDF Viewer AJAX requests using ajaxRequestSettings and ajaxHeaders in the JavaScript PDF Viewer component. platform: document-processing -control: Add header value -publishingplatform: Javascript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Add header value in Javascript Pdfviewer control +# Add header values in the JavaScript PDF Viewer -To add header values to an AJAX request made by a Syncfusion PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request. +Use the ajaxHeaders property in the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) to include custom headers with each AJAX request. -Here is an example of how you can use the **ajaxRequestSettings** property to add a custom header to an AJAX request made by the PDF Viewer: +Example: Add a custom Authorization header using ajaxRequestSettings ```ts @@ -31,4 +29,5 @@ viewer.ajaxRequestSettings = { ``` -Find the sample [how to add custom headers in AjaxRequestSettings](https://stackblitz.com/edit/typescript-nv1way?file=index.ts) \ No newline at end of file +Sample: How to add custom headers using ajaxRequestSettings +[StackBlitz example](https://stackblitz.com/edit/typescript-nv1way?file=index.ts) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md index ef549c88b..8640a9db1 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md @@ -1,23 +1,22 @@ --- layout: post -title: Add new page to the pdf document in Javascript Pdfviewer control | Syncfusion -description: Learn here all about Add new page to the pdf document in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Add new page to PDF document - Syncfusion JavaScript PDF Viewer +description: Learn how to append a new page to a loaded PDF document in the Syncfusion JavaScript PDF Viewer control using the PDF library service. platform: document-processing -control: Add new page to the pdf document -publishingplatform: Javascript +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Add new page to the pdf document in Javascript Pdfviewer control +# Add a new page to a PDF document in JavaScript PDF Viewer control -The PDF Viewer library allows you to add a new page to the PDF document using the PDF library. +The JavaScript PDF Viewer library can append a blank page to any loaded PDF document through the accompanying PDF library service. -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) to create a simple PDF Viewer sample. +**Step 1:** Follow the guidance in the [Getting started with the JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) article to configure a working sample. -**Step 2:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/create-pdfviewer-service/) to create the PDF Viewer web service. +**Step 2:** Complete the web service setup by using this [guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/create-pdfviewer-service). -**Step 3:** Add the following code sample in the PDF Viewer controller code to add a new page in the PDF document using the PDF library. +**Step 3:** Add the following controller action to insert a new page into the loaded PDF document before returning it to the viewer. ```javascript @@ -64,4 +63,4 @@ public IActionResult Load([FromBody] Dictionary