diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index b8283b097..d0fd7af58 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -17,6 +17,9 @@
  • MCP Server
    • +
  • + Prompt Library +
  • Installation
    • +
  • Redaction + +
  • Interaction Mode
  • Form Designer @@ -258,6 +272,7 @@
  • Print the PDF document Programmatically
  • Select multi-page TextMarkup annotation as single annotation
  • Add a Save button in the built-in Toolbar
    • +
  • Load document after resources loaded
  • Troubleshooting @@ -339,6 +354,16 @@
  • Annotations in Mobile view
    • +
  • Redaction + +
  • Interaction Mode
  • Form Designer @@ -428,6 +454,7 @@
  • Select multi-page TextMarkup annotation as single annotation
  • Show Bookmark
  • Add a Save button in the built-in Toolbar
    • +
  • Load document after resources loaded
  • Troubleshooting @@ -513,6 +540,16 @@
  • Annotations in Mobile view
    • +
  • Redaction + +
  • Interaction Mode
  • Form Designer @@ -591,6 +629,7 @@
  • Extract Text
  • Dynamically Enable or Disable Text Selection
  • Show and Hide Annotations
    • +
  • Load document after resources loaded
  • Troubleshooting @@ -627,7 +666,11 @@
  • AWS Elastic Beanstalk
    • -
  • Accessibility
    • +
  • Accessibility + +
  • Open PDF files
  • Form Filling
    • +
  • Organize Pages + +
  • Print
  • Document security
    • +
  • Redaction + +
  • Interaction Mode
  • Form Designer @@ -911,6 +975,7 @@
  • Extract Text
  • Show and Hide Annotation
  • Dynamically Enable or Disable Text Selection
    • +
  • Load document after resources loaded
  • Troubleshooting @@ -997,6 +1062,16 @@
  • Comments
    • +
  • Redaction + +
  • Interaction Mode
  • Form Designer @@ -1076,6 +1152,7 @@
  • Highlight Underline Strikeout Text
  • Import Annotations
  • Overlapped Annotation
    • +
  • Load document after resources loaded
  • Troubleshooting @@ -1160,6 +1237,16 @@
  • Annotations Events
    • +
  • Redaction + +
  • Interaction Mode
  • Form Designer @@ -1250,6 +1338,7 @@
  • Focus on a form field on document load
  • Use local script and style references
  • Add new page to PDF document
    • +
  • Load document after resources Loaded
  • Troubleshooting @@ -1340,23 +1429,53 @@
  • Annotations in Mobile view
    • +
  • Redaction + +
  • Interaction Mode
    • -
  • Form Designer +
  • Forms
    • -
  • Form Filling
  • Organize Pages @@ -1425,6 +1544,7 @@
  • Extract Text
  • Dynamically Enable or Disable Text Selection
  • Show and Hide Annotations
    • +
  • Load document after resources loaded
  • Troubleshooting @@ -2441,6 +2561,44 @@
    • +
  • + JavaScript + + +
  • Flutter
    • @@ -5853,7 +6015,7 @@ Does XlsIO support reading Excel from Azure Blob Storage?
  • - Does XlsIO support auto-correcting formulas? + Does XlsIO support auto-correcting formulas?
  • How are spaces in cell values handled by XlsIO during calculation? @@ -5891,6 +6053,21 @@
  • How to extract embedded OLE files from an Excel workbook as streams?
    • +
  • + How to copy the used range from one Excel workbook to another? +
    • +
  • + How does XlsIO handle empty string display text in hyperlinks? +
    • +
  • + What is the maximum row height in Excel? +
    • +
  • + Does XlsIO support importing HTML images into Excel? +
    • +
  • + How to apply number formatting to an entire column in Excel? +
    • @@ -7034,6 +7211,12 @@
  • Release Notes -.NET 8/.NET 9 +.NET 8/.NET 9/.NET 10 diff --git a/Document-Processing/PDF/PDF-Library/NET/Working-with-PDF-Conformance.md b/Document-Processing/PDF/PDF-Library/NET/Working-with-PDF-Conformance.md index 30a3ab9f7..1566ea575 100644 --- a/Document-Processing/PDF/PDF-Library/NET/Working-with-PDF-Conformance.md +++ b/Document-Processing/PDF/PDF-Library/NET/Working-with-PDF-Conformance.md @@ -1220,7 +1220,30 @@ You can create a PDF/X-1a document by specifying the conformance level as ```Pdf {% highlight c# tabtitle="C# [Cross-platform]" %} -//Creating PDF/X-conformance documents is not supported on C#.NET cross-platform environments. +using Syncfusion.Pdf; +using Syncfusion.Pdf.Graphics; + +//Create a new document with PDF/x standard. +PdfDocument document = new PdfDocument(PdfConformanceLevel.Pdf_X1A2001); +//Add a page. +PdfPage page = document.Pages.Add(); +//Set color space. +document.ColorSpace = PdfColorSpace.CMYK; + +//Create Pdf graphics for the page. +PdfGraphics graphics = page.Graphics; +//Create a solid brush. +PdfBrush brush = new PdfSolidBrush(Color.Black); +//Load the TrueType font from the local file. +FileStream fontStream = new FileStream("Arial.ttf", FileMode.Open, FileAccess.Read); +//Set the font. +PdfFont font = new PdfTrueTypeFont(fontStream, 14); +//Draw the text. +graphics.DrawString("Hello world!", pdfFont, brush, new PointF(20, 20)); + +//Save and close the document. +document.Save("Output.pdf"); +document.Close(true); {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md new file mode 100644 index 000000000..3e7366ed3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md @@ -0,0 +1,2193 @@ +--- +title: Annotation in JavaScript PDF library | Syncfusion +description: This section explains how to create, modify or remove different type of interactive Annotation by using JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Annotation in JavaScript PDF library + +The PDF library provides support for interactive annotations. You can add, delete and modify the annotation from the PDF documents. + +## Adding annotations to a PDF document + +This example demonstrates how to add annotations to a PDF document using the `PdfAnnotation` class. Adding annotations allows users to include comments, highlights, shapes, and other interactive elements within a PDF, enhancing collaboration and document review. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationBorder} from '@syncfusion/ej2-pdf'; + +// Creates a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Creates a new popup annotation +let popup = new PdfPopupAnnotation( + 'Test popup annotation', + { x: 10, y: 40, width: 30, height: 30 }, + { + author: 'Syncfusion', + subject: 'General', + color: { r: 255, g: 255, b: 0 }, + icon: PdfPopupIcon.newParagraph, + open: true + }); +popup.border = new PdfAnnotationBorder({width: 4, hRadius: 20, vRadius: 30}); +// Adds annotation to the page +page.annotations.add(popup); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Creates a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Creates a new popup annotation +var popup = new ej.pdf.PdfPopupAnnotation('Test popup annotation',{x:10,y:40,width:30,height:30},{ +author:'Syncfusion', +subject:'General', +color:{r:255,g:255,b:0}, +icon:ej.pdf.PdfPopupIcon.newParagraph, +open:true +}); +popup.border = new ej.pdf.PdfAnnotationBorder({width:4,hRadius:20,vRadius:30}); +// Adds annotation to the page +page.annotations.add(popup); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a popup annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationBorder} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Creates a new popup annotation +let popup = new PdfPopupAnnotation( + 'Test popup annotation', + { x: 10, y: 40, width: 30, height: 30 }, + { + author: 'Syncfusion', + subject: 'General', + color: { r: 255, g: 255, b: 0 }, + icon: PdfPopupIcon.newParagraph, + open: true + }); +popup.border = new PdfAnnotationBorder({width: 4, hRadius: 20, vRadius: 30}); +// Adds annotation to the page +page.annotations.add(popup); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Creates a new popup annotation +var popup = new ej.pdf.PdfPopupAnnotation('Test popup annotation',{x:10,y:40,width:30,height:30},{ +author:'Syncfusion', +subject:'General', +color:{r:255,g:255,b:0}, +icon:ej.pdf.PdfPopupIcon.newParagraph, +open:true +}); +popup.border = new ej.pdf.PdfAnnotationBorder({width:4,hRadius:20,vRadius:30}); +// Adds annotation to the page +page.annotations.add(popup); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Supported annotation types + +### File Link Annotation + +This example demonstrates how to add a file link annotation to a PDF page using the `PdfFileLinkAnnotation` class. A file link annotation allows linking to an external file from within a PDF document, enabling users to access related resources directly. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfFileLinkAnnotation} from '@syncfusion/ej2-pdf'; + +// Creates a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Creates a file link annotation +let fileLink = new PdfFileLinkAnnotation( + { x: 100, y: 150, width: 120, height: 18 }, + 'logo.png', + { + text: 'Open attachment', + author: 'Syncfusion', + subject: 'File Link Annotation', + color: { r: 0, g: 0, b: 255 }, + action: "app.alert('Launching file');" + }); +// Adds annotation to the page +page.annotations.add(fileLink); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Creates a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Creates a file link annotation +var fileLink = new ej.pdf.PdfFileLinkAnnotation({x:100,y:150,width:120,height:18},'logo.png',{ +text:'Open attachment', +author:'Syncfusion', +subject:'File Link Annotation', +color:{r:0,g:0,b:255}, +action:"app.alert('Launching file');" +}); +// Adds annotation to the page +page.annotations.add(fileLink); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a file link annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfFileLinkAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Creates a file link annotation +let fileLink = new PdfFileLinkAnnotation( + { x: 100, y: 150, width: 120, height: 18 }, + 'logo.png', + { + text: 'Open attachment', + author: 'Syncfusion', + subject: 'File Link Annotation', + color: { r: 0, g: 0, b: 255 }, + action: "app.alert('Launching file');" + }); +// Adds annotation to the page +page.annotations.add(fileLink); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Creates a file link annotation +var fileLink = new ej.pdf.PdfFileLinkAnnotation({x:100,y:150,width:120,height:18},'logo.png',{ +text:'Open attachment', +author:'Syncfusion', +subject:'File Link Annotation', +color:{r:0,g:0,b:255}, +action:"app.alert('Launching file');" +}); +// Adds annotation to the page +page.annotations.add(fileLink); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Free Text Annotation + +This example demonstrates how to add a free text annotation to a PDF page using the `PdfFreeTextAnnotation` class. A free text annotation allows placing text directly on a PDF page, enabling users to add comments or notes that remain visible without requiring interaction. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationIntent, PdfAnnotationBorder, PdfBorderStyle, PdfLineEndingStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; + +// Creates a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create new free text annotation +let freeText = new PdfFreeTextAnnotation({ x: 250, y: 260, width: 180, height: 80 }, + { + text: 'Free Text with Callout', + annotationIntent: PdfAnnotationIntent.freeTextCallout, + calloutLines: [{ x: 200, y: 320 }, { x: 260, y: 300 }, { x: 260, y: 300 }], + lineEndingStyle: PdfLineEndingStyle.openArrow, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular), + textMarkUpColor: { r: 40, g: 40, b: 40 }, + innerColor: { r: 240, g: 248, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + textAlignment: PdfTextAlignment.left, + opacity: 1, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Adds annotation to the page +page.annotations.add(freeText); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Creates a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create new free text annotation +var freeText = new ej.pdf.PdfFreeTextAnnotation({x:250,y:260,width:180,height:80},{ +text:'Free Text with Callout', +annotationIntent:ej.pdf.PdfAnnotationIntent.freeTextCallout, +calloutLines:[{x:200,y:320},{x:260,y:300},{x:260,y:300}], +lineEndingStyle:ej.pdf.PdfLineEndingStyle.openArrow, +font:new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica,9,ej.pdf.PdfFontStyle.italic), +textMarkUpColor:{r:40,g:40,b:40}, +innerColor:{r:240,g:248,b:255}, +borderColor:{r:0,g:0,b:0}, +textAlignment:ej.pdf.PdfTextAlignment.left, +opacity:1, +border:new ej.pdf.PdfAnnotationBorder({width:1,hRadius:0,vRadius:0,style:ej.pdf.PdfBorderStyle.solid}) +}); +// Adds annotation to the page +page.annotations.add(freeText); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a free text annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfAnnotationIntent, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationBorder, PdfBorderStyle, PdfLineEndingStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create new free text annotation +let freeText = new PdfFreeTextAnnotation({ x: 250, y: 260, width: 180, height: 80 }, + { + text: 'Free Text with Callout', + annotationIntent: PdfAnnotationIntent.freeTextCallout, + calloutLines: [{ x: 200, y: 320 }, { x: 260, y: 300 }, { x: 260, y: 300 }], + lineEndingStyle: PdfLineEndingStyle.openArrow, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); + textMarkUpColor: { r: 40, g: 40, b: 40 }, + innerColor: { r: 240, g: 248, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + textAlignment: PdfTextAlignment.left, + opacity: 1, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Adds annotation to the page +page.annotations.add(freeText); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create new free text annotation +var freeText = new ej.pdf.PdfFreeTextAnnotation({x:250,y:260,width:180,height:80},{ + text:'Free Text with Callout', + annotationIntent:ej.pdf.PdfAnnotationIntent.freeTextCallout, + calloutLines:[{x:200,y:320},{x:260,y:300},{x:260,y:300}], + lineEndingStyle:ej.pdf.PdfLineEndingStyle.openArrow, + font:new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica,9,ej.pdf.PdfFontStyle.italic), + textMarkUpColor:{r:40,g:40,b:40}, + innerColor:{r:240,g:248,b:255}, + borderColor:{r:0,g:0,b:0}, + textAlignment:ej.pdf.PdfTextAlignment.left, + opacity:1, + border:new ej.pdf.PdfAnnotationBorder({width:1,hRadius:0,vRadius:0,style:ej.pdf.PdfBorderStyle.solid}) +}); +// Adds annotation to the page +page.annotations.add(freeText); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Line Annotation + +This example demonstrates how to add a line annotation to a PDF page using the `PdfLineAnnotation` class. A line annotation allows drawing straight lines between two points on a PDF page, often used to highlight connections or indicate measurements. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType} from '@syncfusion/ej2-pdf'; + +// Creates a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Creates a new line annotation. +let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 80, y: 420 }, { x: 150, y: 420 }, { + text: 'Line Annotation', + author: 'Syncfusion', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 255, b: 0 }, + lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }), + opacity: 0.5 +}); +// Assigns the leader line +lineAnnotation.leaderExt = 0; +lineAnnotation.leaderLine = 0; +// Assigns the line caption type +lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline }); +// Adds annotation to the page +page.annotations.add(lineAnnotation); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Creates a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Creates a new line annotation. +var lineAnnotation = new ej.pdf.PdfLineAnnotation({x:80,y:420},{x:150,y:420},{ +text:'Line Annotation', +author:'Syncfusion', +color:{r:255,g:0,b:0}, +innerColor:{r:255,g:255,b:0}, +lineEndingStyle:new ej.pdf.PdfAnnotationLineEndingStyle({begin:ej.pdf.PdfLineEndingStyle.circle,end:ej.pdf.PdfLineEndingStyle.diamond}), +opacity:0.5 +}); +// Assigns the leader line +lineAnnotation.leaderExt = 0; +lineAnnotation.leaderLine = 0; +// Assigns the line caption type +lineAnnotation.caption = new ej.pdf.PdfAnnotationCaption({cap:true,type:ej.pdf.PdfLineCaptionType.inline}); +// Adds annotation to the page +page.annotations.add(lineAnnotation); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a line annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Creates a new line annotation. +let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 80, y: 420 }, { x: 150, y: 420 }, { + text: 'Line Annotation', + author: 'Syncfusion', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 255, b: 0 }, + lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }), + opacity: 0.5 +}); +// Assigns the leader line +lineAnnotation.leaderExt = 0; +lineAnnotation.leaderLine = 0; +// Assigns the line caption type +lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline }); +// Adds annotation to the page +page.annotations.add(lineAnnotation); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Creates a new line annotation. +var lineAnnotation = new ej.pdf.PdfLineAnnotation({x:80,y:420},{x:150,y:420},{ +text:'Line Annotation', +author:'Syncfusion', +color:{r:255,g:0,b:0}, +innerColor:{r:255,g:255,b:0}, +lineEndingStyle:new ej.pdf.PdfAnnotationLineEndingStyle({begin:ej.pdf.PdfLineEndingStyle.circle,end:ej.pdf.PdfLineEndingStyle.diamond}), +opacity:0.5 +}); +// Assigns the leader line +lineAnnotation.leaderExt = 0; +lineAnnotation.leaderLine = 0; +// Assigns the line caption type +lineAnnotation.caption = new ej.pdf.PdfAnnotationCaption({cap:true,type:ej.pdf.PdfLineCaptionType.inline}); +// Adds annotation to the page +page.annotations.add(lineAnnotation); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Rubber stamp Annotation + +This example demonstrates how to add a rubber stamp annotation to a PDF page using the `PdfRubberStampAnnotation` class. A rubber stamp annotation allows applying predefined or custom stamp to visually indicate the status or purpose of a document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfRubberStampAnnotationIcon} from '@syncfusion/ej2-pdf'; + +// Creates a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Creates a new rubber stamp annotation +let stamp: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 40, y: 60, width: 80, height: 20 }, + { + icon: PdfRubberStampAnnotationIcon.draft, + text: 'Text Properties Rubber Stamp Annotation' + }); +// Adds annotation to the page +page.annotations.add(stamp); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Creates a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Creates a new rubber stamp annotation +var stamp = new ej.pdf.PdfRubberStampAnnotation({x:40,y:60,width:80,height:20},{ + icon:ej.pdf.PdfRubberStampAnnotationIcon.draft, + text:'Text Properties Rubber Stamp Annotation' +}); +// Adds annotation to the page +page.annotations.add(stamp); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a rubber stamp annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfRubberStampAnnotationIcon} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Creates a new rubber stamp annotation +let stamp: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 40, y: 60, width: 80, height: 20 }, + { + icon: PdfRubberStampAnnotationIcon.draft, + text: 'Text Properties Rubber Stamp Annotation' + }); +// Adds annotation to the page +page.annotations.add(stamp); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Creates a new rubber stamp annotation +var stamp = new ej.pdf.PdfRubberStampAnnotation({x:40,y:60,width:80,height:20},{ + icon:ej.pdf.PdfRubberStampAnnotationIcon.draft, + text:'Text Properties Rubber Stamp Annotation' +}); +// Adds annotation to the page +page.annotations.add(stamp); +// Saves and download the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Ink Annotation + +This example demonstrates how to add an ink annotation to a PDF page using the `PdfInkAnnotation` class. An ink annotation allows drawing freehand marks or sketches directly on a PDF page. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfInkAnnotation} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a new page to the PDF +let page: PdfPage = document.addPage(); +// Create an ink annotation +let annotation = new PdfInkAnnotation( + { x: 50, y: 100, width: 200, height: 150 }, + [ + { x: 60, y: 120 }, + { x: 120, y: 180 }, + { x: 200, y: 160 } + ], + { + text: 'Ink', + author: 'Syncfusion', + subject: 'Ink Annotation', + color: { r: 0, g: 0, b: 255 }, + thickness: 2, + opacity: 0.8, + pointsCollection: [ + [ + { x: 60, y: 120 }, + { x: 90, y: 130 }, + { x: 110, y: 140 } + ], + [ + { x: 120, y: 180 }, + { x: 150, y: 175 } + ] + ] + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a new page to the PDF +var page = document.addPage(); +// Create an ink annotation +var annotation = new ej.pdf.PdfInkAnnotation( + {x:50,y:100,width:200,height:150}, + [{x:60,y:120},{x:120,y:180},{x:200,y:160}], + { + text:'Ink', + author:'Syncfusion', + subject:'Ink Annotation', + color:{r:0,g:0,b:255}, + thickness:2, + opacity:0.8, + pointsCollection:[ + [{x:60,y:120},{x:90,y:130},{x:110,y:140}], + [{x:120,y:180},{x:150,y:175}] + ] + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a ink annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfInkAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create an ink annotation +let annotation = new PdfInkAnnotation( + { x: 50, y: 100, width: 200, height: 150 }, + [ + { x: 60, y: 120 }, + { x: 120, y: 180 }, + { x: 200, y: 160 } + ], + { + text: 'Ink', + author: 'Syncfusion', + subject: 'Ink Annotation', + color: { r: 0, g: 0, b: 255 }, + thickness: 2, + opacity: 0.8, + pointsCollection: [ + [ + { x: 60, y: 120 }, + { x: 90, y: 130 }, + { x: 110, y: 140 } + ], + [ + { x: 120, y: 180 }, + { x: 150, y: 175 } + ] + ] + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create an ink annotation +var annotation = new ej.pdf.PdfInkAnnotation( + {x:50,y:100,width:200,height:150}, + [{x:60,y:120},{x:120,y:180},{x:200,y:160}], + { + text:'Ink', + author:'Syncfusion', + subject:'Ink Annotation', + color:{r:0,g:0,b:255}, + thickness:2, + opacity:0.8, + pointsCollection:[ + [{x:60,y:120},{x:90,y:130},{x:110,y:140}], + [{x:120,y:180},{x:150,y:175}] + ] + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Pop-up Annotation + +This example demonstrates how to add a popup annotation to a PDF document using the `PdfPopupAnnotation` class. A popup annotation allows you to display additional information or comments within the PDF at a specified position and size. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new popup annotation +let annotation = new PdfPopupAnnotation('Review this paragraph', +{x: 10, y: 40, width: 30, height: 30}, +{ + author: 'Reviewer', + subject: 'General', + color: { r: 255, g: 255, b: 0 }, + icon: PdfPopupIcon.comment, + open: true, + state: PdfAnnotationState.accepted, + stateModel: PdfAnnotationStateModel.review +} +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new popup annotation +var annotation = new ej.pdf.PdfPopupAnnotation('Review this paragraph',{x:10,y:40,width:30,height:30},{ + author:'Reviewer', + subject:'General', + color:{r:255,g:255,b:0}, + icon:ej.pdf.PdfPopupIcon.comment, + open:true, + state:ej.pdf.PdfAnnotationState.accepted, + stateModel:ej.pdf.PdfAnnotationStateModel.review +}); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a popup annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +let annotation = new PdfPopupAnnotation('Review this paragraph', + {x: 10, y: 40, width: 30, height: 30}, + { +author: 'Reviewer', + subject: 'General', + color: { r: 255, g: 255, b: 0 }, + icon: PdfPopupIcon.comment, + open: true, + state: PdfAnnotationState.accepted, + stateModel: PdfAnnotationStateModel.review + } + ); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new popup annotation +var annotation = new ej.pdf.PdfPopupAnnotation('Review this paragraph',{x:10,y:40,width:30,height:30},{ + author:'Reviewer', + subject:'General', + color:{r:255,g:255,b:0}, + icon:ej.pdf.PdfPopupIcon.comment, + open:true, + state:ej.pdf.PdfAnnotationState.accepted, + stateModel:ej.pdf.PdfAnnotationStateModel.review +}); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### File Attachment Annotation + +This example demonstrates how to add a file attachment annotation to a PDF page using the `PdfAttachmentAnnotation` class. A file attachment annotation allows embedding external files within a PDF document, enabling users to include supporting documents or resources for easy access. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new attachment annotation +let annotation = new PdfAttachmentAnnotation( + { x: 300, y: 200, width: 30, height: 30 }, + 'Nature.jpg', + imageData, + { text: 'Attachment', icon: PdfAttachmentIcon.pushPin, color: { r: 255, g: 0, b: 0 }, opacity: 1, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })} + ); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new attachment annotation +var annotation = new ej.pdf.PdfAttachmentAnnotation( + {x:300,y:200,width:30,height:30}, + 'Nature.jpg', + imageData, + { + text:'Attachment', + icon:ej.pdf.PdfAttachmentIcon.pushPin, + color:{r:255,g:0,b:0}, + opacity:1, + border:new ej.pdf.PdfAnnotationBorder({width:1,hRadius:0,vRadius:0,style:ej.pdf.PdfBorderStyle.solid}) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a file attachment annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new attachment annotation +let annotation = new PdfAttachmentAnnotation( + { x: 300, y: 200, width: 30, height: 30 }, + 'Nature.jpg', + imageData, + { text: 'Attachment', icon: PdfAttachmentIcon.pushPin, color: { r: 255, g: 0, b: 0 }, opacity: 1, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })} + ); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new attachment annotation +var annotation = new ej.pdf.PdfAttachmentAnnotation( + {x:300,y:200,width:30,height:30}, + 'Nature.jpg', + imageData, + { + text:'Attachment', + icon:ej.pdf.PdfAttachmentIcon.pushPin, + color:{r:255,g:0,b:0}, + opacity:1, + border:new ej.pdf.PdfAnnotationBorder({width:1,hRadius:0,vRadius:0,style:ej.pdf.PdfBorderStyle.solid}) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### URI Annotation + +This example demonstrates how to add a URI annotation to a PDF page using the `PdfUriAnnotation` class. A URI annotation allows linking to a web address or online resource from within a PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new URI annotation +let annotation: PdfUriAnnotation = new PdfUriAnnotation({ x: 100, y: 150, width: 200, height: 100 }, 'http://www.google.com'); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new URI annotation +var annotation = new ej.pdf.PdfUriAnnotation({x:100,y:150,width:200,height:100},'http://www.google.com'); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a URI annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new URI annotation +let annotation: PdfUriAnnotation = new PdfUriAnnotation({ x: 100, y: 150, width: 200, height: 100 }, 'http://www.google.com'); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new URI annotation +var annotation = new ej.pdf.PdfUriAnnotation({x:100,y:150,width:200,height:100},'http://www.google.com'); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Document Link Annotation + +This example demonstrates how to add a document link annotation to a PDF page using the `PdfDocumentLinkAnnotation` class. A document link annotation allows creating clickable links that navigate to a specific page or location within the same PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestination, PdfAnnotationBorder, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create new document link annotation +let annotation = new PdfDocumentLinkAnnotation( + { x: 80, y: 100, width: 120, height: 18 }, + new PdfDestination({page, location: { x: 0, y: 0 }, mode: PdfDestinationMode.fitToPage}), + { +color: { r: 0, g: 128, b: 0 }, opacity: 1, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })} + ); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create new document link annotation +var annotation = new ej.pdf.PdfDocumentLinkAnnotation( + {x:80,y:100,width:120,height:18}, + new ej.pdf.PdfDestination({page:page,location:{x:0,y:0},mode:ej.pdf.PdfDestinationMode.fitToPage}), + {color:{r:0,g:128,b:0},opacity:1,border:new ej.pdf.PdfAnnotationBorder({width:1,hRadius:0,vRadius:0,style:ej.pdf.PdfBorderStyle.solid})} +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a document link annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestination, PdfAnnotationBorder, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create new document link annotation +let annotation = new PdfDocumentLinkAnnotation( + { x: 80, y: 100, width: 120, height: 18 }, + new PdfDestination({page, location: { x: 0, y: 0 }, mode: PdfDestinationMode.fitToPage}), + { +color: { r: 0, g: 128, b: 0 }, opacity: 1, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })} + ); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create new document link annotation +var annotation = new ej.pdf.PdfDocumentLinkAnnotation( + { x: 80, y: 100, width: 120, height: 18 }, + new ej.pdf.PdfDestination({ + page: page, + location: { x: 0, y: 0 }, + mode: ej.pdf.PdfDestinationMode.fitToPage + }), + { + color: { r: 0, g: 128, b: 0 }, + opacity: 1, + border: new ej.pdf.PdfAnnotationBorder({ + width: 1, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Redaction Annotation + +This example demonstrates how to add a redaction annotation to a PDF page using the `PdfRedactionAnnotation` class. A redaction annotation allows marking areas of a PDF for permanent removal of sensitive content, ensuring confidentiality and compliance with privacy requirements. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new redaction annotation +let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({ x: 100, y: 100, width: 100, height: 100 }, + { +borderColor: { r: 255, g: 0, b: 0}, + repeatText: true, + overlayText: 'Sample Overlay', + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular), + textColor: { r: 0, g: 0, b: 0}, + appearanceFillColor: { r: 255, g: 255, b: 255} +}); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new redaction annotation +var annotation = new ej.pdf.PdfRedactionAnnotation( + { x: 100, y: 100, width: 100, height: 100 }, + { + borderColor: { r: 255, g: 0, b: 0 }, + repeatText: true, + overlayText: 'Sample Overlay', + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular), + textColor: { r: 0, g: 0, b: 0 }, + appearanceFillColor: { r: 255, g: 255, b: 255 } + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a redaction annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new redaction annotation +let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({ x: 100, y: 100, width: 100, height: 100 }, + { +borderColor: { r: 255, g: 0, b: 0}, + repeatText: true, + overlayText: 'Sample Overlay', + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular), + textColor: { r: 0, g: 0, b: 0}, + appearanceFillColor: { r: 255, g: 255, b: 255} +}); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new redaction annotation +var annotation = new ej.pdf.PdfRedactionAnnotation( + { x: 100, y: 100, width: 100, height: 100 }, + { + borderColor: { r: 255, g: 0, b: 0 }, + repeatText: true, + overlayText: 'Sample Overlay', + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular), + textColor: { r: 0, g: 0, b: 0 }, + appearanceFillColor: { r: 255, g: 255, b: 255 } + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Watermark Annotation + +This example demonstrates how to add a watermark annotation to a PDF page using the `PdfWatermarkAnnotation` class. A watermark annotation allows overlaying text or images on a PDF page, typically used for branding, confidentiality notices, or document status indicators. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new water mark annotation +let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', { x: 50, y: 100, width: 100, height: 50 }); +// Set the color of the annotation +annotation.color = { r: 0, g: 0, b: 0}; +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new watermark annotation +var annotation = new ej.pdf.PdfWatermarkAnnotation('Water Mark', { x: 50, y: 100, width: 100, height: 50 }); +// Set the color of the annotation +annotation.color = { r: 0, g: 0, b: 0 }; +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a watermark annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new water mark annotation +let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', { x: 50, y: 100, width: 100, height: 50 }); +// Set the color of the annotation +annotation.color = { r: 0, g: 0, b: 0}; +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new watermark annotation +var annotation = new ej.pdf.PdfWatermarkAnnotation('Water Mark', { x: 50, y: 100, width: 100, height: 50 }); +// Set the color of the annotation +annotation.color = { r: 0, g: 0, b: 0 }; +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Text Markup Annotation + +This example demonstrates how to add a text markup annotation to a PDF page using the `PdfTextMarkupAnnotation` class. A text markup annotation allows highlighting, underlining, or striking out text within a PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new text markup annotation +// Create a new text markup annotation +let annotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, { +boundsCollection: [{ x: 50, y: 200, width: 120, height: 14}, { x: 50, y: 215, width: 90, height: 14}], + textMarkupType: PdfTextMarkupAnnotationType.underline, author: 'Syncfusion', subject: 'Annotation', + textMarkUpColor: { r: 0, g: 128, b: 255}, innerColor: { r: 0, g: 0, b: 255}, opacity: 0.5, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new text markup annotation +var annotation = new ej.pdf.PdfTextMarkupAnnotation( + 'Water Mark', + { x: 0, y: 0, width: 0, height: 0 }, + { + boundsCollection: [ + { x: 50, y: 200, width: 120, height: 14 }, + { x: 50, y: 215, width: 90, height: 14 } + ], + textMarkupType: ej.pdf.PdfTextMarkupAnnotationType.underline, + author: 'Syncfusion', + subject: 'Annotation', + textMarkUpColor: { r: 0, g: 128, b: 255 }, + innerColor: { r: 0, g: 0, b: 255 }, + opacity: 0.5, + border: new ej.pdf.PdfAnnotationBorder({ + width: 1, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a text markup annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new text markup annotation +// Create a new text markup annotation +let annotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, { +boundsCollection: [{ x: 50, y: 200, width: 120, height: 14}, { x: 50, y: 215, width: 90, height: 14}], + textMarkupType: PdfTextMarkupAnnotationType.underline, author: 'Syncfusion', subject: 'Annotation', + textMarkUpColor: { r: 0, g: 128, b: 255}, innerColor: { r: 0, g: 0, b: 255}, opacity: 0.5, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new text markup annotation +var annotation = new ej.pdf.PdfTextMarkupAnnotation( + 'Water Mark', + { x: 0, y: 0, width: 0, height: 0 }, + { + boundsCollection: [ + { x: 50, y: 200, width: 120, height: 14 }, + { x: 50, y: 215, width: 90, height: 14 } + ], + textMarkupType: ej.pdf.PdfTextMarkupAnnotationType.underline, + author: 'Syncfusion', + subject: 'Annotation', + textMarkUpColor: { r: 0, g: 128, b: 255 }, + innerColor: { r: 0, g: 0, b: 255 }, + opacity: 0.5, + border: new ej.pdf.PdfAnnotationBorder({ + width: 1, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Rectangle Annotation + +This example demonstrates how to add a rectangle annotation to a PDF page using the `PdfRectangleAnnotation` class. A rectangle annotation allows drawing rectangular shapes on a PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new rectangle annotation with bounds +let annotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, { +text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 240, b: 240 }, + opacity: 0.6, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new rectangle annotation with bounds +var annotation = new ej.pdf.PdfRectangleAnnotation( + { x: 50, y: 80, width: 200, height: 100 }, + { + text: 'Rect', + author: 'Syncfusion', + subject: 'Rectangle Annotation', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 240, b: 240 }, + opacity: 0.6, + border: new ej.pdf.PdfAnnotationBorder({ + width: 1, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a rectangle annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new square annotation with bounds +let annotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, { +text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 240, b: 240 }, + opacity: 0.6, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new square annotation with bounds +var annotation = new ej.pdf.PdfRectangleAnnotation( + { x: 50, y: 80, width: 200, height: 100 }, + { + text: 'Rect', + author: 'Syncfusion', + subject: 'Rectangle Annotation', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 240, b: 240 }, + opacity: 0.6, + border: new ej.pdf.PdfAnnotationBorder({ + width: 1, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Polygon Annotation + +This example demonstrates how to add a polygon annotation to a PDF page using the `PdfPolygonAnnotation` class. A polygon annotation allows drawing multi-sided shapes on a PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new polygon annotation with bounds +let annotation = new PdfPolygonAnnotation( +[{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }], + { +text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation', + color: { r: 0, g: 128, b: 255 }, + innerColor: { r: 220, g: 240, b: 255 }, + opacity: 0.7, + border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new polygon annotation with bounds +var annotation = new ej.pdf.PdfPolygonAnnotation( + [ + { x: 100, y: 300 }, + { x: 150, y: 200 }, + { x: 300, y: 200 }, + { x: 350, y: 300 }, + { x: 300, y: 400 }, + { x: 150, y: 400 } + ], + { + text: 'Polygon', + author: 'Syncfusion', + subject: 'Polygon Annotation', + color: { r: 0, g: 128, b: 255 }, + innerColor: { r: 220, g: 240, b: 255 }, + opacity: 0.7, + border: new ej.pdf.PdfAnnotationBorder({ + width: 2, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a polygon annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new polygon annotation with bounds +let annotation = new PdfPolygonAnnotation( +[{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }], + { +text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation', + color: { r: 0, g: 128, b: 255 }, + innerColor: { r: 220, g: 240, b: 255 }, + opacity: 0.7, + border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new polygon annotation with bounds +var annotation = new ej.pdf.PdfPolygonAnnotation( + [ + { x: 100, y: 300 }, + { x: 150, y: 200 }, + { x: 300, y: 200 }, + { x: 350, y: 300 }, + { x: 300, y: 400 }, + { x: 150, y: 400 } + ], + { + text: 'Polygon', + author: 'Syncfusion', + subject: 'Polygon Annotation', + color: { r: 0, g: 128, b: 255 }, + innerColor: { r: 220, g: 240, b: 255 }, + opacity: 0.7, + border: new ej.pdf.PdfAnnotationBorder({ + width: 2, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Circle Annotation + +This example demonstrates how to add a circle annotation to a PDF page using the `PdfCircleAnnotation` class. A circle annotation allows drawing circular or oval shapes on a PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new circle annotation with circle bounds +let annotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, { +text: 'Diameter', + author: 'Syncfusion', + color: { r: 255, g: 0, b: 0}, + innerColor: { r: 255, g: 255, b: 200}, + opacity: 0.9, + border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2]}), + measure: { unit: PdfMeasurementUnit.centimeter, type: PdfCircleMeasurementType.diameter } +}); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new circle annotation with circle bounds +var annotation = new ej.pdf.PdfCircleAnnotation( + { x: 50, y: 100, width: 120, height: 120 }, + { + text: 'Diameter', + author: 'Syncfusion', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 255, b: 200 }, + opacity: 0.9, + border: new ej.pdf.PdfAnnotationBorder({ + width: 2, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.dashed, + dash: [3, 2] + }), + measure: { unit: ej.pdf.PdfMeasurementUnit.centimeter, type: ej.pdf.PdfCircleMeasurementType.diameter } + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a circle annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new circle annotation with circle bounds +let annotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, { +text: 'Diameter', + author: 'Syncfusion', + color: { r: 255, g: 0, b: 0}, + innerColor: { r: 255, g: 255, b: 200}, + opacity: 0.9, + border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2]}), + measure: { unit: PdfMeasurementUnit.centimeter, type: PdfCircleMeasurementType.diameter } +}); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new circle annotation with circle bounds +var annotation = new ej.pdf.PdfCircleAnnotation( + { x: 50, y: 100, width: 120, height: 120 }, + { + text: 'Diameter', + author: 'Syncfusion', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 255, g: 255, b: 200 }, + opacity: 0.9, + border: new ej.pdf.PdfAnnotationBorder({ + width: 2, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.dashed, + dash: [3, 2] + }), + measure: { + unit: ej.pdf.PdfMeasurementUnit.centimeter, + type: ej.pdf.PdfCircleMeasurementType.diameter + } + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Ellipse Annotation + +This example demonstrates how to add an ellipse annotation to a PDF page using the `PdfEllipseAnnotation` class. An ellipse annotation allows drawing elliptical shapes on a PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Adds a new page to the PDF +let page: PdfPage = document.addPage(); +// Create a new ellipse annotation with bounds +let annotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, { +text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation', + color: { r: 0, g: 128, b: 255}, + innerColor: { r: 220, g: 240, b: 255}, + opacity: 0.7, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Adds a new page to the PDF +var page = document.addPage(); +// Create a new ellipse annotation with bounds +var annotation = new ej.pdf.PdfEllipseAnnotation( + { x: 80, y: 120, width: 160, height: 100 }, + { + text: 'Ellipse', + author: 'Syncfusion', + subject: 'Ellipse Annotation', + color: { r: 0, g: 128, b: 255 }, + innerColor: { r: 220, g: 240, b: 255 }, + opacity: 0.7, + border: new ej.pdf.PdfAnnotationBorder({ + width: 1, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a ellipse annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new ellipse annotation with bounds +let annotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, { +text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation', + color: { r: 0, g: 128, b: 255}, + innerColor: { r: 220, g: 240, b: 255}, + opacity: 0.7, + border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid }) + }); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new ellipse annotation with bounds +var annotation = new ej.pdf.PdfEllipseAnnotation( + { x: 80, y: 120, width: 160, height: 100 }, + { + text: 'Ellipse', + author: 'Syncfusion', + subject: 'Ellipse Annotation', + color: { r: 0, g: 128, b: 255 }, + innerColor: { r: 220, g: 240, b: 255 }, + opacity: 0.7, + border: new ej.pdf.PdfAnnotationBorder({ + width: 1, + hRadius: 0, + vRadius: 0, + style: ej.pdf.PdfBorderStyle.solid + }) + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Measurement Annotations + +This example demonstrates how to access a measurement annotation from a PDF page using the `PdfLineAnnotation` class. A measurement annotation allows defining and displaying dimensions such as distances or lengths within a PDF document. + +Common types of measurement annotations include: + +* Line - Represents a straight distance between two points. +* Circle - Used to measure circular dimensions. +* Square - Defines rectangular or square measurements. +* Angle - Displays angular measurements between two intersecting lines. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfLineAnnotation, PdfMeasurementUnit} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access the annotation at index 0 +let annotation: PdfLineAnnotation = page.annotations.at(0) PdfLineAnnotation; +// Sets the measurement unit of line measurement annoation as centimeter +annotation.unit = PdfMeasurementUnit.centimeter; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access the annotation at index 0 +var annotation = page.annotations.at(0); +// Sets the measurement unit of line measurement annotation as centimeter +if (annotation instanceof ej.pdf.PdfLineAnnotation) { + annotation.unit = ej.pdf.PdfMeasurementUnit.centimeter; +} +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Modifying the annotations + +This example demonstrates how to modify an existing annotation in a PDF page using the PdfAnnotation class. Modifying annotations allows updating properties such as position, color, content, or appearance, enabling customization and refinement of the document's interactive elements. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfPopupAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Get the first annotation of the page +let annotation: PdfPopupAnnotation = page.annotations.at(0) as PdfPopupAnnotation; +// Modified its properties +annotation.text = 'Popup annotation'; +annotation.color = { r: 0, g: 128, b: 255} +; +annotation.opacity = 0.5; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Get the first annotation of the page +var annotation = page.annotations.at(0); +// Modify its properties (only if it's a Popup annotation) +if (annotation instanceof ej.pdf.PdfPopupAnnotation) { + annotation.text = 'Popup annotation'; + annotation.color = { r: 0, g: 128, b: 255 }; + annotation.opacity = 0.5; +} +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Removing annotations from an existing PDF + +This example demonstrates how to remove an annotation from a PDF page using the PdfAnnotationCollection class. Removing annotations allows deleting comments, shapes, or other interactive elements from a PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access first annotation from the PDF page +let annotation: PdfAnnotation = page.annotations.at(0); +// Remove an annotation from the collection +page.annotations.remove(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access first annotation from the PDF page +var annotation = page.annotations.at(0); +// Remove an annotation from the collection +page.annotations.remove(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Flatten annotation + +This example demonstrates how to flatten annotations in a PDF document using the PdfAnnotation class. Flattening annotations converts interactive elements such as comments, highlights, and shapes into static content. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfLineAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first page +let page: PdfPage = document.getPage(0) as PdfPage; +// Get the first annotation of the page +let annotation: PdfLineAnnotation = page.annotations.at(0) as PdfLineAnnotation; +// Sets the boolean flag indicating whether the annotation have been flattened or not. +annotation.flatten = true; +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the first page +var page = document.getPage(0); +// Get the first annotation of the page +var annotation = page.annotations.at(0); +// Sets the boolean flag indicating whether the annotation has been flattened +if (annotation instanceof ej.pdf.PdfLineAnnotation) { + annotation.flatten = true; +} +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Importing annotations + +This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, DataFormat} from '@syncfusion/ej2-pdf'; + +// Load the base PDF document from resources +let pdfDocument: PdfDocument = new PdfDocument(data); +// Imports annotations from to the PDF document. +document.importAnnotations('annotations.json', DataFormat.json); +// Save the PDF document +pdfDocument.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the base PDF document from resources +var pdfDocument = new ej.pdf.PdfDocument(data); +// Import annotations into the PDF document +pdfDocument.importAnnotations('annotations.json', ej.pdf.DataFormat.json); +// Save the PDF document +pdfDocument.save('Output.pdf'); +// Close the document +pdfDocument.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Exporting annotations + +This example demonstrates how to export annotations from a PDF document using the PdfDocument.exportAnnotations method. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Exports the annotations from the PDF document. +let data: Uint8Array = document.exportAnnotations(); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Export the annotations from the PDF document +var data = document.exportAnnotations(); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md new file mode 100644 index 000000000..ed93592c3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md @@ -0,0 +1,292 @@ +--- +title: Bookmarks in JavaScript PDF library | Syncfusion +description: This section explains how to add, modify and remove bookmarks in the PDF document by using JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Bookmarks in JavaScript PDF library + +Syncfusion® PDF provides support to insert, remove and modify the bookmarks in the PDF Document. + +## Adding Bookmarks in a PDF + +This example demonstrates how to add bookmarks to a PDF document using the `PdfBookmark` class. Bookmarks provide an easy way to navigate through different sections of a PDF file. + +{% tabs %} +{% highlight javascript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add page +let page: PdfPage = document.addPage(); +// Get the bookmarks +let bookmarks: PdfBookmarkBase = document.bookmarks; +// Add a new outline to the PDF document +let bookmark: PdfBookmark = bookmarks.add('Introduction'); +// Sets destination to the bookmark +bookmark.destination = new PdfDestination(page, { x: 100, y: 200 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add page +var page = document.addPage(); +// Get the bookmarks +var bookmarks = document.bookmarks; +// Add a new outline to the PDF document +var bookmark = bookmarks.add('Introduction'); +// Set destination to the bookmark +bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Adding Bookmarks in an existing PDF document + +This example demonstrates how to add bookmarks to an existing PDF document using the `PdfBookmark` class. This allows you to enhance navigation in already created PDF document. + +{% tabs %} +{% highlight javascript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get page +let page: PdfPage = document.getPage(0); +// Get the bookmarks +let bookmarks: PdfBookmarkBase = document.bookmarks; +// Gets the bookmark at the specified index +let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark; +// Set the destination +bookmark.destination = new PdfDestination(page, { x: 100, y: 200 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get page +var page = document.getPage(0); +// Get the bookmarks +var bookmarks = document.bookmarks; +// Get the bookmark at the specified index +var bookmark = bookmarks.at(0); +// Set the destination +bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Inserting Bookmarks in an existing PDF + +This example demonstrates how to insert bookmarks at a specific position in an existing PDF document using the `PdfBookmark` class. This feature allows precise control over bookmark order. + +{% tabs %} +{% highlight javascript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first page +let page: PdfPage = document.getPage(0) as PdfPage; +// Get the bookmarks +let bookmarks: PdfBookmarkBase = document.bookmarks; +// Add a new outline to the PDF document +let bookmark: PdfBookmark = bookmarks.add('Introduction', 1); +// Sets destination to the bookmark +bookmark.destination = new PdfDestination(page, { x: 100, y: 200 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the first page +var page = document.getPage(0); +// Get the bookmarks +var bookmarks = document.bookmarks; +// Add a new outline to the PDF document +var bookmark = bookmarks.add('Introduction', 1); +// Set destination to the bookmark +bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Removing Bookmarks from an existing PDF + +This example demonstrates how to remove bookmarks from an existing PDF document using the `PdfBookmark` class. +{% tabs %} +{% highlight javascript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first page +let page: PdfPage = document.getPage(0) as PdfPage; +// Get the bookmarks +let bookmarks: PdfBookmarkBase = document.bookmarks; +// Remove specified bookmark from the document. +bookmarks.remove('Introduction'); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the first page +var page = document.getPage(0); +// Get the bookmarks +var bookmarks = document.bookmarks; +// Remove specified bookmark from the document +bookmarks.remove('Introduction'); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Removing Bookmark from the document at the specified index + +This example demonstrates how to remove bookmarks from the document at the specific index using the `PdfBookmark` class. + +{% tabs %} +{% highlight javascript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first page +let page: PdfPage = document.getPage(0) as PdfPage; +// Get the bookmarks +let bookmarks: PdfBookmarkBase = document.bookmarks; +// Remove the bookmark from the document at the index 1. +bookmarks.remove(1); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the first page +var page = document.getPage(0); +// Get the bookmarks +var bookmarks = document.bookmarks; +// Remove the bookmark from the document at index 1 +bookmarks.remove(1); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Removing all the Bookmark from the collection + +This example demonstrates how to removes all the bookmarks from the collection using the `PdfBookmark` class. + +{% tabs %} +{% highlight javascript tabtitle="TypeScript" %} +import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the bookmarks +let bookmarks: PdfBookmarkBase = document.bookmarks; +// Remove all the bookmark from the collection. +bookmarks.clear(); +// Get count after removal of all outlines. +let count: number = bookmarks.count; +// Save the document +document.save('Output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the bookmarks +var bookmarks = document.bookmarks; +// Remove all the bookmarks from the collection +bookmarks.clear(); +// Get count after removal of all outlines +var count = bookmarks.count; +// Save the document +document.save('Output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Bookmark page index in an existing PDF document + +This example demonstrates how to retrieve the page index associated with a bookmark in an existing PDF document using the `PdfBookmark` class. This helps identify the exact location of the bookmark. + +{% tabs %} +{% highlight javascript tabtitle="TypeScript" %} +import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get bookmarks +let bookmarks: PdfBookmarkBase = document.bookmarks; +// Get bookmark at the specified index +let pageIndex: number = bookmarks.destination.pageIndex; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get bookmarks +var bookmarks = document.bookmarks; +// Get the first bookmark (or any specific one) +var bookmark = bookmarks.at(0); +// Get the page index of the bookmark's destination +var pageIndex = bookmark.destination.pageIndex; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md new file mode 100644 index 000000000..c9e755322 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md @@ -0,0 +1,108 @@ +--- +layout: post +title: Create or Generate PDF file in Angular | Syncfusion +description: Learn how to create a PDF file in Angular with easy steps using Syncfusion JavaScript PDF library without depending on Adobe +platform: document-processing +control: PDF +documentation: ug +keywords: angular create pdf, angular generate pdf, angular pdf library, ej2 pdf angular, JavaScript +--- + +# Create or Generate PDF file in Angular application + +The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files. + +This guide explains how to integrate the JavaScript PDF library into an Angular application. + +## Setup Angular Environment + +You can use the [Angular CLI](https://github.com/angular/angular-cli) to setup your Angular applications. +To install the latest Angular CLI globally use the following command. + +```bash +npm install -g @angular/cli +``` + +N> Use the command **npm install --save @angular/cli@12.0.2** to install the Angular CLI version 12.0.2 + +## Create an Angular Application + +Start a new Angular application using the Angular CLI command as follows. + +```bash +ng new my-app +cd my-app +``` + +## Installing Syncfusion® JavaScript PDF package + +All the available JS 2 packages are published in `npmjs.com` registry. + +* To install PDF component, use the following command. + +```bash +npm install @syncfusion/ej2-pdf --save +``` +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. + +## Create a PDF document using TypeScript + +* Add a simple button to `app.component.html` and attach a click handler that uses the TypeScript PDF API to create a new PDF document. + +{% tabs %} +{% highlight html tabtitle="app.component.html" %} + + + PDF creation example + + + + + +{% endhighlight %} +{% endtabs %} + +* Include the following namespaces in `app.component.ts` file. + +{% tabs %} +{% highlight ts tabtitle="~/app.component.ts" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf'; +{% endhighlight %} +{% endtabs %} + +* Include the following code example in the click event of the button in `app.component.ts` to generate a PDF document. + +{% tabs %} +{% highlight ts tabtitle="app.component.ts" %} +document.getElementById('normalButton').onclick = (): void => { + // Create a new PDF document + const document = new PdfDocument(); + // Add a new page + const page: PdfPage = document.addPage(); + // Get graphics from the page + const graphics: PdfGraphics = page.graphics; + // Set font + const font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular); + // Create a new black brush + const brush = new PdfBrush({r: 0, g: 0, b: 0}); + // Draw text + graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush); + // Save and download PDF + document.save('Output.pdf'); + // Destroy the PDF document instance + document.destroy(); +}; +{% endhighlight %} +{% endtabs %} + +## Run the application + +Use the following command to run the application in browser. + +```javascript +ng serve --open +``` + +By executing the program, you will get the PDF document as follows. + +![Output PDF document](Getting_started_images/Output.png) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md new file mode 100644 index 000000000..7fa08b1cb --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md @@ -0,0 +1,84 @@ +--- +layout: post +title: Create or Generate PDF in ASP.NET Core | Syncfusion +description: Learn how to create or generate a PDF file in ASP.NET Core applications with easy steps using Syncfusion JavaScript PDF library without depending on Adobe. +platform: document-processing +control: PDF +documentation: ug +keywords: .net core create pdf, edit pdf, merge, pdf form, fill form, digital sign, table, javascript, dotnet core pdf, asp generate pdf, aspx generate pdf +--- + +# Create or Generate PDF in ASP.NET Core + +The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, forms, and secure PDF files. + +This guide explains how to integrate the JavaScript PDF library into an ASP.NET Core application. + +## Integrate PDF library into an ASP.NET Core application + +Step 1: Start Visual Studio and select **Create a new project**. +Step 2: In the **Create a new project** dialog, select **ASP.NET Core Web App**. +![ASP.NET Core PDF creation1](Getting_started_images/Asp-net-core-creation1.png) +Step 3: In the **Configure your new project** dialog, enter the project name and select **Next**. +![ASP.NET Core PDF creation2](Getting_started_images/Asp-net-core-creation2.png) +Step 4: In the **Additional information** dialog, select a .NET LTS version (for example, **.NET 8.0 (Long-term Support)**) and then select **Create**. +![ASP.NET Core PDF creation3](Getting_started_images/Asp-net-core-creation3.png) + +Step 5: **Add script reference** : Add the required scripts using the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows: + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + + +{% endhighlight %} +{% endtabs %} + +N> Check out the following topics for including script references in an ASP.NET Core application to enable PDF creation using the Syncfusion® JavaScript PDF library: +* [CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference) +* [NPM Package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm) +* [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator) +N> And ensure the application includes an `openjpeg` folder under `wwwroot` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. + +Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. + +{% tabs %} +{% highlight cshtml tabtitle="~/Index.cshtml" %} +
    +

    Create PDF document

    +

    Click the button to generate and download a PDF.

    + +
    +@section Scripts { + +} +{% endhighlight %} +{% endtabs %} + +step 7: **Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project. + +Step 8: **Run the project** : Click the Start button (green arrow) or press F5 to run the app. + +By executing the program, you will generate the following PDF document. + +![ASP.NET Core PDF output](Getting_started_images/Output.png) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md new file mode 100644 index 000000000..ab4cfb54d --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md @@ -0,0 +1,81 @@ +--- +layout: post +title: Create or Generate PDF file in ASP.NET Core MVC | Syncfusion +description: Learn how to create a PDF file in ASP.NET Core MVC with easy steps using Syncfusion JavaScript PDF library without depending on Adobe +platform: document-processing +control: PDF +documentation: ug +keywords: MVC, javascript, pdf +--- + +# Create or Generate PDF file in ASP.NET Core MVC + +The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files. + +This guide explains how to integrate the JavaScript PDF library into an ASP.NET Core MVC application. + +## Integrate PDF library into an ASP.NET MVC application + +Step 1: Start Visual Studio and select **Create a new project**. +Step 2: Create a new ASP.NET MVC Web Application project. +![ASP.NET Core MVC PDF creation1](Getting_started_images/Asp-net-mvc-creation1.png) +Step 3: Choose the target framework. +![ASP.NET Core MVC PDF creation2](Getting_started_images/Asp-net-mvc-creation2.png) +Step 4: Select Web Application pattern (MVC) for the project and then select **Create** button. +![ASP.NET Core MVC PDF creation3](Getting_started_images/Asp-net-mvc-creation3.png) + +Step 5: **Add script reference** : Add the required scripts using the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows: + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + ... + + + +{% endhighlight %} +{% endtabs %} + +N> And ensure the application includes an `openjpeg` folder under `Scripts` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`. + +Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. + +{% tabs %} +{% highlight cshtml tabtitle="~/Index.cshtml" %} +
    +

    Create PDF document

    +

    Click the button to generate and download a PDF.

    + +
    +@section Scripts { + +} +{% endhighlight %} +{% endtabs %} + +Step 7: **Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project. + +Step 8: **Run the project** : Click the Start button (green arrow) or press F5 to run the app. + +By executing the program, you will generate the following PDF document. + +![ASP.NET Core MVC PDF output](Getting_started_images/Output.png) diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md new file mode 100644 index 000000000..a1c972f74 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md @@ -0,0 +1,84 @@ +--- +layout: post +title: Create or Generate PDF file in JavaScript | Syncfusion +description: Learn how to create a PDF file in JavaScript with easy steps using Syncfusion JavaScript PDF library without depending on Adobe +platform: document-processing +control: PDF +documentation: ug +keywords: javascript, pdf, script +--- + +# Create or Generate PDF file in JavaScript + +The Syncfusion® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. + +## Component Initialization with CDN link for script and style reference + +Step 1: Create an app folder `my-app` for the JS 2 JavaScript components. + +Step 2: The JS 2 component's global scripts and styles are already hosted in the below CDN link formats. + +**Syntax:** +> Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js` +> +> Styles: `https://cdn.syncfusion.com/ej2/{Version}/{PACKAGE_NAME}/styles/material.css` + +**Example:** +> Script: [`https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js) +> +> Styles: [`https://cdn.syncfusion.com/ej2/31.2.15/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/31.2.15/ej2-base/styles/material.css) + +Step 3: Create a HTML page (index.html) in `my-app` location and add the CDN link references. + +{% tabs %} +{% highlight html tabtitle="index.html" %} + + + + +{% endhighlight %} +{% endtabs %} + +Step 4: **Create a PDF document** : Add the script in `index.html` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. + +{% tabs %} +{% highlight html tabtitle="~/Index.html" %} +
    +

    Create PDF document

    +

    Click the button to generate and download a PDF.

    + +
    +@section Scripts { + +} +{% endhighlight %} +{% endtabs %} + +N> For the JavaScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: +* `openjpeg.js` +* `openjpeg.wasm` + +Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading. + +By executing the program, you will get the PDF document as follows. + +![Output PDF document](Getting_started_images/Output.png) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md new file mode 100644 index 000000000..7316f44d8 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md @@ -0,0 +1,81 @@ +--- +layout: post +title: Create or Generate PDF file in React | Syncfusion +description: Learn how to create a PDF file in React with easy steps using Syncfusion JavaScript PDF library without depending on Adobe +control: PDF +platform: document-processing +documentation: ug +keywords: javascript, pdf, script, react +--- + +# Create or Generate PDF file in React + +The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files. + +This guide explains how to integrate the JavaScript PDF library into an React application. + +## Installing Syncfusion® JavaScript PDF package + +All the available JS 2 packages are published in `npmjs.com` registry. + +* To install PDF component, use the following command. + +```bash +npm install @syncfusion/ej2-pdf --save +``` +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. + +* Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: +```bash +cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/openjpeg +``` +* Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF. +* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section. + +**Create a PDF document** : Add the script in `App.jsx` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. + +{% tabs %} +{% highlight jsx tabtitle="~/App.jsx" %} +import React from 'react'; + +export default function App() { + const createPdf = () => { + // Create a new PDF document + let pdf = new ej.pdf.PdfDocument(); + // Add a new page (fixed: use pdf.addPage instead of document.addPage) + let page: ej.pdf.PdfPage = pdf.addPage(); + // Get graphics from the page + let graphics: ej.pdf.PdfGraphics = page.graphics; + // Set font + let font: ej.pdf.PdfStandardFont = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular); + // Create a new black brush + let brush = new ej.pdf.PdfBrush({ r: 0, g: 0, b: 0 }); + // Draw text + graphics.drawString('Hello World!!!', font, { x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60 }, brush); + // Save and download PDF + pdf.save('Output.pdf'); + // Destroy the PDF document instance + pdf.destroy(); + }; + + return ( +
    + +
    + ); +} +{% endhighlight %} +{% endtabs %} + +## Run the application + +Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. + +``` +npm run dev +``` +By executing the program, you will get the PDF document as follows. + +![Output PDF document](Getting_started_images/Output.png) diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md new file mode 100644 index 000000000..10a2f269d --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md @@ -0,0 +1,92 @@ +--- +layout: post +title: Create or Generate PDF file in TypeScript | Syncfusion +description: Learn how to create a PDF file in TypeScript with easy steps using Syncfusion TypeScript PDF library without depending on Adobe +platform: document-processing +control: PDF +documentation: ug +keywords: pdf, script, typescript +--- + +# Create or Generate PDF file in TypeScript + +The Syncfusion® TypeScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files. + +This guide explains how to integrate the TypeScript PDF library into an TypeScript application. + +## Dependencies + +The following list of dependencies are required to use the `TypeScript PDF library` component in your application. + +```typescript +|-- @syncfusion/ej2-compression +|-- @syncfusion/ej2-base +``` + +## Create a PDF document using TypeScript. + +* Add a simple button to `index.html` and attach a click handler that uses the TypeScript PDF API to create a new PDF document. + +{% tabs %} +{% highlight html tabtitle="index.html" %} + + + Button onclick Example + + + + + +{% endhighlight %} +{% endtabs %} + +N> For the TypeScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following: +* `openjpeg.js` +* `openjpeg.wasm` + +Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading. + +* Include the following namespaces in `index.ts` file. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfPen, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; +{% endhighlight %} +{% endtabs %} + +* Include the following code example in the click event of the button in `index.ts` to generate a PDF document + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +document.getElementById('normalButton').onclick = (): void => { +// Create a new PDF document + let pdf = new PdfDocument(); + // Add a new page + let page: PdfPage = pdf.addPage(); + // Get graphics from the page + let graphics: PdfGraphics = page.graphics; + // Set font + let font: PdfStandardFont = pdf.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular); + // Create a new black brush + let brush = new PdfBrush({r: 0, g: 0, b: 0}); + // Draw text + graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush); + // Save and download PDF + pdf.save('Output.pdf'); + // Destroy the PDF document instance + pdf.destroy(); +}; +{% endhighlight %} +{% endtabs %} + +* **Run the application** + +The quickstart project is configured to compile and run in the browser. Use the following command to start the application: + +```javascript +npm start +``` + +By executing the program, you will get the PDF document as follows. + +![Output PDF document](Getting_started_images/Output.png) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md new file mode 100644 index 000000000..49269bf01 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md @@ -0,0 +1,108 @@ +--- +layout: post +title: Create or Generate PDF file in Vue | Syncfusion +description: Learn how to create a PDF file in Vue with easy steps using Syncfusion JavaScript PDF library without depending on Adobe +control: PDF +platform: document-processing +documentation: ug +keywords: pdf, script, vue, javascript +--- + +# Create or Generate PDF file in Vue application + +The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files. + +This guide explains how to integrate the JavaScript PDF library into an Vue application. + +## Setting up the Vue 2 project + +To generate a Vue 2 project using Vue-CLI, use the [Vue create](https://cli.vuejs.org/#getting-started) command. Follow these steps to install Vue CLI and create a new project: + +```bash +npm install -g @vue/cli +vue create quickstart +cd quickstart +``` + +or + +```bash +yarn global add @vue/cli +vue create quickstart +cd quickstart +``` + +When creating a new project, choose the option `Default ([Vue 2] babel, es-lint)` from the menu. + +![Vue 2 project](Getting_started_images/vue2-terminal.png) + +Once the `quick start` project is set up with default settings, proceed to add Syncfusion® components to the project. + +* **Installing Syncfusion® JavaScript PDF package** + +All the available JS 2 packages are published in `npmjs.com` registry. + +* To install PDF component, use the following command. + +```bash +npm install @syncfusion/ej2-pdf --save +``` +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. + +* Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command: +```bash +cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/js/openjpeg +``` +* Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF. +* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section. + +* **Create a PDF document** : Add the script in `App.vue` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document. + +{% tabs %} +{% highlight vue tabtitle="~/App.vue" %} + +{% endhighlight %} +{% endtabs %} + +## Run the project + +To run the project, use the following command: + +```bash +npm run serve +``` +or + +```bash +yarn run serve +``` + +By executing the program, you will generate the following PDF document. + +![Vue PDF output](Getting_started_images/Output.png) diff --git a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md new file mode 100644 index 000000000..77ebc784a --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md @@ -0,0 +1,563 @@ +--- +title: Digital Signature in JavaScript PDF library | Syncfusion +description: This section explains how to create a digital signature in the PDF document by using JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Digital Signature in JavaScript PDF library + +The PDF provides support to create, validate, and manage digital signatures in PDF documents, ensuring authenticity, integrity, and security. + +## Adding a digital signature + +This example demonstrates how to add a digital signature to a PDF document using the `PdfSignature` class. Digital signatures ensure document authenticity and integrity by applying cryptographic standards. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf'; + +// Load the document +let document: PdfDocument = new PdfDocument() +// Get the first page of the document +let page: PdfPage = document.addPage(); +// Access the PDF form +let form: PdfForm = document.form; +// Create a new signature field +let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { + x: 10, + y: 10, + width: 100, + height: 50 +}); +// Create a new signature using PFX data and private key +let sign: PdfSignature = PdfSignature.create( + { + cryptographicStandard: CryptographicStandard.cms, + digestAlgorithm: DigestAlgorithm.sha256 + }, + certData, + password +); +// Set the signature to the field +field.setSignature(sign); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(); +// Get the first page of the document +var page = document.addPage(); +// Access the PDF form +var form = document.form; +// Create a new signature field +var field = new ej.pdf.PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50}); +// Create a new signature using PFX data and private key +var sign = ej.pdf.PdfSignature.create({cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.DigestAlgorithm.sha256}, certData, password); +// Set the signature to the field +field.setSignature(sign); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a digital signature in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf'; + +// Load the document +let document: PdfDocument = new PdfDocument(data) +// Get the first page of the document +let page: PdfPage = document.getPage(0); +// Access the PDF form +let form: PdfForm = document.form; +// Create a new signature field +let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { + x: 10, + y: 10, + width: 100, + height: 50 +}); +// Create a new signature using PFX data and private key +let sign: PdfSignature = PdfSignature.create( + { + cryptographicStandard: CryptographicStandard.cms, + digestAlgorithm: DigestAlgorithm.sha256 + }, + certData, + password +); +// Set the signature to the field +field.setSignature(sign); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(data); +// Get the first page of the document +var page = document.getPage(0); +// Access the PDF form +var form = document.form; +// Create a new signature field +var field = new ej.pdf.PdfSignatureField(page, 'Signature', { + x: 10, + y: 10, + width: 100, + height: 50 +}); +// Create a new signature using PFX data and private key +var sign = ej.pdf.PdfSignature.create( + { + cryptographicStandard: ej.pdf.CryptographicStandard.cms, + digestAlgorithm: ej.pdf.DigestAlgorithm.sha256 + }, + certData, + password +); +// Set the signature to the field +field.setSignature(sign); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Create PDF Signature with External Signing + +Syncfusion® PDF provides support to create a new PDF signature using a callback function for external signing, enabling secure and flexible digital signature workflows. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf'; + +// Load the document +let document: PdfDocument = new PdfDocument(data); +// Gets the first page of the document +let page: PdfPage = document.getPage(0); +// Access the PDF form +let form: PdfForm = document.form; +// Create a new signature field +let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Define a callback function used for external signing +let externalSignatureCallback = ( + data: Uint8Array, + options: { + algorithm: DigestAlgorithm, + cryptographicStandard: CryptographicStandard, + } +): { signedData: Uint8Array; timestampData?: Uint8Array } => { + // Implement external signing logic here + return new Uint8Array(); // Placeholder return +}; +// Create a new signature using external signing +let signature: PdfSignature = PdfSignature.create(externalSignatureCallback, { + cryptographicStandard: CryptographicStandard.cms, + algorithm: DigestAlgorithm.sha256, +}); +// Set the signature to the field +field.setSignature(signature); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(data); +// Gets the first page of the document +var page = document.getPage(0); +// Access the PDF form +var form = document.form; +// Create a new signature field +var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Define a callback function used for external signing +var externalSignatureCallback = (data, options) => { + // data: Uint8Array + // options: { algorithm: ej.pdf.DigestAlgorithm, cryptographicStandard: ej.pdf.CryptographicStandard } + // Implement external signing logic here and return the signed bytes. + // Example (placeholder): return only the required property 'signedData' + return { signedData: new Uint8Array() }; +}; +// Create a new signature using external signing +var signature = ej.pdf.PdfSignature.create(externalSignatureCallback, { + cryptographicStandard: ej.pdf.CryptographicStandard.cms, + algorithm: ej.pdf.DigestAlgorithm.sha256 +}); +// Set the signature to the field +field.setSignature(signature); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Create Signature with Public Certificates for External Signing + +This example demonstrates how to create a new PDF signature using the `PdfSignature` class with public certificates for external signing. External signing allows you to implement custom signing logic outside the PDF library while maintaining compliance with cryptographic standards. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf'; + +// Load the document +let document: PdfDocument = new PdfDocument(data); +// Gets the first page of the document +let page: PdfPage = document.getPage(0); +// Access the PDF form +let form: PdfForm = document.form; +// Create a new signature field +let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Define a callback function used for external signing +let externalSignatureCallback = ( + data: Uint8Array, + options: { + algorithm: DigestAlgorithm, + cryptographicStandard: CryptographicStandard + } +): { signedData: Uint8Array; timestampData?: Uint8Array } => { + // Implement external signing logic here + return new Uint8Array(); // Placeholder return +}; +// Create a new signature using external signing with public certificate collection +let signature: PdfSignature = PdfSignature.create( + externalSignatureCallback, + publicCertificates, + { + cryptographicStandard: CryptographicStandard.cms, + algorithm: DigestAlgorithm.sha256 + } +); +// Set the signature to the field +field.setSignature(signature); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(data); +// Gets the first page of the document +var page = document.getPage(0); +// Access the PDF form +var form = document.form; +// Create a new signature field +var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Define a callback function used for external signing +var externalSignatureCallback = function (data, options) { + // Implement external signing logic here + return new Uint8Array(); // Placeholder return +}; +// Create a new signature using external signing with public certificate collection +var signature = ej.pdf.PdfSignature.create( + externalSignatureCallback, + publicCertificates, + { + cryptographicStandard: ej.pdf.CryptographicStandard.cms, + algorithm: ej.pdf.DigestAlgorithm.sha256 + } +); +// Set the signature to the field +field.setSignature(signature); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Retrieve the Signed Date of a PDF Signature + +This example demonstrates how to retrieve the signed date of a PDF signature using the `getSignedDate()` method of the `PdfSignature` class. This property helps identify when the document was digitally signed. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf'; + +// Load the document +let document: PdfDocument = new PdfDocument(data); +// Get the first page of the document +let page: PdfPage = document.getPage(0); +// Access the PDF form +let form: PdfForm = document.form; +// Create a new signature field +let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Create a new signature using PFX data and private key +let sign: PdfSignature = PdfSignature.create( + { + cryptographicStandard: CryptographicStandard.cms, + digestAlgorithm: DigestAlgorithm.sha256 + }, + certData, + password +); +// Set the signature to the field +field.setSignature(sign); +// Get the signed date +sign.getSignedDate(); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(data); +// Get the first page of the document +var page = document.getPage(0); +// Access the PDF form +var form = document.form; +// Create a new signature field +var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Create a new signature using PFX data and private key +var sign = ej.pdf.PdfSignature.create({ cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.DigestAlgorithm.sha256 }, certData, password); +// Set the signature to the field +field.setSignature(sign); +// Get the signed date +sign.getSignedDate(); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Get Certificate Information from a PDF Signature + +This example demonstrates how to retrieve the certificate information of a PDF signature using the `getCertificateInformation()` method of the `PdfSignature` class. This information includes details about the signer's certificate used for digital signing. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, PdfCertificateInformation, CryptographicStandard} from '@syncfusion/ej2-pdf'; + +// Load the document +let document: PdfDocument = new PdfDocument(data); +// Get the first page of the document +let page: PdfPage = document.getPage(0); +// Access the PDF form +let form: PdfForm = document.form; +// Create a new signature field +let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Create a new signature using PFX data and private key +let sign: PdfSignature = PdfSignature.create( + { + cryptographicStandard: CryptographicStandard.cms, + digestAlgorithm: DigestAlgorithm.sha256 + }, + certData, + password +); +// Set the signature to the field +field.setSignature(sign); +// Get the certificate information of the signature +let certificateInfo: PdfCertificateInformation = sign.getCertificateInformation(); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(data); +// Get the first page of the document +var page = document.getPage(0); +// Access the PDF form +var form = document.form; +// Create a new signature field +var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Create a new signature using PFX data and private key +var sign = ej.pdf.PdfSignature.create({ cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.DigestAlgorithm.sha256 }, certData, password); +// Set the signature to the field +field.setSignature(sign); +// Get the certificate information of the signature +var certificateInfo = sign.getCertificateInformation(); +// Add the field into PDF form +form.add(field); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Get Digital Signature Configuration Options + +This example demonstrates how to retrieve the configuration options of a digital signature in a PDF document using the `getSignatureOptions()` method of the `PdfSignature` class. These options include details such as the cryptographic standard and digest algorithm used for signing. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfSignature, PdfSignatureOptions, PdfSignatureField, CryptographicStandard} from '@syncfusion/ej2-pdf'; + +// Load the document +let document: PdfDocument = new PdfDocument(data); +// Get the first page of the document +let page: PdfPage = document.getPage(0); +// Access the PDF form +let form: PdfForm = document.form; +// Get the signature field +let field: PdfSignatureField = form.fieldAt(0) as PdfSignatureField; +// Get the PDF signature +let signature: PdfSignature = field.getSignature(); +// Get the signature options +let options: PdfSignatureOptions = signature.getSignatureOptions(); +// Get the cryptographic standard of the signature +let cryptographicStandard: CryptographicStandard = options.cryptographicStandard; +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(data); +// Get the first page of the document +var page = document.getPage(0); +// Access the PDF form +var form = document.form; +// Get the signature field +var field = form.fieldAt(0); +// Get the PDF signature +var signature = field.getSignature(); +// Get the signature options +var options = signature.getSignatureOptions(); +// Get the cryptographic standard of the signature +var cryptographicStandard = options.cryptographicStandard; +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Replace Empty Signature with Externally Signed Data + +This example demonstrates how to replace an empty signature field in a PDF document with externally signed data using the `replaceEmptySignature()` method of the `PdfSignature` class. This method allows embedding externally signed content, certificates, and optional timestamp data into the PDF. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf'; + +// Load the document +let document: PdfDocument = new PdfDocument(data); +// Get the first page of the document +let page: PdfPage = document.getPage(0); +// Access the PDF form +let form: PdfForm = document.form; +// Create a new signature field +let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Placeholder for signed data +let signedData: Uint8Array; +// Define a callback function used for external signing +let externalSignatureCallback = ( + data: Uint8Array, + options: { + algorithm: DigestAlgorithm; + cryptographicStandard: CryptographicStandard; + } +): void => { + // Implement external signing logic here + signedData = new Uint8Array(); // Placeholder return +}; +// Create a new signature using external signing with public certificate collection +let signature: PdfSignature = PdfSignature.create( + { + cryptographicStandard: CryptographicStandard.cms, + algorithm: DigestAlgorithm.sha256 + }, + externalSignatureCallback, + publicCertificates +); +// Set the signature to the field +field.setSignature(signature); +// Add the field into PDF form +form.add(field); +// Save the document data +let data: Uint8Array = document.save(); +// Destroy the document +document.destroy(); +// Replace the empty signature with externally signed hash and certificates +let signedDocumentData: Uint8Array = PdfSignature.replaceEmptySignature( + data, + 'Signature', + signedData, + DigestAlgorithm.sha256, + publicCertificates +); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(data); +// Get the first page of the document +var page = document.getPage(0); +// Access the PDF form +var form = document.form; +// Create a new signature field +var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 }); +// Placeholder for signed data +var signedData; +// Define a callback function used for external signing +var externalSignatureCallback = function (data, options) { + // Implement external signing logic here + signedData = new Uint8Array(); // Placeholder return +}; +// Create a new signature using external signing with public certificate collection +var signature = ej.pdf.PdfSignature.create( + { + cryptographicStandard: ej.pdf.CryptographicStandard.cms, + algorithm: ej.pdf.DigestAlgorithm.sha256 + }, + externalSignatureCallback, + publicCertificates +); +// Set the signature to the field +field.setSignature(signature); +// Add the field into PDF form +form.add(field); +// Save the document data +var data = document.save(); +// Destroy the document +document.destroy(); +// Replace the empty signature with externally signed hash and certificates +var signedDocumentData = ej.pdf.PdfSignature.replaceEmptySignature( + data, + 'Signature', + signedData, + ej.pdf.DigestAlgorithm.sha256, + publicCertificates +); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/EJ2-images/Helloworld.png b/Document-Processing/PDF/PDF-Library/javascript/EJ2-images/Helloworld.png new file mode 100644 index 000000000..003ad9420 Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/EJ2-images/Helloworld.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/FormFields.md b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md new file mode 100644 index 000000000..6ae3f4355 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md @@ -0,0 +1,1423 @@ +--- +title: Form Fields in JavaScript PDF library | Syncfusion +description: This section explains how to create a digital signature in the PDF document by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Form Fields in JavaScript PDF library + +An interactive form, sometimes referred to as an AcroForm is a collection of fields for gathering information. A PDF document can contain any number of fields appearing on any combination of pages, all of that make a single, globally interactive form spanning the entire document. + +## Creating a new PDF form + +Syncfusion® PDF allows you to create and manage the form in PDF document by using `PdfForm` class. The `PdfForm` class represents the entire field collection of the form. + +### Adding the text box field + +This example demonstrates how to add a text box field to a PDF document using the `PdfTextBoxField` class. A text box field allows users to enter text data in interactive PDF forms. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfTextBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +//Add the PDF page. +let page: PdfPage = document.addPage(); +// Add new textbox field into PDF form +document.form.add(new PdfTextBoxField( + page, + 'FirstName', + { x: 50, y: 600, width: 200, height: 22 }, + { + toolTip: 'Enter your first name', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 122, b: 204 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + text: 'John', + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add the PDF page. +var page = document.addPage(); +// Add new textbox field into PDF form +document.form.add(new PdfTextBoxField( + page, + 'FirstName', + { x: 50, y: 600, width: 200, height: 22 }, + { + toolTip: 'Enter your first name', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 122, b: 204 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + text: 'John', + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a text box field in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfTextBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +//Add the PDF page. +let page: PdfPage = document.getPage(0); +// Add new textbox field into PDF form +document.form.add(new PdfTextBoxField( + page, + 'FirstName', + { x: 50, y: 600, width: 200, height: 22 }, + { + toolTip: 'Enter your first name', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 122, b: 204 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + text: 'John', + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Add new textbox field into PDF form +document.form.add(new ej.pdf.PdfTextBoxField( + page, + 'FirstName', + { x: 50, y: 600, width: 200, height: 22 }, + { + toolTip: 'Enter your first name', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 122, b: 204 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + text: 'John', + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Adding the combo box field + +This example demonstrates how to add a combo box field to a PDF document using the `PdfComboBoxField` class. A combo box field provides a drop-down list for users to select predefined options. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Add the first page of the document +let page: PdfPage = document.addPage(); +// Add new combobox field into PDF form +document.form.add(new PdfComboBoxField( + page, + 'Country', + { x: 50, y: 400, width: 180, height: 22 }, + { + items: [ + { text: 'United States', value: 'US' }, + { text: 'Canada', value: 'CA' }, + { text: 'Germany', value: 'DE' } + ], + toolTip: 'Choose a country', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + selectedIndex: 0, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Add new combobox field into PDF form +document.form.add(new ej.pdf.PdfComboBoxField( + page, + 'Country', + { x: 50, y: 400, width: 180, height: 22 }, + { + items: [ + { text: 'United States', value: 'US' }, + { text: 'Canada', value: 'CA' }, + { text: 'Germany', value: 'DE' } + ], + toolTip: 'Choose a country', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + selectedIndex: 0, + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a combo box field in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first page of the document +let page: PdfPage = document.getPage(0); +// Add new combobox field into PDF form +document.form.add(new PdfComboBoxField( + page, + 'Country', + { x: 50, y: 400, width: 180, height: 22 }, + { + items: [ + { text: 'United States', value: 'US' }, + { text: 'Canada', value: 'CA' }, + { text: 'Germany', value: 'DE' } + ], + toolTip: 'Choose a country', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + selectedIndex: 0, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Add new combobox field into PDF form +document.form.add(new ej.pdf.PdfComboBoxField( + page, + 'Country', + { x: 50, y: 400, width: 180, height: 22 }, + { + items: [ + { text: 'United States', value: 'US' }, + { text: 'Canada', value: 'CA' }, + { text: 'Germany', value: 'DE' } + ], + toolTip: 'Choose a country', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + selectedIndex: 0, + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Adding the radio button field + +This example demonstrates how to add a radio button field to a PDF document using the `PdfRadioButtonListField` class. Radio buttons allow users to select one option from a group of choices. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRadioButtonListField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Add a page +let page: PdfPage = document.addPage(); +// Add new radio button list field into PDF form +document.form.add(new PdfRadioButtonListField( + page, + 'AgeGroup', + { + items: [ + { name: '18-25', bounds: { x: 50, y: 480, width: 14, height: 14 } }, + { name: '26-35', bounds: { x: 50, y: 460, width: 14, height: 14 } }, + { name: '36-45', bounds: { x: 50, y: 440, width: 14, height: 14 } } + ], + toolTip: 'Select an age range', + selectedIndex: 1, + allowUnisonSelection: false + } +)); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Add new radio button list field into PDF form +document.form.add(new ej.pdf.PdfRadioButtonListField( + page, + 'AgeGroup', + { + items: [ + { name: '18-25', bounds: { x: 50, y: 480, width: 14, height: 14 } }, + { name: '26-35', bounds: { x: 50, y: 460, width: 14, height: 14 } }, + { name: '36-45', bounds: { x: 50, y: 440, width: 14, height: 14 } } + ], + toolTip: 'Select an age range', + selectedIndex: 1, + allowUnisonSelection: false + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a radio button field in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRadioButtonListField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Add new radio button list field into PDF form +document.form.add(new PdfRadioButtonListField( + page, + 'AgeGroup', + { + items: [ + { name: '18-25', bounds: { x: 50, y: 480, width: 14, height: 14 } }, + { name: '26-35', bounds: { x: 50, y: 460, width: 14, height: 14 } }, + { name: '36-45', bounds: { x: 50, y: 440, width: 14, height: 14 } } + ], + toolTip: 'Select an age range', + selectedIndex: 1, + allowUnisonSelection: false + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Add new radio button list field into PDF form +document.form.add(new ej.pdf.PdfRadioButtonListField( + page, + 'AgeGroup', + { + items: [ + { name: '18-25', bounds: { x: 50, y: 480, width: 14, height: 14 } }, + { name: '26-35', bounds: { x: 50, y: 460, width: 14, height: 14 } }, + { name: '36-45', bounds: { x: 50, y: 440, width: 14, height: 14 } } + ], + toolTip: 'Select an age range', + selectedIndex: 1, + allowUnisonSelection: false + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Adding the list box field + +This example demonstrates how to add a list box field to a PDF document using the `PdfListBoxField` class. A list box field displays multiple options, allowing users to select one or more items. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfListBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Add new listbox field into PDF form +document.form.add(new PdfListBoxField( + page, + 'Languages', + { x: 50, y: 340, width: 180, height: 60 }, + { + items: [ + { text: 'English', value: 'en' }, + { text: 'French', value: 'fr' }, + { text: 'German', value: 'de' } + ], + toolTip: 'Select language(s)', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + selectedIndex: [0, 2], + multiSelect: true, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Add new listbox field into PDF form +document.form.add(new ej.pdf.PdfListBoxField( + page, + 'Languages', + { x: 50, y: 340, width: 180, height: 60 }, + { + items: [ + { text: 'English', value: 'en' }, + { text: 'French', value: 'fr' }, + { text: 'German', value: 'de' } + ], + toolTip: 'Select language(s)', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + selectedIndex: [0, 2], + multiSelect: true, + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a list box field in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfListBoxField, PdfInteractiveBorder, PdfBorderStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Add new listbox field into PDF form +document.form.add(new PdfListBoxField( + page, + 'Languages', + { x: 50, y: 340, width: 180, height: 60 }, + { + items: [ + { text: 'English', value: 'en' }, + { text: 'French', value: 'fr' }, + { text: 'German', value: 'de' } + ], + toolTip: 'Select language(s)', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + selectedIndex: [0, 2], + multiSelect: true, + font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular) + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Add new listbox field into PDF form +document.form.add(new ej.pdf.PdfListBoxField( + page, + 'Languages', + { x: 50, y: 340, width: 180, height: 60 }, + { + items: [ + { text: 'English', value: 'en' }, + { text: 'French', value: 'fr' }, + { text: 'German', value: 'de' } + ], + toolTip: 'Select language(s)', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + selectedIndex: [0, 2], + multiSelect: true, + font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular) + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Adding the check box field + +This example demonstrates how to add a check box field to a PDF document using the `PdfCheckBoxField` class. Check boxes allow users to select or deselect options in a form. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfCheckBoxField, PdfInteractiveBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Add new checkbox field into PDF form +document.form.add(new PdfCheckBoxField( + 'AcceptTerms', + { x: 50, y: 520, width: 14, height: 14 }, + page, + { + toolTip: 'Accept the terms and conditions', + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + checked: true + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Add new checkbox field into PDF form +document.form.add(new ej.pdf.PdfCheckBoxField( + 'AcceptTerms', + { x: 50, y: 520, width: 14, height: 14 }, + page, + { + toolTip: 'Accept the terms and conditions', + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + checked: true + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to check Box field in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfCheckBoxField, PdfInteractiveBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Add new checkbox field into PDF form +document.form.add(new PdfCheckBoxField( + 'AcceptTerms', + { x: 50, y: 520, width: 14, height: 14 }, + page, + { + toolTip: 'Accept the terms and conditions', + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ width: 1, style: PdfBorderStyle.solid }), + checked: true + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Add new checkbox field into PDF form +document.form.add(new ej.pdf.PdfCheckBoxField( + 'AcceptTerms', + { x: 50, y: 520, width: 14, height: 14 }, + page, + { + toolTip: 'Accept the terms and conditions', + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ width: 1, style: ej.pdf.PdfBorderStyle.solid }), + checked: true + } +)); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Adding the signature field + +This example demonstrates how to add a signature field to a PDF document using the `PdfSignatureField` class. A signature field enables users to digitally sign the PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfSignatureField, PdfInteractiveBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Add the signature field into PDF form +document.form.add( + new PdfSignatureField( + page, + 'ApprovalSignature', + { x: 50, y: 260, width: 200, height: 40 }, + { + toolTip: 'Sign here', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ + width: 1, + style: PdfBorderStyle.solid + }) + } + ) +); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Add the signature field into PDF form +document.form.add( + new ej.pdf.PdfSignatureField( + page, + 'ApprovalSignature', + { x: 50, y: 260, width: 200, height: 40 }, + { + toolTip: 'Sign here', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ + width: 1, + style: ej.pdf.PdfBorderStyle.solid + }) + } + ) +); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a signature filed in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfSignatureField, PdfInteractiveBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Add the signature field into PDF form +document.form.add( + new PdfSignatureField( + page, + 'ApprovalSignature', + { x: 50, y: 260, width: 200, height: 40 }, + { + toolTip: 'Sign here', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ + width: 1, + style: PdfBorderStyle.solid + }) + } + ) +); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Add the signature field into PDF form +document.form.add( + new ej.pdf.PdfSignatureField( + page, + 'ApprovalSignature', + { x: 50, y: 260, width: 200, height: 40 }, + { + toolTip: 'Sign here', + color: { r: 0, g: 0, b: 0 }, + backColor: { r: 255, g: 255, b: 255 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ + width: 1, + style: ej.pdf.PdfBorderStyle.solid + }) + } + ) +); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Adding the button field + +This example demonstrates how to add a button field to a PDF document using the `PdfButtonField` class. Buttons can be configured to perform actions such as submitting a form or triggering JavaScript. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfButtonField, PdfHighlightMode, PdfBorderStyle, PdfInteractiveBorder} from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Add a button field into the PDF form +document.form.add( + new PdfButtonField( + page, + 'Submit', + { x: 50, y: 560, width: 120, height: 28 }, + { + toolTip: 'Submit form', + color: { r: 255, g: 255, b: 255 }, + backColor: { r: 0, g: 122, b: 204 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ + width: 1, + style: PdfBorderStyle.solid + }), + text: 'Submit', + highlightMode: PdfHighlightMode.push + } + ) +); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Add a button field into the PDF form +document.form.add( + new ej.pdf.PdfButtonField( + page, + 'Submit', + { x: 50, y: 560, width: 120, height: 28 }, + { + toolTip: 'Submit form', + color: { r: 255, g: 255, b: 255 }, + backColor: { r: 0, g: 122, b: 204 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ + width: 1, + style: ej.pdf.PdfBorderStyle.solid + }), + text: 'Submit', + highlightMode: ej.pdf.PdfHighlightMode.push + } + ) +); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a button field in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfForm, PdfButtonField, PdfHighlightMode, PdfBorderStyle, PdfInteractiveBorder} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Add a button field into the PDF form +document.form.add( + new PdfButtonField( + page, + 'Submit', + { x: 50, y: 560, width: 120, height: 28 }, + { + toolTip: 'Submit form', + color: { r: 255, g: 255, b: 255 }, + backColor: { r: 0, g: 122, b: 204 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new PdfInteractiveBorder({ + width: 1, + style: PdfBorderStyle.solid + }), + text: 'Submit', + highlightMode: PdfHighlightMode.push + } + ) +); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Add a button field into the PDF form +document.form.add( + new ej.pdf.PdfButtonField( + page, + 'Submit', + { x: 50, y: 560, width: 120, height: 28 }, + { + toolTip: 'Submit form', + color: { r: 255, g: 255, b: 255 }, + backColor: { r: 0, g: 122, b: 204 }, + borderColor: { r: 0, g: 0, b: 0 }, + border: new ej.pdf.PdfInteractiveBorder({ + width: 1, + style: ej.pdf.PdfBorderStyle.solid + }), + text: 'Submit', + highlightMode: ej.pdf.PdfHighlightMode.push + } + ) +); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Filling form fields in an existing PDF Document + +Syncfusion® PDF allows you to fill the form fields using PdfField class. + +### Filling the text box field + +This example demonstrates how to fill a text box field in a PDF document using the `text` property of the `PdfTextBoxField` class. The following code snippet illustrates how to set the text value for the field. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfTextBoxField, PdfTextAlignment} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access text box field +let field: PdfTextBoxField = document.form.fieldAt(0) as PdfTextBoxField; +// Sets the text value to text box field +field.text = 'Syncfusion'; +// Sets the text alignment of form field as center +field.textAlignment = PdfTextAlignment.center; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access text box field +var field = document.form.fieldAt(0); +// Sets the text value to text box field +field.text = 'Syncfusion'; +// Sets the text alignment of form field as center +field.textAlignment = ej.pdf.PdfTextAlignment.center; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Filling the combo box field + +This example demonstrates how to fill a combo box field in a PDF document using the `selectedIndex` property of the `PdfComboBoxField` class. The following code snippet shows how to change the selected index in a combo box. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfComboBoxField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access combobox field +let field: PdfComboBoxField = document.form.fieldAt(0) as PdfComboBoxField; +// Sets the selected index +field.selectedIndex = 2; +// Sets the flag indicates whether the list box allows multiple selections. +field.multiSelect = true; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access combobox field +var field = document.form.fieldAt(0); +// Sets the selected index +field.selectedIndex = 2; +// Sets the flag indicates whether the list box allows multiple selections. +field.multiSelect = true; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Filling the radio button field + +This example demonstrates how to fill a radio button field in a PDF document using the `selectedIndex` property of the `PdfRadioButtonListField` class. The following code snippet illustrates how to change the selected index in a radio button. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfRadioButtonListField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access radio button list field +let field: PdfRadioButtonListField = document.form.fieldAt(0) as PdfRadioButtonListField; +// Sets the selected index +field.selectedIndex = 2; +// Added tool tip +field.toolTip = 'Radio button'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access radio button list field +var field = document.form.fieldAt(0); +// Sets the selected index +field.selectedIndex = 2; +// Added tool tip +field.toolTip = 'Radio button'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Filling the list box field + +This example demonstrates how to fill a list box field in a PDF document using the `selectedIndex` property of the `PdfLoadedListBoxField` class. The following code snippet shows how to change the selected index in a list box. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfListBoxField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access listbox field +let field: PdfListBoxField = document.form.fieldAt(2) as PdfListBoxField; +// Sets the selected index +field.selectedIndex = 2; +// Added tool tip +field.toolTip = 'ListBox Fields'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access listbox field +var field = document.form.fieldAt(2); +// Sets the selected index +field.selectedIndex = 2; +// Added tool tip +field.toolTip = 'ListBox Fields'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Filling the check Box field + +This example demonstrates how to fill a check box field in a PDF document using the `Checked` property of the `PdfCheckBoxField` class. The following code snippet illustrates how to mark a checkbox as selected. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfCheckBoxField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access checkbox field +let field: PdfCheckBoxField = document.form.fieldAt(2) as PdfCheckBoxField; +// Sets the tooltip value +field.toolTip = 'Checked'; +// Added tool tip +field.toolTip = 'CheckBox Fields'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access checkbox field +var field = document.form.fieldAt(2); +// Sets the tooltip value +field.toolTip = 'Checked'; +// Added tool tip +field.toolTip = 'CheckBox Fields'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + + +### Filling the signature field + +This example demonstrates how to fill a signature field in a PDF document using the `PdfSignatureField` class. The following code snippet illustrates how to create a signature using PFX data and assign it to the signature field. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfSignatureField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access checkbox field +let field: PdfSignatureField = document.form.fieldAt(2) as PdfSignatureField; +// // Set custom value +field.setValue('Author', 'John'); +// Added tool tip +field.toolTip = 'CheckBox Fields'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access signature field +var field = document.form.fieldAt(2); +// Set custom value +field.setValue('Author', 'John'); +// Added tool tip +field.toolTip = 'CheckBox Fields'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Retrieving/Modifying the form fields + +### Modifying the existing form field in PDF document + +This example demonstrates how to modify an existing form field in a PDF document using the `PdfTextBoxField` class. The following code snippet illustrates how to update the text value, alignment, and default value of a text box field. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfPage, PdfTextBoxField, PdfTextAlignment} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access text box field +let field: PdfTextBoxField = document.form.fieldAt(0) as PdfTextBoxField; +// Sets the text value to text box field +field.text = 'Syncfusion'; +// Sets the text alignment of form field as center +field.textAlignment = PdfTextAlignment.center; +// Sets the default value of the text box field +field.defaultValue = 'Syncfusion'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access text box field +var field = document.form.fieldAt(0); +// Sets the text value to text box field +field.text = 'Syncfusion'; +// Sets the text alignment of form field as center (enum via namespace) +field.textAlignment = ej.pdf.PdfTextAlignment.center; +// Sets the default value of the text box field +field.defaultValue = 'Syncfusion'; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Removing the form fields from existing PDF document + +This example demonstrates how to remove items from an existing form field in a PDF document using the `removeItemAt()` method of the `PdfField` class. The following code snippet illustrates how to access a form field and remove its first item. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the form field at index 0 +let field: PdfField = document.form.fieldAt(0); +// Remove the first item of the form field +field.removeItemAt(0); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the form field at index 0 +var field = document.form.fieldAt(0); +// Remove the first item of the form field +field.removeItemAt(0); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Flattening form fields in a PDF + +This example demonstrates how to flatten form fields in a PDF document to make their values permanent and non-editable. Flattening removes the interactive elements while preserving the visual appearance of the filled data. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first field +let field: PdfField = document.form.fieldAt(0); +// Sets the boolean flag indicating whether the form field have been flattened or not. +field.flatten = true; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the first field +var field = document.form.fieldAt(0); +// Sets the boolean flag indicating whether the form field have been flattened or not. +field.flatten = true; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Marking form fields as Read-Only + +This example demonstrates how to mark form fields as read-only by accessing them from the PdfFormFieldCollection and setting their ReadOnly property to true. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the form field at index 0 +let field: PdfField = document.form.fieldAt(0); +// Sets a value indicating whether read only. +field.readOnly = true; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the form field at index 0 +var field = document.form.fieldAt(0); +// Sets a value indicating whether read only. +field.readOnly = true; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Importing form fields + +### Importing FDF file to PDF + +This example demonstrates how to import form data from an FDF file into a PDF document using the `importFormData` method. Importing FDF data allows you to populate form fields in a PDF with values from an external data source. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Imports form data from to the PDF document. +document.importFormData('formData.fdf', DataFormat.fdf); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Imports form data from to the PDF document. +document.importFormData('formData.fdf', ej.pdf.DataFormat.fdf); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Importing XFDF file to PDF + +This example demonstrates how to import form data from an XFDF file into a PDF document using the `importFormData` method. Importing XFDF data allows you to populate form fields in a PDF with values from an external data source. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Imports form data from to the PDF document. +document.importFormData('formData.xfdf', DataFormat.xfdf); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Imports form data from to the PDF document. +document.importFormData('formData.xfdf', ej.pdf.DataFormat.xfdf); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Exporting form fields + +### Export PDF file to FDF + +This example demonstrates how to export form data from a PDF document to an FDF file using the `exportFormData` method. Exporting FDF data allows you to save the values of form fields in a lightweight format for reuse or integration with other systems. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Sets the form field data export settings with output data format. +let settings: PdfFormFieldExportSettings = new PdfFormFieldExportSettings(); +settings.dataFormat = DataFormat.fdf; +// Export form field to fdf format +let fdf: Uint8Array = document.exportFormData(settings); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Sets the form field data export settings with output data format. +var settings = new ej.pdf.PdfFormFieldExportSettings(); +settings.dataFormat = ej.pdf.DataFormat.fdf; +// Export form field to fdf format +var fdf = document.exportFormData(settings); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Export PDF file to XFDF + +This example demonstrates how to export form data from a PDF document to an XFDF file using the `exportFormData` method. Exporting XFDF data allows you to save the values of form fields in a lightweight format for reuse or integration with other systems. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import {PdfDocument, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Sets the form field data export settings with output data format. +let settings: PdfFormFieldExportSettings = new PdfFormFieldExportSettings(); +settings.dataFormat = DataFormat.xfdf; +// Export form field to XFDF format +let xfdf: Uint8Array = document.exportFormData(settings); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Sets the form field data export settings with output data format. +var settings = new ej.pdf.PdfFormFieldExportSettings(); +settings.dataFormat = ej.pdf.DataFormat.xfdf; +// Export form field to XFDF format +var xfdf = document.exportFormData(settings); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation1.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation1.png new file mode 100644 index 000000000..86a0ddc0c Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation1.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation2.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation2.png new file mode 100644 index 000000000..3bd117c95 Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation2.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation3.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation3.png new file mode 100644 index 000000000..af986a819 Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation3.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation1.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation1.png new file mode 100644 index 000000000..6b3e72cee Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation1.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation2.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation2.png new file mode 100644 index 000000000..e1d721dd5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation2.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation3.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation3.png new file mode 100644 index 000000000..54ae2d971 Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation3.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Output.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Output.png new file mode 100644 index 000000000..0c42217b1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Output.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/vue2-terminal.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/vue2-terminal.png new file mode 100644 index 000000000..39beefaa2 Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/vue2-terminal.png differ diff --git a/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md new file mode 100644 index 000000000..680392c90 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md @@ -0,0 +1,310 @@ +--- +title: Hyperlinks in JavaScript PDF library | Syncfusion +description: This section explains how to add a hyperlink in a new or existing PDF document by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Hyperlinks in JavaScript PDF library + +In PDF, hyperlinks can be added to allow the users to navigate to another part of PDF file, web page or any other external content. + +## Working with Web navigation + +This example demonstrates how to create a web link annotation in a PDF document using the `PdfTextWebLinkAnnotation` class. A web link annotation allows users to navigate to a specified URL directly from the PDF by clicking the annotated text. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(); +// Access the first page +let page: PdfPage = document.addPage(); +// Create a new PDF string format +let format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); +// Create a new standard font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular); +// Get the text size +let size: Size = font.measureString('Syncfusion'); +// Create a new text web link annotation +let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42}, 1); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(); +// Access the first page +var page = document.addPage(); +// Create a new PDF string format +var format = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.left, ej.pdf.PdfVerticalAlignment.top); +// Create a new standard font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Get the text size +var size = font.measureString('Syncfusion'); +// Create a new text web link annotation +var annotation = new ej.pdf.PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0 }, { r: 165, g: 42, b: 42 }, 1); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to add a text web link annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, PdfTextAlignment, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new PDF string format +let format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); +// Create a new standard font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular); +// Get the text size +let size: Size = font.measureString('Syncfusion'); +// Create a new text web link annotation +let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42}, 1); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Create a new PDF string format +var format = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.left, ej.pdf.PdfVerticalAlignment.top); +// Create a new standard font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Get the text size +var size = font.measureString('Syncfusion'); +// Create a new text web link annotation +var annotation = new ej.pdf.PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0 }, { r: 165, g: 42, b: 42 }, 1); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Working with internal document navigation + +This example demonstrates how to create internal navigation within a PDF document using destination-based annotations. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfDocumentLinkAnnotation, PdfTextAlignment, PdfFontFamily, PdfFontStyle, PdfDestination, PdfDestinationMode, } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Create a new PDF string format +let format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top); +// Create a new standard font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Get the text size +let size: Size = font.measureString('Syncfusion'); +// Create a new text web link annotation +let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 42}, 1); +// Initializes a new instance of the `PdfDestination` class. +let destination: PdfDestination = new PdfDestination(); +// Sets the zoom factor. +destination.zoom = 20; +// Sets the page where the destination is situated. +destination.page = page; +// Sets the mode of the destination. +destination.mode = PdfDestinationMode.fitToPage; +// Sets the location of the destination. +destination.location = { x: 20, y: 20}; +// Sets the bounds of the destination. +destination.destinationBounds = { x: 20, y: 20, width: 100, height: 50}; +// Sets destination to document link annotation. +annotation.destination = destination; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Create a new PDF string format +var format = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.left, ej.pdf.PdfVerticalAlignment.top); +// Create a new standard font +var font = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Get the text size +var size = font.measureString('Syncfusion'); +// Create a new text web link annotation +var annotation = new ej.pdf.PdfDocumentLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0 }, { r: 165, g: 42, b: 42 }, 1); +// Initializes a new instance of the `PdfDestination` class. +var destination = new ej.pdf.PdfDestination(); +// Sets the zoom factor. +destination.zoom = 20; +// Sets the page where the destination is situated. +destination.page = page; +// Sets the mode of the destination. +destination.mode = ej.pdf.PdfDestinationMode.fitToPage; +// Sets the location of the destination. +destination.location = { x: 20, y: 20 }; +// Sets the bounds of the destination. +destination.destinationBounds = { x: 20, y: 20, width: 100, height: 50 }; +// Sets destination to document link annotation. +annotation.destination = destination; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet demonstrates how to add internal document navigation to a link annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfDestination, PdfDocumentLinkAnnotation } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the page +let page: PdfPage = document.getPage(0); +// Access the annotation at index 0 +let annotation: PdfDocumentLinkAnnotation = document.getPage(0).annotations.at(0) as PdfDocumentLinkAnnotation; +// Initializes a new instance of the `PdfDestination` class. +let destination: PdfDestination = new PdfDestination(); +// Sets the zoom factor. +destination.zoom = 20; +// Sets the page where the destination is situated. +destination.page = page; +// Sets the mode of the destination. +destination.mode = PdfDestinationMode.fitToPage; +// Sets the location of the destination. +destination.location = { x: 20, y: 20}; +// Sets the bounds of the destination. +destination.destinationBounds = { x: 20, y: 20, width: 100, height: 50}; +// Sets destination to document link annotation. +annotation.destination = destination; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the page +var page = document.getPage(0); +// Access the annotation at index 0 +var annotation = document.getPage(0).annotations.at(0); +// Initializes a new instance of the `PdfDestination` class. +var destination = new ej.pdf.PdfDestination(); +// Sets the zoom factor. +destination.zoom = 20; +// Sets the page where the destination is situated. +destination.page = page; +// Sets the mode of the destination. +destination.mode = ej.pdf.PdfDestinationMode.fitToPage; +// Sets the location of the destination. +destination.location = { x: 20, y: 20 }; +// Sets the bounds of the destination. +destination.destinationBounds = { x: 20, y: 20, width: 100, height: 50 }; +// Sets destination to document link annotation. +annotation.destination = destination; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Working with external document navigation + +This example demonstrates how to create external navigation in a PDF document using `PdfFileLinkAnnotation` annotations. External navigation allows users to open and navigate to another PDF or an external file from within the current document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Create a new file link annotation(base64 / uint8array) +let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, '/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Create a new file link annotation(base64 / uint8array) +var annotation = new ej.pdf.PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, '/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet demonstrates how to add internal document navigation to a web link annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first page +let page: PdfPage = document.getPage(0) as PdfPage; +// Create a new file link annotation(base64 / uint8array) +let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, '/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the first page +var page = document.getPage(0); +// Create a new file link annotation(base64 / uint8array) +var annotation = new ej.pdf.PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 30 }, '/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Add annotation to the page +page.annotations.add(annotation); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md new file mode 100644 index 000000000..266ebc651 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md @@ -0,0 +1,93 @@ +--- +title: Image Extraction in TypeScript PDF library | Syncfusion +description: This section explains how to extract images from PDF documents and retrieve their properties such as position and size using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Image Extraction in TypeScript PDF library + +The PDF provides support to extract images from PDF documents and retrieve their properties such as position, size, and format. + +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. + +## Extract Images from a PDF + +This example demonstrates how to extract all embedded images from a PDF document using the `PdfDataExtractor` class. The extracted images are returned as a collection of `PdfEmbeddedImage` objects. +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDataExtractor, PdfEmbeddedImage} from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Initialize a new instance of the `PdfDataExtractor` class +let extractor: PdfDataExtractor = new PdfDataExtractor(document); +// Extract collection of `PdfEmbeddedImage` from the PDF document +let imageInfoCollection: PdfEmbeddedImage[] = extractor.extractImages({ + startPageIndex: 0, + endPageIndex: document.pageCount - 1 +}); +// Access the first extracted image and its raw data +let imageInfo: PdfEmbeddedImage = imageInfoCollection[0]; +let data: Uint8Array = imageInfo.data; +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Initialize a new instance of the `PdfDataExtractor` class +var extractor= new ej.pdf.PdfDataExtractor(document); +// Extract collection of `PdfEmbeddedImage` from the PDF document +var imageInfoCollection = extractor.extractImages({ + startPageIndex: 0, + endPageIndex: document.pageCount - 1 +}); +// Access the first extracted image and its raw data +var imageInfo = imageInfoCollection[0]; +var data = imageInfo.data; +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Image informations + +This section explains how to extract image properties such as bounds, image index from a PDF page using the `PdfEmbeddedImage` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import {PdfDataExtractor, PdfEmbeddedImage} from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Initialize a new instance of the `PdfDataExtractor` class +let extractor: PdfDataExtractor = new PdfDataExtractor(document); +// Extract collection of `PdfEmbeddedImage` from the PDF document +let imageInfoCollection: PdfEmbeddedImage[] = extractor.extractImages({ + startPageIndex: 0, + endPageIndex: 0 +}); +// Extracts all the images information from first page +let imageInfo: PdfEmbeddedImage = imageInfoCollection[0]; +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Initialize a new instance of the `PdfDataExtractor` class +var extractor= new ej.pdf.PdfDataExtractor(document); +// Extract collection of `PdfEmbeddedImage` from the PDF document +var imageInfoCollection = extractor.extractImages({ + startPageIndex: 0, + endPageIndex: document.pageCount - 1 +}); +// Extracts all the images information from first page +var imageInfo = imageInfoCollection[0]; +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Images.md b/Document-Processing/PDF/PDF-Library/javascript/Images.md new file mode 100644 index 000000000..f4117c592 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Images.md @@ -0,0 +1,207 @@ +--- +title: Images in JavaScript PDF library | Syncfusion +description: This section explains how to add and replace images in a PDF document by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- + +# Images in JavaScript PDF library + +The JavaScript PDF supports JPEG and PNG images. + +Images are supported through the `PdfImage` class, which is an abstract base class that provides the common functionality for `PdfBitmap` class. + +## Adding image in PDF document + +This example demonstrates how to add an image to a PDF document using the `PdfBitmap` class and the `draw` method of the `PdfImage` class. The image is loaded from a file and drawn at the specified coordinates on the page. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfImage, PdfGraphics, PdfBitmap } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Load the image(base64 / uint8array) +let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Draw the image. +image.draw(graphics, { x: 10, y: 10}); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Load the image (base64 / uint8array) +var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Draw the image +image.draw(graphics, { x: 10, y: 10 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Inserting an image in an existing document + +This example demonstrates how to insert an image into an existing PDF document using the `PdfBitmap` class and the `draw` method of the `PdfImage` class. The image is loaded from a file and rendered at the specified position on the selected page. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access first page +let page: PdfPage = document.getPage(0); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Load the image (base64 / uint8array) +let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Draw the image. +image.draw(graphics, { x: 10, y: 10}); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access first page +var page = document.getPage(0); +// Get graphics from the page +var graphics = page.graphics; +// Load the image (base64 / uint8array) +var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Draw the image. +image.draw(graphics, {x: 10, y: 10}); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Clipping and graphics state + +This example demonstrates how to apply clipping and manage graphics state in a PDF document using the `PdfGraphics` class. The `save` and `restore` methods preserve the current graphics state, while the `setClip` method defines a clipping region to restrict drawing operations, ensuring precise control over rendering. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap, PdfGraphicsState, PdfFillMode } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Load the image (base64 / uint8array) +let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Save the current graphics state (to restore later) +let state: PdfGraphicsState = graphics.save(); +graphics.setClip({ x: 0, y: 0, width: 50, height: 12}, PdfFillMode.alternate ); +// Draw the image. +image.draw(graphics, { x: 10, y: 10}); +// Restore the graphics state to remove the clipping region +graphics.restore(state); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Load the image (base64 / uint8array) +var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Save the current graphics state (to restore later) +var state = graphics.save(); +graphics.setClip({x: 0, y: 0, width: 50, height: 12}, ej.pdf.PdfFillMode.alternate); +// Draw the image. +image.draw(graphics, {x: 10, y: 10}); +// Restore the graphics state to remove the clipping region +graphics.restore(state); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Applying transparency and rotation to the image + +This example demonstrates how to apply transparency and rotation to an image in a PDF document using the `PdfGraphics` class. Transparency can be controlled through the graphics state, while rotation is applied by transforming the graphics context before drawing the image, enabling advanced visual effects in the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap, PdfGraphicsState } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Load the image (base64 / uint8array) +let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Save the current graphics state (to restore later) +let state: PdfGraphicsState = graphics.save(); +//Translate the coordinate system to the required position +graphics.translateTransform({ x: 100, y: 100}); +//Apply transparency +graphics.setTransparency(0.5); +//Rotate the coordinate system +graphics.rotateTransform(-45); +// Draw the image. +image.draw(graphics,{ x: 10, y: 20}); +// Restore the graphics state to remove the clipping region +graphics.restore(state); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Load the image (base64 / uint8array) +var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Save the current graphics state (to restore later) +var state = graphics.save(); +// Translate the coordinate system to the required position +graphics.translateTransform({x: 100, y: 100}); +// Apply transparency +graphics.setTransparency(0.5); +// Rotate the coordinate system +graphics.rotateTransform(-45); +// Draw the image. +image.draw(graphics, {x: 10, y: 20}); +// Restore the graphics state to remove the clipping region +graphics.restore(state); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Layers.md b/Document-Processing/PDF/PDF-Library/javascript/Layers.md new file mode 100644 index 000000000..07cc068eb --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Layers.md @@ -0,0 +1,265 @@ +--- +title: Layers in JavaScript PDF library | Syncfusion +description: This section explains how to add a layer in a PDF document using the JavaScript PDF library to organize content and enhance document structure +platform: document-processing +control: PDF +documentation: UG +--- + +# Layers in JavaScript PDF library + +Layers, also known as Option Content refers to sections of content in a PDF document that can be selectively viewed or hidden by document authors or consumers. This capability is useful in items such as CAD drawings, layered artwork, maps, and multi-language documents. + +JavaScript PDF provides support to create, add and merge the layers into PDF document. + +## Adding Layers in a PDF document + +This example demonstrates how to add layers to a PDF document using the `PdfLayer` class. Layers allow you to organize content into separate, optional sections that can be shown or hidden by the user. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Access the collection of layers in the PDF document +let layers: PdfLayerCollection = document.layers; +// Add a new layer named 'Layer1' to the PDF document +let layer: PdfLayer = layers.add('Layer1'); +// Create a graphics object for the newly added layer on the specified page +let graphics: PdfGraphics = layer.createGraphics(page); +// Translate the graphics origin to the specified coordinates (x: 100, y: 60) +graphics.translateTransform({ x: 100, y: 60 }); +// Create a black pen with a thickness of 1 unit +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line using the pen from point (200, 10) to point (300, 100) +graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Access the collection of layers in the PDF document +var layers = document.layers; +// Add a new layer named 'Layer1' to the PDF document +var layer = layers.add('Layer1'); +// Create a graphics object for the newly added layer on the specified page +var graphics = layer.createGraphics(page); +// Translate the graphics origin to the specified coordinates (x: 100, y: 60) +graphics.translateTransform({ x: 100, y: 60 }); +// Create a black pen with a thickness of 1 unit +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line using the pen from point (200, 10) to point (300, 100) +graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); +// Save the document +document.save('Output.pdf'); +// Close the document + document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Adding annotation to layer + +This example demonstrates how to add an annotation to a specific layer in a PDF document using the `PdfLayer` class. Associating annotations with layers allows you to control their visibility dynamically. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfAnnotation } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Access the collection of layers in the document +let layers: PdfLayerCollection = document.layers; +// Add a new layer to the document with the name 'Layer1' +let layer: PdfLayer = layers.add('Layer1'); +// Access the first annotation on the page +let annotation: PdfAnnotation = page.annotations.at(0); +// Assign the layer to the annotation +annotation.layer = layer; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Access the collection of layers in the document +var layers = document.layers; +// Add a new layer to the document with the name 'Layer1' +var layer = layers.add('Layer1'); +// Access the first annotation on the page +var annotation = page.annotations.at(0); +// Assign the layer to the annotation +annotation.layer = layer; +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Nested Layers + +This example demonstrates how to create nested layers in a PDF document using the `PdfLayer` class. Nested layers enable hierarchical organization of content for better control and user experience. + +{% tabs %} +{% highlight c# tabtitle="TypeScript" %} + +import { PdfDocument, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document = new PdfDocument(); +// Add a page +let page = document.addPage(); +// Get the collection of layers +let layers = document.layers; +// Add a new layer named 'Layer1' +let layer = layers.add('Layer1'); +// Create graphics for 'Layer1' +let graphics = layer.createGraphics(page); +// Add one child layers +let childLayer1 = layer.layers.add('ChildLayer2'); +// Create graphics for 'ChildLayer2' +graphics = childLayer1.createGraphics(page); +// Apply translation transform +graphics.translateTransform({ x: 100, y: 60 }); +// Create a black pen +let pen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line +graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); +// Save and destroy the document +document.save('Output.pdf'); +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get the collection of layers +var layers = document.layers; +// Add a new layer named 'Layer1' +var layer = layers.add('Layer1'); +// Create graphics for 'Layer1' +var graphics = layer.createGraphics(page); +// Add one child layer +var childLayer1 = layer.layers.add('ChildLayer2'); +// Create graphics for 'ChildLayer2' +graphics = childLayer1.createGraphics(page); +// Apply translation transform +graphics.translateTransform({ x: 100, y: 60 }); +// Create a black pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line +graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); +// Save and destroy the document +document.save('Output.pdf'); +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Removing layers from an existing PDF document + +This example demonstrates how to remove layers from an existing PDF document using the `PdfLayerCollection` class. Removing unnecessary layers helps simplify the document structure. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfLayerCollection } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the layer collection. +let layers: PdfLayerCollection = document.layers; +//Remove the layer +layers.removeAt(0); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the layer collection. +var layers = document.layers; +// Remove the layer +layers.removeAt(0); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Lock or Unlock layers + +This example demonstrates how to lock or unlock layers in a PDF document using the `PdfLayer` class. Locking layers prevents users from toggling their visibility, ensuring that critical content remains displayed. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a new section to the document +let section: PdfSection = document.addSection(); +// Add a page to the section +let page: PdfPage = section.addPage(); +// Access the collection of layers in the PDF document +let layers: PdfLayerCollection = document.layers; +// Add a new layer named 'Layer1' to the PDF document +let layer: PdfLayer = layers.add('Layer1'); +// Create a graphics object for the newly added layer on the specified page +let graphics: PdfGraphics = layer.createGraphics(page); +//Set a lock state +layer.locked = true; +// Translate the graphics origin to the specified coordinates (x: 100, y: 60) +graphics.translateTransform({ x: 100, y: 60 }); +// Create a black pen with a thickness of 1 unit +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line using the pen from point (200, 10) to point (300, 100) +graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a new section to the document +var section = document.addSection(); +// Add a page to the section +var page = section.addPage(); +// Access the collection of layers in the PDF document +var layers = document.layers; +// Add a new layer named 'Layer1' to the PDF document +var layer = layers.add('Layer1'); +// Create a graphics object for the newly added layer on the specified page +var graphics = layer.createGraphics(page); +// Set a lock state +layer.locked = true; +// Translate the graphics origin to the specified coordinates (x: 100, y: 60) +graphics.translateTransform({ x: 100, y: 60 }); +// Create a black pen with a thickness of 1 unit +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line using the pen from point (200, 10) to point (300, 100) +graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Lists.md b/Document-Processing/PDF/PDF-Library/javascript/Lists.md new file mode 100644 index 000000000..f5d02b039 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Lists.md @@ -0,0 +1,133 @@ +--- +title: Lists in JavaScript PDF library | Syncfusion +description: This section explains how to work with lists in a PDF document using the JavaScript PDF library to display and manage items in a structured format +platform: document-processing +control: PDF +documentation: UG +--- + +# Lists in JavaScript PDF library + +The PDF allows you list the content in ordered and unordered list. The ordered list can be number or alphabets and the unordered list can be bullets, circles, and images. + +## Adding an ordered list + +This example demonstrates how to create an ordered list in a PDF document using the `PdfOrderedList` class. Ordered lists allow you to present items in a structured, sequential format, typically numbered or lettered, enhancing readability and organization within the PDF content. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfListItemCollection, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfOrderedList, PdfListItemCollection } from '@syncfusion/ej2-pdf'; + +// Load an existing document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Assign the array of string items +let products: string[] = ['Excel', 'Power', 'Point', 'Word', 'PDF']; +// Add the items to list item collection by passing the array of products +let items: PdfListItemCollection = new PdfListItemCollection(products); +// Initialize the instance of ordered list and pass the item collection and optional settings +let list: PdfOrderedList = new PdfOrderedList(items, { + font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular), + format: new PdfStringFormat(PdfTextAlignment.center), + pen: new PdfPen({ r: 0, g: 255, b: 0 }, 1), + brush: new PdfBrush({ r: 0, g: 255, b: 255 }), + indent: 30, + textIndent: 50, + style: PdfNumberStyle.numeric, + delimiter: ')' +}); +// Draw the ordered list on the page +list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Assign the array of string items +var products = ['Excel', 'Power', 'Point', 'Word', 'PDF']; +// Initialize the instance of ordered list and pass the item collection and optional settings +var list: PdfOrderedList = new PdfOrderedList(items, { + font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular), + format: new ej.pdf.PdfStringFormat(PdfTextAlignment.center), + pen: new ej.pdf.PdfPen({ r: 0, g: 255, b: 0 }, 1), + brush: new ej.pdf.PdfBrush({ r: 0, g: 255, b: 255 }), + indent: 30, + textIndent: 50, + style: ej.pdf.PdfNumberStyle.numeric, + delimiter: ')' +}); +// Draw the ordered list on the page +list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Adding an unordered list + +This example demonstrates how to create an unordered list in a PDF document using the `PdfUnorderedList` class. Unordered lists display items with bullet points instead of numbers, making them ideal for presenting non-sequential information in a clear and organized manner. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfList, PdfStandardFont, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfUnorderedListStyle, PdfListItemCollection } from '@syncfusion/ej2-pdf'; + +// Load the existing document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Define the items in the unordered list +let products: string[] = ['Excel', 'Power', 'Point', 'Word', 'PDF']; +// Add the items to list item collection by passing the array of products +let items: PdfListItemCollection = new PdfListItemCollection(products); +// Initialize the instance of the unordered list and pass the list item collection and settings +let list: PdfUnorderedList = new PdfUnorderedList(items, { + font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular), + format: new PdfStringFormat(PdfTextAlignment.center), + pen: new PdfPen({ r: 0, g: 255, b: 0 }, 1), + brush: new PdfBrush({ r: 0, g: 255, b: 255 }), + indent: 30, + textIndent: 50, + style: PdfNumberStyle.numeric, + delimiter: ')' +}); +// Draw the unordered list on the page +list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the existing document +var document = new ej.pdf.PdfDocument(data); +// Access the first page +var page = document.getPage(0); +// Define the items in the unordered list +var products = ['Excel', 'Power', 'Point', 'Word', 'PDF']; +// Initialize the instance of the unordered list and pass the list item collection and settings +var list = new ej.pdf.PdfUnorderedList(items, { + font: document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular), + format: new ej.pdf.PdfStringFormat(PdfTextAlignment.center), + pen: new ej.pdf.PdfPen({ r: 0, g: 255, b: 0 }, 1), + brush: new ej.pdf.PdfBrush({ r: 0, g: 255, b: 255 }), + indent: 30, + textIndent: 50, + style: ej.pdf.PdfNumberStyle.numeric, + delimiter: ')' +}); +// Draw the unordered list on the page +list.draw(page, { x: 0, y: 20, width: 500, height: 700 }); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md b/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md new file mode 100644 index 000000000..60df64b9c --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Merge-Document.md @@ -0,0 +1,146 @@ +--- +title: Merge in TypeScript PDF library | Syncfusion +description: This section explains how to merge multiple PDF documents into a single file and import pages from one document to another using the JavaScript PDF library. +platform: document-processing +control: PDF +documentation: UG +--- +# Merge in TypeScript PDF library + +The PDF provides support to merge multiple PDF documents into a single file and import pages from one document to another. + +## Merging multiple documents + +This section explains how to import a range of pages from a source PDF into a destination document using the `importPageRange` method. This is useful for merging multiple pages or entire documents efficiently. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfPageImportOptions} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let destination: PdfDocument = new PdfDocument(data1); +// Load another existing PDF document +let sourceDocument: PdfDocument = new PdfDocument(data2); +// Access first page of the source document +let pageToImport: PdfPage = sourceDocument.getPage(0); +// Options to customize the support of import PDF pages. +let options: PdfPageImportOptions = new PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 5; +// Import the page into the destination document at the specified index +destination.importPageRange(sourceDocument, 0, sourceDocument.pageCount-1); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents +destination.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var destination= new PdfDocument(data1); +// Load another existing PDF document +var sourceDocument = new PdfDocument(data2); +// Access first page of the source document +var pageToImport = sourceDocument.getPage(0); +// Options to customize the support of import PDF pages. +var options = new PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 5; +// Import the page into the destination document at the specified index +destination.importPageRange(sourceDocument, 0, sourceDocument.pageCount-1); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents +destination.destroy(); +{% endhighlight %} +{% endtabs %} + + +## Importing pages from multiple documents + +This section demonstrates how to import multiple pages from a source PDF into a destination document at a specified position using the `importPageRange` method and PdfPageImportOptions. This is useful for merging selected page ranges from different PDFs into one document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPageImportOptions} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let destination: PdfDocument = new PdfDocument(data1); +// Load another existing PDF document +let sourceDocument: PdfDocument = new PdfDocument(data2); +// Options to customize the import of PDF pages +let options: PdfPageImportOptions = new PdfPageImportOptions(); +// Sets the target page index to insert the imported pages +options.targetIndex = 3; +// Import 5 pages from page index 2 to 6 into the destination document and insert them at index 3 +destination.importPageRange(sourceDocument, 2, 6, options); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents to free resources +destination.destroy(); +sourceDocument.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var destination = new ej.pdf.PdfDocument(data1); +// Load another existing PDF document +var sourceDocument = new ej.pdf.PdfDocument(data2); +// Options to customize the import of PDF pages +var options = new ej.pdf.PdfPageImportOptions(); +// Sets the target page index to insert the imported pages +options.targetIndex = 3; +// Import 5 pages from page index 2 to 6 into the destination document and insert them at index 3 +destination.importPageRange(sourceDocument, 2, 6, options); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents to free resources +destination.destroy(); +sourceDocument.destroy(); +{% endhighlight %} +{% endtabs %} + +## Optimizing PDF resources when merging PDF documents + +Imports a page from a source PDF into a destination document at a specific index with rotation and resource optimization using `PdfPageImportOptions` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfPageImportOptions } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let destination: PdfDocument = new PdfDocument(data1); +// Load another existing PDF document +let sourceDocument: PdfDocument = new PdfDocument(data2); +// Access first page of the source document +let pageToImport: PdfPage = sourceDocument.getPage(0); +// Options to customize the support of import PDF pages. +let options: PdfPageImportOptions = new PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 5; +// Import the page into the destination document at the specified index +destination.importPage(pageToImport, sourceDocument, options); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents +destination.destroy(); +sourceDocument.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var destination = new ej.pdf.PdfDocument(data1); +// Load another existing PDF document +var sourceDocument = new ej.pdf.PdfDocument(data2); +// Access first page of the source document +var pageToImport = sourceDocument.getPage(0); +// Options to customize the support of import PDF pages. +var options = new ej.pdf.PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 5; +// Import the page into the destination document at the specified index +destination.importPage(pageToImport, sourceDocument, options); +// Save the output PDF +destination.save('Output.pdf'); +// Destroy the documents +destination.destroy(); +sourceDocument.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md new file mode 100644 index 000000000..c6e44386b --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md @@ -0,0 +1,148 @@ +--- +layout: post +title: Open and save PDF files using JavaScript PDF library | Syncfusion +description: Learn to load and save PDFs in Syncfusion JavaScript PDF library using data as base64 strings or byte arrays. +platform: document-processing +control: PDF +documentation: ug +domainurl: ##DomainURL## +--- + +# Open and save PDF files in JavaScript PDF library + +## Opening an existing PDF document + +Open an existing PDF document using the `PdfDocument` class with the specified PDF data. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +// Load an existing PDF document from string data +let document: PdfDocument = new PdfDocument(data); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document from string data +var document = new ej.pdf.PdfDocument(data); + +{% endhighlight %} +{% endtabs %} + +The PdfDocument constructor can accept PDF data in either Base64 string or Uint8Array format. Here's a quick example for both approaches: + +### Using Base64 String + +Open an existing PDF document using the `PdfDocument` class with the specified PDF data as Base64 string. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} + +let data: string = 'JVBERi0xLjcNJeLjz9MNCjEyNSAw...........TU3MTQNCiUlRU9GDQo='; +// Load an existing PDF document from data as Base64 string +let document: PdfDocument = new PdfDocument(data); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +var data = 'JVBERi0xLjcNJeLjz9MNCjEyNSAw...........TU3MTQNCiUlRU9GDQo='; +// Load an existing PDF document from data as Base64 string +var document = new ej.pdf.PdfDocumentPdfDocument(data); + +{% endhighlight %} +{% endtabs %} + +### Using Uint8Array + +Open an existing PDF document using the `PdfDocument` class with the specified PDF data as Uint8Array. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +let binaryData: Uint8Array = Uint8Array.from(data); +// Load an existing PDF document from data as Uint8Array +let document: PdfDocument = new PdfDocument(binaryData); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +var binaryData = Uint8Array.from(data); +// Load an existing PDF document from data as Uint8Array +let document= new ej.pdf.PdfDocument(binaryData); +{% endhighlight %} +{% endtabs %} + +## Opening an Encrypted PDF document with password + +Open an encrypted PDF document using the `PdfDocument` class by providing the correct password. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +// Load an existing PDF document with password +let document: PdfDocument = new PdfDocument(data, "password"); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document with password +var document = new ej.pdf.PdfDocument(data, "password"); +{% endhighlight %} +{% endtabs %} + +## Save and download a PDF document in browser environment + +Save and download the PDF document using the `save` method of `PdfDocument` class with the specified file name. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// To-Do some manipulation +// Save and download the PDF document to the specified filename. +document.save('output.pdf'); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// To-Do some manipulation +// Save and download the PDF document to the specified filename. +document.save('output.pdf'); +{% endhighlight %} +{% endtabs %} + +## Saving a PDF document to byte array + +Save the modified PDF document to the specified byte array using the `save` method available in `PdfDocument` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +//To-Do some manipulation +// Save and get PDF data as byte array. +let data: Uint8Array = document.save(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document: PdfDocument = new ej.pdf.PdfDocument(data); +//To-Do some manipulation +// Save and get PDF data as byte array. +var data = document.save(); +{% endhighlight %} +{% endtabs %} + +## Closing a document + +After the document manipulation and save operation are completed, you should close the instance of `PdfDocument`, in order to release all the memory consumed by PDF DOM. The following code example illustrates how to destroy a `PdfDocument` instance. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +//To-Do some manipulation +// Save the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +//To-Do some manipulation +// Save the PDF document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Overview.md b/Document-Processing/PDF/PDF-Library/javascript/Overview.md new file mode 100644 index 000000000..8c53c5b47 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Overview.md @@ -0,0 +1,45 @@ +--- +layout: post +title: Overview of the JavaScript PDF Library Component | Syncfusion +description: Learn about the Syncfusion JavaScript PDF library component, its key capabilities, and supported platforms. +platform: document-processing +control: PDF +documentation: ug +domainurl: ##DomainURL## +--- + +# Overview of the JavaScript PDF library control + +The JavaScript PDF Library is a powerful, high-performance, non-UI class library. It provides seamless integration of advanced PDF functionalities into applications developed with TypeScript, JavaScript, Angular, React, Vue, ASP.NET Core, and ASP.NET MVC. With this library, you can easily read, create, and manipulate PDF documents programmatically without the need of Adobe Acrobat. + +## Key features + +The following are the key features of this library. + +* Create PDF documents from scratch with ease. +* Load, edit, and save existing PDF files. +* Open and manipulate password-protected PDF documents. +* Enhance PDFs by adding text, images, shapes, and other graphical elements. +* Add and manage interactive components such as bookmarks, annotations, and form fields. +* Flatten form fields and annotations for a finalized document. +* Import and export form field data and annotations seamlessly. +* Merge multiple PDFs or split a document into separate files. +* Apply text watermarks, image watermarks, and watermark annotations. +* Insert hyperlinks for both web and document navigation. +* Add, remove, or modify bookmarks for better document organization. +* Create, remove, and flatten layers within PDFs. +* Design and apply templates for consistent layouts and branding. +* Digitally sign PDF documents for secure authentication. +* Extract or redact text from PDF files. +* Extract images from PDF documents. +* Redact shapes to protect sensitive graphical content. + +## Supported web platforms + +* ASP.NET Core +* ASP.NET MVC +* Angular +* React +* Vue +* JavaScript +* TypeScript \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md new file mode 100644 index 000000000..63655370a --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md @@ -0,0 +1,275 @@ +--- +title: Document in JavaScript PDF library | Syncfusion +description: This section explains how to set document settings and properties in a PDF file by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Document in JavaScript PDF library + +The PDF provides support to create, read, and manipulate PDF documents, allowing you to generate high-quality, secure, and feature-rich PDF files programmatically. + +## Adding the document settings + +This example shows how to configure custom page settings before adding a page to a PDF document. It creates a `PdfPageSettings` instance, applies margins, page size and sets the orientation. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfPageSettings, PdfRotationAngle, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Create a new PDF page settings instance +let pageSettings: PdfPageSettings = new PdfPageSettings({ + orientation: PdfPageOrientation.landscape, + size: { width: 842, height: 595 }, + margins: new PdfMargins(40), + rotation: PdfRotationAngle.angle0 +}); +// Add a page +let page: PdfPage = document.addPage(pageSettings); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Create a new PDF page settings instance +var pageSettings = new ej.pdf.PdfPageSettings({ + orientation: ej.pdf.PdfPageOrientation.landscape, + size: { width: 842, height: 595 }, + margins: new ej.pdf.PdfMargins(40), + rotation: ej.pdf.PdfRotationAngle.angle0 +}); +// Add a page +var page = document.addPage(pageSettings); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Creating sections in a PDF + +This example demonstrates how to create a section in a PDF document with custom page settings. It shows how to configure rotation, orientation, margins, and page size using `PdfPageSettings`. The `PdfSection` class is used to apply different page customizations within a single PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfPageSettings, PdfRotationAngle, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Create a new PDF page settings with custom options +let pageSettings = new PdfPageSettings({ + orientation: PdfPageOrientation.landscape, + size: { width: 842, height: 595 }, + margins: new PdfMargins(40), + rotation: PdfRotationAngle.angle90 +}); +// Add a section to the document with the specified settings +let section: PdfSection = document.addSection(pageSettings); +// Add a page +let page: PdfPage = section.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Create a new PDF page settings with custom options +let pageSettings = new ej.pdf.PdfPageSettings({ + orientation: ej.pdf.PdfPageOrientation.landscape, + size: { width: 842, height: 595 }, + margins: new ej.pdf.PdfMargins(40), + rotation: ej.pdf.PdfRotationAngle.angle90 +}); +// Add a section to the document with the specified settings +var section = document.addSection(pageSettings); +// Add a page +var page = section.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Working with document properties + +This example demonstrates how to create a PDF document, get and set its metadata properties such as title, author, subject, keywords, creator, producer, language, and dates, and then retrieve these properties using the `PdfDocumentInformation` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfDocumentInformation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a PDF document +let document: PdfDocument = new PdfDocument(); + +// Set or update document properties +document.setDocumentInformation({ +title: "Sample PDF Document", // Title of the PDF +author: "John Doe", // Author name +subject: "PDF Metadata Example", // Subject of the document +keywords: "PDF, Metadata, Example", // Keywords for search +creator: "JavaScript PDF Library", // Application that created the PDF +producer: "JavaScript PDF Engine", // PDF producer +language: "en-US", // Language of the document +creationDate: new Date(), // Creation date +modificationDate: new Date() // Last modified date +}); +// Access the document information +let documentProperties: PdfDocumentInformation = document.getDocumentInformation(); +// Gets the title of the PDF document +let title = documentProperties.title; +// Gets the author of the PDF document +let author = documentProperties.author; +// Gets the subject of the PDF document +let subject = documentProperties.subject; +// Gets the keywords of the PDF document +let keywords = documentProperties.keywords; +// Gets the creator of the PDF document +let creator = documentProperties.creator; +// Gets the producer of the PDF document +let producer = documentProperties.producer; +// Gets the language of the PDF document +let language = documentProperties.language; +// Gets the creation date of the PDF document +let creationDate = documentProperties.creationDate; +// Gets the modification date of the PDF document +let modificationDate = documentProperties.modificationDate; +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a PDF document +var document = new ej.pdf.PdfDocument(); +// Set or update document properties +document.setDocumentInformation({ +title: "Sample PDF Document", // Title of the PDF +author: "John Doe", // Author name +subject: "PDF Metadata Example", // Subject of the document +keywords: "PDF, Metadata, Example", // Keywords for search +creator: "JavaScript PDF Library", // Application that created the PDF +producer: "JavaScript PDF Engine", // PDF producer +language: "en-US", // Language of the document +creationDate: new Date(), // Creation date +modificationDate: new Date() // Last modified date +}); +// Access the document information +var documentProperties: PdfDocumentInformation = document.getDocumentInformation(); +// Gets the title of the PDF document +var title = documentProperties.title; +// Gets the author of the PDF document +var author = documentProperties.author; +// Gets the subject of the PDF document +var subject = documentProperties.subject; +// Gets the keywords of the PDF document +var keywords = documentProperties.keywords; +// Gets the creator of the PDF document +var creator = documentProperties.creator; +// Gets the producer of the PDF document +var producer = documentProperties.producer; +// Gets the language of the PDF document +var language = documentProperties.language; +// Gets the creation date of the PDF document +var creationDate = documentProperties.creationDate; +// Gets the modification date of the PDF document +var modificationDate = documentProperties.modificationDate; +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Performing incremental update for PDF document + +The `isIncrementalUpdate` property allows you to check if the PDF document supports incremental updates, which can improve performance during modifications by appending changes rather than rewriting the entire document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a PDF document +let document: PdfDocument = new PdfDocument(); +// Disable incremental update to rewrite the entire file +document.fileStructure.isIncrementalUpdate = false; +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a PDF document +var document = new ej.pdf.PdfDocument(); +// Disable incremental update to rewrite the entire file +document.fileStructure.isIncrementalUpdate = false; +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md new file mode 100644 index 000000000..0836d7101 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md @@ -0,0 +1,415 @@ +--- +title: Pages in JavaScript PDF library | Syncfusion +description: This section explains how to add, rearrange, remove pages, and detect empty pages in a PDF file by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Pages in JavaScript PDF library + +The PDF provides support to add, remove and rearrange pages in PDF documents, enabling complete control over page management for creating dynamic and customized PDFs. + +## Adding a new page to the document + +The following code sample demonstrates how to add a `PdfPage` to a PDF document. When multiple pages are added, each new page is appended to the end of the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Adding margin to the PDF pages + +The `PdfPageSettings` class is used to define properties such as margins, orientation, rotation, and page size. In this example, margins are set using the `PdfMargins` class to ensure consistent spacing around the page content. These settings can be applied when creating sections or pages in the PDF for precise layout control. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfGraphics, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Define page settings with margins +let settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40)}); +// Add a page +let page: PdfPage = document.addPage(settings); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Define page settings with margins +var settings = new ej.pdf.PdfPageSettings({margins: new PdfMargins(40)}); +// Add a page +var page = document.addPage(settings); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +N> The creation default margin is set to 40 points, ensuring uniform spacing between the content and the page edges. This margin allows sufficient space for better readability and helps prevent content from being truncated during printing or viewing. + +## Adding sections with different page settings + +This example demonstrates how to add sections with different page settings in a PDF document. It shows how to configure rotation, orientation, margins, and page size using `PdfPageSettings`. The `PdfSection` class is used to apply unique page customizations within a single PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Define page settings with margins +let settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape}); +// Add section1 +let section: PdfSection = document.addSection(settings); +// Add a page +let page: PdfPage = section.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Define page settings with margins +let settings1: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape}); +// Add section1 +let section1: PdfSection = document.addSection(settings1); +// Add a page +let page1: PdfPage = section1.addPage(); +// Get graphics from the page +let graphics1 = page1.graphics; +// Draw text +graphics1.drawString('Hello World', font, { x: 40, y: 60, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the PDF document +document.save('Output.pdf'); +// Close and dispose the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Create a new PDF page settings instance +// Define page settings with margins +var settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape}); +// Add section1 +var section: PdfSection = document.addSection(settings); +// Add a page +var page: PdfPage = section.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Define page settings with margins +var settings1: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape}); +// Add section1 +var section1: PdfSection = document.addSection(settings1); +// Add a page +var page1: PdfPage = section1.addPage(); +// Get graphics from the page +var graphics1 = page1.graphics; +// Draw text +graphics1.drawString('Hello World', font, { x: 40, y: 60, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the PDF document +document.save('Output.pdf'); +// Close and dispose the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Get number of pages from a PDF document + +This example demonstrates how to retrieve the total number of pages in a PDF document using the `pageCount` property of the `PdfDocument` class. The page count returns an integer value representing the number of pages currently in the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Gets the page count +let count: number = document.pageCount; +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Gets the page count +var count = document.pageCount; +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Importing pages from an existing document + +This example demonstrates how to import pages from an existing PDF document into a new PDF document using the `importPageRange` method of the `PdfDocument` class. This method allows you to specify a start and end index to copy a range of pages from the source document into the target document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Define start and end page indices +let startIndex = 0; +let endIndex = document.pageCount - 1; +// Import all pages from the loaded document into the new document +document.importPageRange(document, startIndex, endIndex); +// Save the new document +document.save('Output.pdf'); +// Close the loaded document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Define start and end page indices +var startIndex = 0; +var endIndex = document.pageCount - 1; +// Import all pages from the loaded document into the new document +document.importPageRange(document, startIndex, endIndex); +// Save the new document +document.save('Output.pdf'); +// Close the loaded document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Rearranging pages in an existing document + +This example demonstrates how to rearrange the pages in an existing PDF document using the `reorderPages` method of the `PdfDocument` class. The method accepts an array of page indices that defines the new order of pages within the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Reorders the pages in the PDF document +document.reorderPages([3, 2, 1]); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Reorders the pages in the PDF document +document.reorderPages([3, 2, 1]); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Removing pages from a document + +This example demonstrates how to remove a page from a PDF document using the `removePage` method of the `PdfDocument` class. The method takes the zero-based index of the page to be removed, effectively deleting that page from the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Removes the last page +let page: PdfPage = document.getPage(document.pageCount - 1); +document.removePage(page); +// Removes the first page by specifying index +document.removePage(0); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Removes the last page +var page = document.getPage(document.pageCount - 1); +document.removePage(page); +// Removes the first page by specifying index +document.removePage(0); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Rotating a PDF page + +This example demonstrates how to rotate a PDF page using the `rotation` property of the `PdfPageSettings` class. The property accepts a value from the `PdfRotationAngle` enumeration, such as angle180, to specify the rotation angle applied to the page. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPageSettings, PdfPage, PdfStandardFont, PdfRotationAngle, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Define page settings with rotate +let settings: PdfPageSettings = new PdfPageSettings({rotation: PdfRotationAngle.angle180}); +// Add page +let page: PdfPage = document.addPage(settings); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the PDF document +let data = document.save('Output.pdf'); +// Close and dispose the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Define page settings with rotate +var settings = new ej.pdf.PdfPageSettings({rotation: PdfRotationAngle.angle180}); +// Add page +var page = document.addPage(settings); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the PDF document +var data = document.save('Output.pdf'); +// Close and dispose the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Rotating an existing PDF page + +This example demonstrates how to rotate an existing PDF page using the `rotation` property of the `PdfPage` class. The property accepts a value from the `PdfRotationAngle` enumeration, such as angle180, to specify the rotation angle applied to the selected page. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access first page +let page: PdfPage = document.getPage(0); +//Set the rotation for loaded page +page.rotation = PdfRotationAngle.angle180; +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access first page +var page = document.getPage(0); +// Set the rotation for loaded page +page.rotation = ej.pdf.PdfRotationAngle.angle180; +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Insert a Duplicate Page at a Specific Index + +Duplicates a page from a source PDF and inserts it into the destination document at the specified index using `PdfPageImportOptions.targetIndex`. This is useful for reusing or cloning content across documents or within the same document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPageImportOptions} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Options to customize the support of import PDF pages. +let options: PdfPageImportOptions = new PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 1; +// Sets the rotation angle of the page to import +options.rotation = PdfRotationAngle.angle180; +// Sets the boolean value indicating whether to optimize resources while importing pages or not +options.optimizeResources = true; +// Copy the first page and add it as second page with page rotation +document.importPage(0, options); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +let document = new ej.pdf.PdfDocument(data); +// Options to customize the support of import PDF pages. +let options = new ej.pdf.PdfPageImportOptions(); +// Sets the target page index to import +options.targetIndex = 1; +// Sets the rotation angle of the page to import +options.rotation = ej.pdf.PdfRotationAngle.angle180; +// Sets the boolean value indicating whether to optimize resources while importing pages or not +options.optimizeResources = true; +// Copy the first page and add it as second page with page rotation +document.importPage(0, options); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Redaction.md b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md new file mode 100644 index 000000000..c651ff8dd --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md @@ -0,0 +1,157 @@ +--- +title: Redaction in JavaScript PDF library |Syncfusion +description: This section explains how to redact content from an existing PDF document by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Redaction in JavaScript PDF library + +Redacting a PDF is the process of permanently removing sensitive or confidential information from PDF documents. Syncfusion® PDF library provides an easy way to redact PDF documents. + +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. + +## Removing sensitive content from the PDF document + +Redaction permanently removes confidential or sensitive information from a PDF. The `PdfRedactionAnnotation` class allows you to define areas to redact, ensuring the underlying text or image data is completely deleted from the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract'; + +// Load the document +let document: PdfDocument = new PdfDocument(data); +// Create a new text extractor +let redactor: PdfRedactor = new PdfRedactor(document); +// Add redactions to the collection +let redactions: PdfRedactionRegion[] = []; +redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50})); +redactions.push(new PdfRedactionRegion(2, {x: 10, y: 10, width: 100, height: 50}, true, {r: 255, g: 0, b: 0})); +redactor.add(redactions); +// Apply redactions on the PDF document +redactor.redact(); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the document +var document = new ej.pdf.PdfDocument(data); +// Create a new text extractor +var redactor = new ej.pdfdataextract.PdfRedactor(document); +// Add redactions to the collection +var redactions = []; +redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50})); +redactions.push(new PdfRedactionRegion(2, {x: 10, y: 10, width: 100, height: 50}, true, {r: 255, g: 0, b: 0})); +redactor.add(redactions); +// Apply redactions on the PDF document +redactor.redact(); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Fill color on the redacted area + +You can apply a solid fill color to cover the redacted content. This is the most common approach for redaction. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfRedactor, PdfRedactionRegion} from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Initialize a new instance of the `PdfRedactor` class +let redactor: PdfRedactor = new PdfRedactor(document); +// Initialize a new instance of the `PdfRedactionRegion` class. +let redaction: PdfRedactionRegion = new PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90}); +// Sets the fill color used to fill the redacted area. +redaction.fillColor = {r: 255, g: 0, b: 0}; +redactions.push(redaction); +// Add redactions with specified options. +redactor.add(redactions); +// Apply redactions on the PDF document +redactor.redact(); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Initialize a new instance of the `PdfRedactor` class +var redactor = new ej.pdfdataextract.PdfRedactor(document); +// Initialize a new instance of the `PdfRedactionRegion` class. +var redaction = new ej.pdfdataextract.PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90}); +// Sets the fill color used to fill the redacted area. +redaction.fillColor = {r: 255, g: 0, b: 0}; +redactions.push(redaction); +// Add redactions with specified options. +redactor.add(redactions); +// Apply redactions on the PDF document +redactor.redact(); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Redaction appearance fill color + +Customize the appearance of the redacted area by applying specific fill colors. This helps maintain a consistent design or highlight redacted sections in a visually appealing way. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data, password); +// Add redactions to the collection +let redactions: PdfRedactionRegion[] = []; +// Initialize a new instance of the `PdfRedactor` class +let redactor: PdfRedactor = new PdfRedactor(document); +// Initialize a new instance of the `PdfRedactionRegion` class. +let redaction: PdfRedactionRegion = new PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90}); +// Sets the fill color used to fill the redacted area. +redaction.fillColor = {r: 255, g: 0, b: 0}; +redactions.push(redaction); +// Add redactions with specified options. +redactor.add(redactions); +// Apply redactions on the PDF document +redactor.redact(); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data, password); +// Add redactions to the collection +var redactions = []; +// Initialize a new instance of the `PdfRedactor` class +var redactor = new ej.pdfdataextract.PdfRedactor(document); +// Initialize a new instance of the `PdfRedactionRegion` class. +var redaction = new ej.pdfdataextract.PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90}); +// Sets the fill color used to fill the redacted area. +redaction.fillColor = {r: 255, g: 0, b: 0}; +redactions.push(redaction); +// Add redactions with specified options. +redactor.add(redactions); +// Apply redactions on the PDF document +redactor.redact(); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Shapes.md b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md new file mode 100644 index 000000000..64dd54cfa --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md @@ -0,0 +1,776 @@ +--- +title: Shapes in JavaScript PDF library | Syncfusion +description: This section explains how to add shapes such as lines, curves, paths, text, rectangles, pies, arcs, Beziers, and ellipses by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Shapes in JavaScript PDF library + +The PDF has support for adding the below shapes. + +* Line +* Curve +* Path +* Text +* Rectangle +* Pie +* Arc +* Bezier +* Ellipse + +## Adding Shapes to a PDF document + +JavaScript PDF supports adding shapes with different types of brushes like solid bush, gradient brush, tiling brush, and image brush along with various color spaces and transparency levels. + +### Polygon + +This example demonstrates how to draw a polygon shape in a PDF document using the `drawPolygon` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Define the polygon points +let points: Point[] = [{x: 10, y: 100}, { x: 10, y: 200}, { x: 100, y: 100}, { x: 100, y: 200}, { x: 55, y: 150}]; +// Draw the polygon on the page graphics +graphics.drawPolygon(points, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({r:0,g:0,b:0},1); +// Define the polygon points +var points=[{x:10,y:100}, {x:10,y:200}, {x:100,y:100}, {x:100,y:200}, {x:55,y:150}]; +// Draw the polygon on the page graphics +graphics.drawPolygon(points,pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw a polygon in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Define the polygon points +let points: Point[] = [{x: 10, y: 100}, { x: 10, y: 200}, { x: 100, y: 100}, { x: 100, y: 200}, { x: 55, y: 150}]; +// Draw the polygon on the page graphics +graphics.drawPolygon(points, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Get graphics from the page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({r:0,g:0,b:0},1); +// Define the polygon points +var points=[{x:10,y:100}, {x:10,y:200}, {x:100,y:100}, {x:100,y:200}, {x:55,y:150}]; +// Draw the polygon on the page graphics +graphics.drawPolygon(points,pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Line + +This example demonstrates how to draw a straight line in a PDF document using the `drawLine` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line on the page graphics +graphics.drawLine(pen, { x: 10, y: 200}, { x: 100, y: 100}); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line on the page graphics +graphics.drawLine(pen, { x: 10, y: 200 }, { x: 100, y: 100 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw a line in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line on the page graphics +graphics.drawLine(pen, { x: 10, y: 200}, { x: 100, y: 100}); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Get graphics from the page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a line on the page graphics +graphics.drawLine(pen, { x: 10, y: 200 }, { x: 100, y: 100 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Path + +This example demonstrates how to draw a path in a PDF document using the `drawPath` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Create a new path +let path: PdfPath = new PdfPath(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Add lines to the path +path.addLine({ x: 10, y: 50}, { x: 200, y: 250}); +path.addLine({ x: 10, y: 150}, { x: 220, y: 250}); +path.addLine({ x: 10, y: 200}, { x: 240, y: 250}); +// Draw the path on the page graphics +graphics.drawPath(path, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Create a new path +var path = new ej.pdf.PdfPath(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Add lines to the path +path.addLine({ x: 10, y: 50 }, { x: 200, y: 250 }); +path.addLine({ x: 10, y: 150 }, { x: 220, y: 250 }); +path.addLine({ x: 10, y: 200 }, { x: 240, y: 250 }); +// Draw the path on the page graphics +graphics.drawPath(path, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw path in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Create a new path +let path: PdfPath = new PdfPath(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Add lines to the path +path.addLine({ x: 10, y: 50}, { x: 200, y: 250}); +path.addLine({ x: 10, y: 150}, { x: 220, y: 250}); +path.addLine({ x: 10, y: 200}, { x: 240, y: 250}); +// Draw the path on the page graphics +graphics.drawPath(path, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Create a new path +var path = new ej.pdf.PdfPath(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Add lines to the path +path.addLine({ x: 10, y: 50 }, { x: 200, y: 250 }); +path.addLine({ x: 10, y: 150 }, { x: 220, y: 250 }); +path.addLine({ x: 10, y: 200 }, { x: 240, y: 250 }); +// Draw the path on the page graphics +graphics.drawPath(path, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Text + +This example demonstrates how to draw a text in a PDF document using the `drawString` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw text in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Rectangle + +This example demonstrates how to draw a rectangle in a PDF document using the `drawRectangle` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen. +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a rectangle on the page graphics. +graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200}, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen. +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a rectangle on the page graphics. +graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200 }, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw rectangle in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen. +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a rectangle on the page graphics. +graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200}, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen. +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a rectangle on the page graphics. +graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200 }, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Pie + +This example demonstrates how to draw a pie in a PDF document using the `drawPie` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a pie slice on the page graphics +graphics.drawPie({ x: 10, y: 50, width: 200, height: 200}, 180, 60, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a pie slice on the page graphics +graphics.drawPie({ x: 10, y: 50, width: 200, height: 200 }, 180, 60, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw pie in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a pie slice on the page graphics +graphics.drawPie({ x: 10, y: 50, width: 200, height: 200}, 180, 60, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a pie slice on the page graphics +graphics.drawPie({ x: 10, y: 50, width: 200, height: 200 }, 180, 60, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Arc + +This example demonstrates how to draw a arc in a PDF document using the `drawArc` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a arc slice on the page graphics +graphics.drawArc({ x: 10, y: 20, width: 100, height: 200}, 20, 30, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw an arc slice on the page graphics +graphics.drawArc({ x: 10, y: 20, width: 100, height: 200 }, 20, 30, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw arc in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a aec slice on the page graphics +graphics.drawArc({ x: 10, y: 20, width: 100, height: 200}, 20, 30, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw an arc slice on the page graphics +graphics.drawArc({ x: 10, y: 20, width: 100, height: 200 }, 20, 30, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Bezier + +This example demonstrates how to draw a bezier in a PDF document using the `drawBezier` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a Bezier curve on the page graphics +graphics.drawBezier({ x: 50, y: 100}, { x: 200, y: 50}, { x: 100, y: 150}, { x: 150, y: 100}, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a Bezier curve on the page graphics +graphics.drawBezier({ x: 50, y: 100 }, { x: 200, y: 50 }, { x: 100, y: 150 }, { x: 150, y: 100 }, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw bezier in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a Bezier curve on the page graphics +graphics.drawBezier({ x: 50, y: 100}, { x: 200, y: 50}, { x: 100, y: 150}, { x: 150, y: 100}, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw a Bezier curve on the page graphics +graphics.drawBezier({ x: 50, y: 100 }, { x: 200, y: 50 }, { x: 100, y: 150 }, { x: 150, y: 100 }, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Ellipse + +This example demonstrates how to draw a ellipse in a PDF document using the `drawEllipse` method of the `PdfGraphics` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw an ellipse on the page graphics +graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200}, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw an ellipse on the page graphics +graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200 }, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to draw ellipse in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access the first page +let page: PdfPage = document.getPage(0); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new pen +let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw an ellipse on the page graphics +graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200}, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(data); +// Add a page +var page = document.getPage(0); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new pen +var pen = new ej.pdf.PdfPen({ r: 0, g: 0, b: 0 }, 1); +// Draw an ellipse on the page graphics +graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200 }, pen); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md b/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md new file mode 100644 index 000000000..3990ef82d --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md @@ -0,0 +1,116 @@ +--- +title: Split in JavaScript PDF library | Syncfusion +description: This section explains how to split large PDF documents into smaller ones, each containing single or multiple pages, using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- + +# Split in JavaScript PDF library + +The PDF library supports Splitting PDF file into single-page or multiple-page PDF documents. + +## Splitting a PDF file into individual + +The PDF library allows splitting the pages of an existing PDF document into multiple individual PDF documents using `split` method of the `PdfDocument` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfDocumentSplitEventArgs} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +document.splitEvent = documentSplitEvent; +// Split PDF document into individual pages +document.split(); +// Event to invoke while splitting PDF document data +function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs): void { + Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' })); +} +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +document.splitEvent = documentSplitEvent; +// Split PDF document into individual pages +document.split(); +// Event to invoke while splitting PDF document data +function documentSplitEvent(sender, args): void { + Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' })); +} +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Split a range of pages into a separate PDF document + +The PDF library allows splitting a certain range of pages into a separate PDF document using the `splitByPageRanges` method of the `PdfDocument` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfDocumentSplitEventArgs} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +document.splitEvent = documentSplitEvent; +// Split PDF document by page ranges specified +document.splitByPageRanges([[0, 4], [5, 9]]); +// Event to invoke while splitting PDF document data +function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs): void { + Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' })); +} +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +document.splitEvent = documentSplitEvent; +// Split PDF document by page ranges specified +document.splitByPageRanges([[0, 4], [5, 9]]); +// Event to invoke while splitting PDF document data +function documentSplitEvent(sender, args): void { + Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' })); +} +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Split by a fixed number of pages into a PDF document + +The PDF library allows splitting by fixed number of pages of an existing PDF document using the `splitByFixedNumber` method of the `PdfDocument` class. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfDocumentSplitEventArgs} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +document.splitEvent = documentSplitEvent; +// Split PDF document by fixed number of pages +document.splitByFixedNumber(1); +// Event to invoke while splitting PDF document data +function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs): void { + Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' })); +} +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +document.splitEvent = documentSplitEvent; +// Split PDF document by fixed number of pages +document.splitByFixedNumber(1); +// Event to invoke while splitting PDF document data +function documentSplitEvent(sender, args): void { + Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' })); +} +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Templates.md b/Document-Processing/PDF/PDF-Library/javascript/Templates.md new file mode 100644 index 000000000..c0d63d908 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Templates.md @@ -0,0 +1,102 @@ +--- +title: Templates in JavaScript PDF library | Syncfusion +description: This section explains how to create a PDF template, which is a drawing surface where contents can be added, by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Templates in JavaScript PDF library + +A PDF template is a drawing surface, where contents can be added. All the elements that can be added to a PdfPage is supported in PdfTemplate as well. The template in turn can be drawn over the page or can be positioned at any part of the page. + +## Creating a new PDF template + +This example demonstrates how to create a new PDF template using the `PdfTemplate` class. A PDF template allows you to define reusable graphics or content that can be drawn on multiple pages or annotations within a PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Create a template +let template: PdfTemplate = new PdfTemplate({ x: 100, y: 100, width: 400, height: 200 }); +// Create new image object by using JPEG image data as Base64 string format +let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Draw the image into the template graphics +template.graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 50 }); +// Draw template to the page +page.graphics.drawTemplate(template, { x: 0, y: 0, width: 100, height: 50 }); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Create a template +var template = new ej.pdf.PdfTemplate({ x: 100, y: 100, width: 400, height: 200 }); +// Create new image object by using JPEG image data as Base64 string format +var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Draw the image into the template graphics +template.graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 50 }); +// Draw template to the page +page.graphics.drawTemplate(template, { x: 0, y: 0, width: 100, height: 50 }); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Creating templates from existing PDF document + +This example demonstrates how to create templates from an existing PDF document using the `PdfTemplate` class. A PDF template allows you to extract and reuse content from a PDF page or annotation, enabling consistent design and repeated elements across multiple pages. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first page +let page: PdfPage = document.getPage(0) as PdfPage; +// Create a template +let template: PdfTemplate = new PdfTemplate({ x: 100, y: 100, width: 400, height: 200 }); +// Create new image object by using JPEG image data as Base64 string format +let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Draw the image into the template graphics +template.graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 50 }); +// Draw template to the page +page.graphics.drawTemplate(template, { x: 0, y: 0, width: 100, height: 50 }); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the first page +var page = document.getPage(0); +// Create a template +var template = new ej.pdf.PdfTemplate({ x: 100, y: 100, width: 400, height: 200 }); +// Create new image object by using JPEG image data as Base64 string format +var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Draw the image into the template graphics +template.graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 50 }); +// Draw template to the page +page.graphics.drawTemplate(template, { x: 0, y: 0, width: 100, height: 50 }); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md new file mode 100644 index 000000000..2f4a035f8 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md @@ -0,0 +1,345 @@ +--- +title: Text Extraction in JavaScript PDF library | Syncfusion +description: This section explains how to extract text and its bounds from a specific page or the entire PDF document by using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Text Extraction in JavaScript PDF library + +The PDF allows you to extract the text from a particular page or the entire PDF document. + +## Working with basic text extraction + +This example demonstrates how to extract text from a PDF page using the `PdfDataExtractor` class. Basic text extraction allows retrieving plain text content from a PDF document. + +N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Initialize a new instance of the `PdfDataExtractor` class +let extractor: PdfDataExtractor = new PdfDataExtractor(document); +// Extract text content from the PDF document. +let text: string = extractor.extractText(); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Initialize a new instance of the PdfDataExtractor class +var extractor = new ej.pdfdataextract.PdfDataExtractor(document); +// Extract text content from the PDF document +var text = extractor.extractText(); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Extract Text from Specific Page Range in a PDF Document + +This example demonstrates how to extract text from a PDF document by specifying a start and end page number. This approach allows you to retrieve text content from a defined range of pages for processing or analysis. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Initialize a new instance of the `PdfDataExtractor` class +let extractor: PdfDataExtractor = new PdfDataExtractor(document); +// Extract text content from the PDF document. +let text: string = extractor.extractText({ startPageIndex: 0, endPageIndex: document.pageCount - 1 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Initialize a new instance of the PdfDataExtractor class +var extractor = new ej.pdfdataextract.PdfDataExtractor(document); +// Extract text content from the PDF document +var text = extractor.extractText({ startPageIndex: 0, endPageIndex: document.pageCount - 1 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +## Working with layout based text extraction + +This example demonstrates how to extract text from a PDF page using the `PdfDataExtractor` class with layout-based options. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Initialize a new instance of the `PdfDataExtractor` class +let extractor: PdfDataExtractor = new PdfDataExtractor(document); +// Extracts text from the PDF Page based on its layout +let text: string = extractor.extractText({isLayout: true}); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Initialize a new instance of the PdfDataExtractor class +var extractor = new ej.pdfdataextract.PdfDataExtractor(document); +// Extracts text from the PDF Page based on its layout +var text = extractor.extractText({ isLayout: true }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +N> Layout based text extraction may take additional processing time when compared to the normal extraction mode. + +## Text Extraction with Bounds + +### Working with Lines + +This example demonstrates how to extract text from a PDF page based on individual lines using the `extractTextLines` method. This approach provides a collection of `TextLine` objects, allowing precise access to text content line by line. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDataExtractor, TextLine } from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Initialize a new instance of the `PdfDataExtractor` class +let extractor: PdfDataExtractor = new PdfDataExtractor(document); +// Extracts text from the PDF Page based on its line +let textCollection: TextLine[] = extractor.extractTextLines({ startPageIndex: 0, endPageIndex: document.pageCount - 1}); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Initialize a new instance of the PdfDataExtractor class +var extractor = new ej.pdfdataextract.PdfDataExtractor(document); +// Extracts text from the PDF Page based on its line +var textCollection = extractor.extractTextLines({ startPageIndex: 0, endPageIndex: document.pageCount - 1 }); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Working with words + +This example demonstrates how to extract words from a PDF document using the `extractTextLines` method. Each line contains a collection of `TextWord` objects. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDataExtractor, TextLine, TextWord } from '@syncfusion/ej2-pdf-data-extract'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Create a PdfDataExtractor instance for the given PDF document +let extractor: PdfDataExtractor = new PdfDataExtractor(document); +// Extract text lines from all pages in the document +let textCollection: TextLine[] = extractor.extractTextLines({ + startPageIndex: 0, + endPageIndex: document.pageCount - 1 + }); +let page: PdfPage; +// Iterate through each extracted text line +for (let i: number = 0; i < textCollection.length; i++) +{ + // Get the page corresponding to the current text line + page = document.getPage(textCollection[i].pageIndex); + // Retrieve all words from the current text line + let wordCollection: TextWord[] = textCollection[i].words; + // Iterate through each word in the line + for (let j: number = 0; j < wordCollection.length; j++) + { + let word: TextWord = wordCollection[j]; + if (word) + { + // Iterate through each glyph (character shape) in the word + for (let k: number = 0; k < word.glyphs.length; k++) + { + let glyph: TextGlyph = word.glyphs[k]; + // Draw a rectangle around the glyph's bounding box on the page + page.graphics.drawRectangle( + glyph.bounds[0], // X-coordinate + glyph.bounds[1], // Y-coordinate + glyph.bounds[2], // Width + glyph.bounds[3], // Height + new PdfPen([238, 130, 238], 1) // Violet-colored pen with thickness 1 + ); + } + } + } +} +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Create a PdfDataExtractor instance for the given PDF document +var extractor = new ej.pdfdataextract.PdfDataExtractor(document); +// Extract text lines from all pages in the document +var textCollection = extractor.extractTextLines({ + startPageIndex: 0, + endPageIndex: document.pageCount - 1 +}); +var page; +// Iterate through each extracted text line +for (var i = 0; i < textCollection.length; i++) { + // Get the page corresponding to the current text line + page = document.getPage(textCollection[i].pageIndex); + // Retrieve all words from the current text line + var wordCollection = textCollection[i].words; + // Iterate through each word in the line + for (var j = 0; j < wordCollection.length; j++) { + var word = wordCollection[j]; + if (word) { + // Iterate through each glyph (character shape) in the word + for (var k = 0; k < word.glyphs.length; k++) { + var glyph = word.glyphs[k]; + // Draw a rectangle around the glyph's bounding box on the page + page.graphics.drawRectangle( + { x: glyph.bounds[0], y: glyph.bounds[1], width: glyph.bounds[2], height: glyph.bounds[3] }, + new ej.pdf.PdfPen({ r: 238, g: 130, b: 238 }, 1) // Violet-colored pen with thickness 1 + ); + } + } + } +} +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); + +{% endhighlight %} +{% endtabs %} + +### Working with characters + +You can retrieve a single character and its properties, including bounds, font name, font size, and text color, using the `extractTextLines` method. Refer to the code sample below. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { PdfDataExtractor, TextLine, TextWord } from '@syncfusion/ej2-pdf-data-extract'; + +// Load the existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Create a PdfDataExtractor instance for the given PDF document +let extractor: PdfDataExtractor = new PdfDataExtractor(document); +// Extract text lines only from the first page (index 0) +let lineCollection: TextLine[] = extractor.extractTextLines({ + startPageIndex: 0, + endPageIndex: 0 +}); +// Get the first line +let line: TextLine = lineCollection[0]; +// Get the collection of words in the first line +let textWordCollection: TextWord[] = line.words; +// Get the first word +let textWord: TextWord = textWordCollection[0]; +// Get glyph details of the first word +let textGlyphCollection: TextGlyph[] = textWord.glyphs; +// Get the first glyph +let textGlyph: TextGlyph = textGlyphCollection[0]; +// ---- Glyph properties ---- +// Bounds of the character (x, y, width, height) +let glyphBounds = { + x: textGlyph.bounds[0], + y: textGlyph.bounds[1], + width: textGlyph.bounds[2], + height: textGlyph.bounds[3] +}; +// Font name of the character +let glyphFontName: string = textGlyph.fontName; +// Font size of the character +let glyphFontSize: number = textGlyph.fontSize; +// Font style of the character (e.g., PdfFontStyle.regular/bold/italic) +let glyphFontStyle: PdfFontStyle = textGlyph.fontStyle; +// The character itself +let glyphText: string = textGlyph.text; +// The color of the character (typically RGB) +let glyphColor = textGlyph.textColor; +// Save and close +document.save('Output.pdf'); +document.destroy(); + +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load the existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Create a PdfDataExtractor instance for the given PDF document +var extractor = new ej.pdf.PdfDataExtractor(document); +// Extract text lines only from the first page (index 0) +var lineCollection = extractor.extractTextLines({ + startPageIndex: 0, + endPageIndex: 0 +}); +// Get the first line +var line = lineCollection[0]; +// Get the collection of words in the first line +var textWordCollection = line.words; +// Get the first word +var textWord = textWordCollection[0]; +// Get glyph details of the first word +var textGlyphCollection = textWord.glyphs; +// Get the first glyph +var textGlyph = textGlyphCollection[0]; +// ---- Glyph properties ---- +// Bounds of the character (x, y, width, height) +var glyphBounds = { + x: textGlyph.bounds[0], + y: textGlyph.bounds[1], + width: textGlyph.bounds[2], + height: textGlyph.bounds[3] +}; +// Font name of the character +var glyphFontName = textGlyph.fontName; +// Font size of the character +var glyphFontSize = textGlyph.fontSize; +// Font style of the character (e.g., PdfFontStyle.regular/bold/italic) +var glyphFontStyle = textGlyph.fontStyle; +// The character itself +var glyphText = textGlyph.text; +// The color of the character (typically RGB) +var glyphColor = textGlyph.textColor; +// Save and close +document.save('Output.pdf'); +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text.md b/Document-Processing/PDF/PDF-Library/javascript/Text.md new file mode 100644 index 000000000..a338d0076 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Text.md @@ -0,0 +1,354 @@ +--- +title: Text in JavaScript PDF library | Syncfusion +description: This section explains how to add text to a PDF by using different types of fonts, including TrueType fonts and standard fonts, with the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Text in JavaScript PDF library + +The PDF provides support to add and format text in PDF documents using various font types, including TrueType and standard fonts, enabling precise control over text appearance and layout. + +## Drawing text in a new document + +This example demonstrates how to draw text in a new PDF document using the `drawString` method of the `PdfGraphics` class. The method allows you to specify the text content, font, brush, and position to render the text on a page within the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +N> Due to the inherent limitations of the PDF specification and the rendering capabilities of PDF libraries, emojis with skin tone modifiers are not supported in generated PDF documents. Only the base versions of emojis can be displayed. This limitation is common across most PDF libraries, as the PDF format does not explicitly support rendering skin tone variations in emojis. + +## The importance of saving and restoring graphics state in PDF content rendering + +This example demonstrates the importance of saving and restoring the graphics state when rendering PDF content using the `save` and `restore` methods of the `PdfGraphics` class. These methods ensure that any transformations, such as scaling, rotation, or color changes, applied to the graphics context do not affect subsequent drawing operations, maintaining consistent layout and design. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Get graphics from the page +let graphics: PdfGraphics = page.graphics; +// Save the current graphics state and apply transformations +graphics.save(); +graphics.translateTransform({ x: 100, y: 50}); +graphics.rotateTransform(45); +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Get graphics from the page +var graphics = page.graphics; +// Save the current graphics state and apply transformations +graphics.save(); +graphics.translateTransform({ x: 100, y: 50 }); +graphics.rotateTransform(45); +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Drawing text in an existing document + +This example demonstrates how to draw text in an existing PDF document using the `drawString` method of the `PdfGraphics` class. The method allows you to specify the text content, font, brush, and position to render the text on a selected page within the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access first page +let page: PdfPage = document.getPage(0); +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access first page +var page = document.getPage(0); +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Drawing text using different fonts + +JavaScript PDF allows you to add text to the PDF document using the following types of fonts. + +1. Standard fonts +2. TrueType fonts +3. Chinese, Japanese and Korean (CJK) fonts + +### Draw text using standard fonts + +This example demonstrates how to draw text using standard fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with predefined font types from the `PdfStandardFont` class. Standard fonts such as Helvetica, TimesRoman, or Courier can be specified to render text with consistent and widely supported typography. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10); +// Draw text +page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10); +// Draw text +page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Draw Text using TrueType fonts + +This example demonstrates how to draw text using TrueType fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with a `PdfTrueTypeFont` instance. The TrueType font provides enhanced text rendering with support for custom font styles. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfTrueTypeFont, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Set font +let font: PdfTrueTypeFont = document.embedFont(data, 10); +// Draw text +page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Set font +var font = document.embedFont(data, 10); +// Draw text +page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +### Draw text using CJK fonts + +This example demonstrates how to draw text using fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class. The fonts provide support for Chinese, Japanese, and Korean characters, ensuring accurate rendering of multilingual text in the document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfCjkStandardFont, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Set font +let font: PdfCjkStandardFont = document.embedFont(PdfCjkFontFamily.heiseiMinchoW3, 10); +// Draw text +page.graphics.drawString('こんにちは世界', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Set font +var font = document.embedFont(ej.pdf.PdfCjkFontFamily.heiseiMinchoW3, 10); +// Draw text +page.graphics.drawString('こんにちは世界', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 })); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Drawing text using different text alignment + +This example demonstrates how to draw text in a PDF document using different text alignment options by utilizing the `PdfStringFormat` class. The alignment can be set through the alignment property, which supports values such as Left, Center, and Right, allowing precise control over the positioning of text within the page or a defined rectangle. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfTextAlignment, PdfVerticalAlignment, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Create a string format object to define text layout +let format = new PdfStringFormat(PdfTextAlignment.right, PdfVerticalAlignment.bottom); +format.wordSpacing = 2; // Set word spacing +format.characterSpacing = 1; // Set character spacing +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Draw text +page.graphics.drawString('Syncfusion JavaScript PDF library', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Create a string format object to define text layout +var format = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.right, ej.pdf.PdfVerticalAlignment.bottom); +format.wordSpacing = 2; // Set word spacing +format.characterSpacing = 1; // Set character spacing +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Draw text +page.graphics.drawString('Syncfusion JavaScript PDF library', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }), format); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## LineLimit, ClipPath, NoClip properties in PdfStringFormat + +**LineLimit:** When LineLimit is enabled, the provided string will be laid out within the specified bounds. If the LineLimit property is disabled, the layout will continue to fill any remaining space. The default value of the LineLimit property is true. + +**NoClip:** If we enable the NoClip option, it will show the text without cutting any words. If we disable the NoClip option, any text outside the fitting area will be hidden. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfStandardFont, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf'; + +// Create a new PDF document +let document: PdfDocument = new PdfDocument(); +// Add a page +let page: PdfPage = document.addPage(); +// Set font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular); +// Create a new PdfStringFormat and set its properties +let format: PdfStringFormat = new PdfStringFormat(); +// Set no clip +format.noClip = true; +// Set line limit +format.lineLimit = false; +// Draw text +page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Create a new PDF document +var document = new ej.pdf.PdfDocument(); +// Add a page +var page = document.addPage(); +// Set font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular); +// Create a new PdfStringFormat and set its properties +var format = new ej.pdf.PdfStringFormat(); +// Set no clip +format.noClip = true; +// Set line limit +format.lineLimit = false; +// Draw text +page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }), format); +// Save the document +document.save('Output.pdf'); +// Close the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md b/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md new file mode 100644 index 000000000..657f350b9 --- /dev/null +++ b/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md @@ -0,0 +1,355 @@ +--- +title: Watermarks in JavaScript PDF library | Syncfusion +description: This section explains how to add text and image watermarks to both new and existing PDF documents using the JavaScript PDF library +platform: document-processing +control: PDF +documentation: UG +--- +# Watermarks in JavaScript PDF library + +The PDF provides support to add watermark or stamp with text and images in the PDF document. + +## Adding text watermark in PDF document + +This example demonstrates how to add a text watermark using standard fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with predefined font types from the `PdfStandardFont` class. The transparency can be applied to the text using `setTransparency` method and rotation can be applied using `rotateTransform` method. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfGraphicsState, PdfFontFamily, PdfFontStyle, PdfBrush} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(); +// Access first page +let page: PdfPage = document.addPage(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new font +let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 20, PdfFontStyle.regular); +// Save the graphics state +let state: PdfGraphicsState = graphics.save(); +// Set graphics transparency +graphics.setTransparency(0.25); +// Set the rotate transform +graphics.rotateTransform(-45); +graphics.drawImage +// Draw the string +graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Restore the graphics state +graphics.restore(state); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(); +// Access first page +var page= document.addPage(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 20, ej.pdf.PdfFontStyle.regular); +// Save the graphics state +var state = graphics.save(); +// Set graphics transparency +graphics.setTransparency(0.25); +// Set the rotate transform +graphics.rotateTransform(-45); +graphics.drawImage +// Draw the string +graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new ej.pdf.({r: 0, g: 0, b: 255})); +// Restore the graphics state +graphics.restore(state); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how add a text watermark in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access first page +let page: PdfPage = document.getPage(0); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new font +let font: PdfFont = document.embedFont(PdfFontFamily.helvetica, 20, PdfFontStyle.regular); +// Save the graphics state +let state: PdfGraphicsState = graphics.save(); +// Set graphics transparency +graphics.setTransparency(0.25); +// Set the rotate transform +graphics.rotateTransform(-45); +graphics.drawImage +// Draw the string +graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255})); +// Restore the graphics state +graphics.restore(state); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access first page +var page = document.getPage(0); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new font +var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 20, ej.pdf.PdfFontStyle.regular); +// Save the graphics state +var state = graphics.save(); +// Set graphics transparency +graphics.setTransparency(0.25); +// Set the rotate transform +graphics.rotateTransform(-45); +graphics.drawImage +// Draw the string +graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new ej.pdf.PdfBrush({r: 0, g: 0, b: 255})); +// Restore the graphics state +graphics.restore(state); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Adding image watermark in PDF document + +This example demonstrates how to add a image watermark using standard fonts in a PDF document by utilizing the `drawImage` method of the `PdfGraphics` class along with predefined font types from the `PdfStandardFont` class. The transparency can be applied to the images using `setTransparency` method. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfBitmap} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(); +// Access the first page +let page: PdfPage = document.addPage(); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new image object using JPEG image data as a Base64 string +let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Save the graphics state +let state: PdfGraphicsState = graphics.save(); +// Set graphics transparency +graphics.setTransparency(0.25); +// Draw the image on the page graphics with specified width and height +graphics.drawImage(image, {x: 10, y: 20, width: 400, height: 400}); +// Restore the graphics state +graphics.restore(state); +//Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(); +// Access the first page +var page = document.addPage(); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new image object using JPEG image data as a Base64 string +var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Save the graphics state +var state = graphics.save(); +// Set graphics transparency +graphics.setTransparency(0.25); +// Draw the image on the page graphics with specified width and height +graphics.drawImage(image, {x: 10, y: 20, width: 400, height: 400}); +// Restore the graphics state +graphics.restore(state); +//Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how add a image watermark in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfGraphics, PdfBitmap} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access first page +let page: PdfPage = document.getPage(0); +// Gets the graphics of the PDF page +let graphics: PdfGraphics = page.graphics; +// Create a new image object using JPEG image data as a Base64 string +let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Save the graphics state +let state: PdfGraphicsState = graphics.save(); +// Set graphics transparency +graphics.setTransparency(0.25); +// Draw the image on the page graphics with specified width and height +graphics.drawImage(image, {x: 10, y: 20, width: 400, height: 400}); +// Restore the graphics state +graphics.restore(state); +//Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access first page +var page = document.getPage(0); +// Gets the graphics of the PDF page +var graphics = page.graphics; +// Create a new image object using JPEG image data as a Base64 string +var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z'); +// Save the graphics state +var state = graphics.save(); +// Set graphics transparency +graphics.setTransparency(0.25); +// Draw the image on the page graphics with specified width and height +graphics.drawImage(image, { x: 10, y: 20, width: 400, height: 400 }); +// Restore the graphics state +graphics.restore(state); +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Adding Watermark Annotation + +This example demonstrates how to add a text watermark to an existing PDF document using the `PdfWatermarkAnnotation` class. The annotation allows you to specify the watermark text, color, opacity, and position to visually mark the document as confidential or draft. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(); +// Get the first page +let page: PdfPage = document.addPage(); +// Create new watermark annotation +let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('CONFIDENTIAL', {x: 100, y: 300, width: 200, height: 40}, { + author : 'Name', + color: { r: 255, g: 0, b: 0 }, innerColor: {r: 0, g: 255, b: 255}, + opacity: 0.3 +}); +// Add annotation to the page +page.annotations.add(watermark); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(); +// Add a new page (first page) +var page = document.addPage(); +// Create new watermark annotation +var annotation = new ej.pdf.PdfWatermarkAnnotation( + 'CONFIDENTIAL', + { x: 100, y: 300, width: 200, height: 40 }, + { + author: 'Name', + color: { r: 255, g: 0, b: 0 }, + innerColor: { r: 0, g: 255, b: 255 }, + opacity: 0.3 + } +); +// Add annotation to the page +page.annotations.add(annotation); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how add a watermark annotation in an existing PDF document. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Get the first page +let page: PdfPage = document.getPage(0); +// Create new watermark annotation +let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('WaterMark', {x: 100, y: 300, width: 200, height: 40}, { + author : 'Name', + color: { r: 255, g: 0, b: 0 }, innerColor: {r: 0, g: 255, b: 255}, + opacity: 0.3 +}); +// Add annotation to the page +page.annotations.add(watermark); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Get the first page +var page = document.getPage(0); +// Create new watermark annotation +var annotation = new ej.pdf.PdfWatermarkAnnotation('WaterMark',{x:100,y:300,width:200,height:40},{ +author:'Name', +color:{r:255,g:0,b:0},innerColor:{r:0,g:255,b:255}, +opacity:0.3 +}); +// Add annotation to the page +page.annotations.add(annotation); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} + +## Removing Watermark Annotation + +Remove a watermark annotation from the page's annotation collection using the `PdfAnnotationCollection` of the loaded page. The following example demonstrates how to achieve this. + +{% tabs %} +{% highlight typescript tabtitle="TypeScript" %} +import { PdfDocument, PdfPage, PdfAnnotationCollection, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf'; + +// Load an existing PDF document +let document: PdfDocument = new PdfDocument(data); +// Access first page +let page: PdfPage = document.getPage(0); +// Check if the first annotation is a watermark, then remove it +let annotation: PdfAnnotationCollection = page.annotations[0]; +if (annotation instanceof PdfWatermarkAnnotation) { + // Remove the watermark annotation + page.annotations.removeAt(0); +} +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% highlight javascript tabtitle="JavaScript" %} +// Load an existing PDF document +var document = new ej.pdf.PdfDocument(data); +// Access first page +var page = document.getPage(0); +// Check if the first annotation is a watermark, then remove it +var annotation = page.annotations[0]; +if (annotation instanceof ej.pdf.PdfWatermarkAnnotation){ +page.annotations.removeAt(0); +} +// Save the document +document.save('output.pdf'); +// Destroy the document +document.destroy(); +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/mobile-view.md new file mode 100644 index 000000000..d40b7a35e --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/mobile-view.md @@ -0,0 +1,235 @@ +--- +layout: post +title: Redaction in mobile view in Angular PDF Viewer | Syncfusion +description: Learn how to apply redactions in mobile view using the Syncfusion Angular PDF Viewer with a complete toolbar setup and redaction workflow. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Redaction in Mobile View in Angular PdfViewer Component + +The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the Angular PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. + +![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) + +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. + +## Adding Redaction in Mobile View + +To enable redaction functionality in your Angular application, configure the PDF Viewer with the following setup: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + ToolbarSettingsModel, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Standalone mode (CDN) – keep this version aligned with your package + public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + + // Matches your JS toolbar configuration, with RedactionEditTool included + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; +} + +{% endhighlight %} +{% endtabs %} + +## Understanding Mobile Redaction Toolbar Tools + +When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. + +### Redaction Annotation Tool + +The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: + +Function: Creates visual redaction annotations that mark content for permanent removal +Usage: +Touch and drag to draw rectangular redaction overlays on any content area. + +Process: +- Selected content appears with a customizable overlay (default black) +- Annotations remain editable until explicitly applied +- Can be repositioned or deleted before final application + +![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png) + +### Page Redaction Tool + +The Page Redaction tool enables batch redaction of entire pages based on specific patterns. + +![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) + +Function: Redacts complete pages or page ranges with a single action +Options Available: +- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) +- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) +- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) +- Current Page: Redacts only the currently displayed page + +Usage: +Select desired pattern → Review affected pages in the viewer → Confirm redaction scope + +![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png) + +### Redaction Properties Tool + +The Redaction Properties tool allows customization of redaction appearance before application. + +![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) + +Function: Customize the visual appearance of redaction overlays and text replacement +Customizable Properties: +- Fill Color: Change the redaction overlay color (default: black) +- Outline Color: Set outline color for redaction boxes (optional) +- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") +- Text Color: Change overlay text color for better visibility +- Text Font: Select font family for overlay text +- Text Alignment: Position overlay text within redaction boxes +- Text Size: Adjust overlay text size relative to redaction area + +![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png) + +## Enabling Redaction Mode in Mobile View + +Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. + +![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png) + +Step 2: From the redaction toolbar, select your desired redaction tool: +- First Tool (Redaction Annotation): For selective content redaction +- Second Tool (Page Redaction): For page-wide or pattern-based redaction +- Third Tool (Redaction Properties): For appearance customization + +Step 3: Configure your redaction parameters using the selected tool interface. + +## Applying Different Redaction Types in Mobile View + +### Selective Content Redaction +1. Select Redaction Annotation tool (first button) +2. Choose Content: Tap and drag over text or draw rectangular areas +3. Preview: Check redaction overlays for accuracy +4. Apply: Tap "Apply Redactions" button + +### Page-Wide Redaction +1. Select Page Redaction tool (second button) +2. Choose Pattern: Select odd pages, even pages, or custom range +3. Review: Verify affected pages in the viewer +4. Apply: Confirm page redaction scope and apply + +### Custom Appearance Redaction +1. Select Redaction Properties tool (third button) +2. Customize: Adjust colors, overlay text, and formatting +3. Preview: See changes applied to existing annotations +4. Apply: Use customized appearance for final redaction + +## Applying Redactions in Mobile View + +N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. + +Once you have configured redactions using any combination of tools. + +Step 1: Review all redaction marks and configurations. + +![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png) + +Step 2: Tap the Apply Redactions button in the redaction toolbar + +![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png) + +Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone + +![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png) + +The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). + +![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png) + +## Removing Redaction Annotations + +To remove existing redaction annotations before they are applied: + +- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode +- Step 2: Tap on any existing redaction annotation you wish to remove +- Step 3: Select Delete from the context menu that appears + +Alternative: Tap redaction annotation → Use delete button in annotation properties panel + +![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) + +N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. + +## See Also + +* [Redaction Overview](./overview) +* [UI Interaction](./ui-interaction) +* [Programmatic Support in Redaction](./programmatic-support) +* [Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md new file mode 100644 index 000000000..e0fbcc84b --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md @@ -0,0 +1,166 @@ +--- +layout: post +title: Redaction annotation in Angular PDF Viewer | Syncfusion +description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion Angular PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Redaction in Angular PdfViewer + +Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion Angular PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Standalone mode (CDN) – keep this version aligned with your package + public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + + // Matches your JS toolbar configuration, with RedactionEditTool included + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; +} + +{% endhighlight %} +{% endtabs %} + +N> Prerequisites: Add the PdfViewer control to your Angular application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) + +## Add Redaction Annotations + +You can mark specific content for redaction using the toolbar or through code. + +Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. + +![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) + +## Delete Redaction Annotations + +Redaction annotations can be removed easily: + +- Click the **Delete** button on the toolbar, or +- Select the annotation and press the **Delete** key. + +![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) + +## Redact Entire Pages + +The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. + +![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) + +## Apply Redaction + +Once annotations are added, you can permanently apply them to the document. This action cannot be undone. + +Use the **Apply Redaction** button on the toolbar or call the API method: + +- The button is disabled until at least one redaction annotation exists. +- It becomes active when redaction annotations are present. + +![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) + +N> After redaction is applied, the original content cannot be recovered. + +## Comment Support + +Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction. + +Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments). + +## Import and Export Redaction Annotations + +You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions. + +For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation). + +## See also + +* [Redaction UI interactions](./ui-interaction) +* [Redaction Programmatic support](./programmatic-support) +* [Redaction Toolbar](./toolbar) +* [Redaction Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md new file mode 100644 index 000000000..f0ac83335 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md @@ -0,0 +1,702 @@ +--- +layout: post +title: Redaction Programmatic support in Angular PDF Viewer | Syncfusion +description: Learn how to add, delete, update, and apply redaction annotations programmatically in the Syncfusion Angular PDF Viewer. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Programmatic support for redaction in Angular PdfViewer + +The Syncfusion Angular PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Standalone mode (CDN) – keep this version aligned with your package + public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + + // Matches your JS toolbar configuration, with RedactionEditTool included + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; +} + +{% endhighlight %} +{% endtabs %} + +## Add redaction annotations programmatically + +You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + // Inline template—kept minimal and close to your JS structure + template: ` +
    +
    + +
    + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Update these as needed + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + // Keep toolbar simple; include redaction edit tool if you want UI access too + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'AnnotationEditTool', + 'RedactionEditTool', // shows the redaction UI tool (optional) + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + addRedaction(): void { + if (!this.pdfViewer) { return; } + + this.pdfViewer.annotation.addAnnotation('Redaction', { + bound: { x: 200, y: 480, width: 150, height: 75 }, + pageNumber: 1, + markerFillColor: '#0000FF', + markerBorderColor: 'white', + fillColor: 'red', + overlayText: 'Confidential', + fontColor: 'yellow', + fontFamily: 'Times New Roman', + fontSize: 8, + beforeRedactionsApplied: false + } as any); + } + + //You can listen to the annotationAdd event to track when annotations are added. + onAnnotationAdd(args: any): void { + console.log('Annotation added:', args); + } +} + +{% endhighlight %} +{% endtabs %} + +## Delete redaction annotations programmatically + +Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + +
    + + + `, + providers: [ + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + // Keep toolbar simple; include redaction edit tool if you want UI access too + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'AnnotationEditTool', + 'RedactionEditTool', // shows the redaction UI tool (optional) + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + deleteAnnotationById(): void { + this.pdfViewer.annotationModule.deleteAnnotationById( + (this.pdfViewer as any).annotationCollection[0].annotationId + ); + } +} + +{% endhighlight %} +{% endtabs %} + + +Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key. + +## Update redaction annotation properties programmatically + +You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + +
    + + + `, + providers: [ + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'AnnotationEditTool', + 'RedactionEditTool', // shows the redaction UI tool (optional) + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + //Edit RedactionAnnotation + editRedactAnnotation(): void { + const collection: any[] = (this.pdfViewer as any).annotationCollection; + for (let i = 0; i < collection.length; i++) { + if (collection[i].subject === 'Redaction') { + collection[i].overlayText = 'EditedAnnotation'; + collection[i].markerFillColor = '#22FF00'; + collection[i].markerBorderColor = '#000000'; + collection[i].isRepeat = true; + collection[i].fillColor = '#F8F8F8'; + collection[i].fontColor = '#333333'; + collection[i].fontSize = 14; + collection[i].fontFamily = 'Symbol'; + collection[i].textAlign = 'Right'; + collection[i].beforeRedactionsApplied = false; + + (this.pdfViewer as any).annotation.editAnnotation(collection[i]); + } + } + } +} + +{% endhighlight %} +{% endtabs %} + +## Add page redactions programmatically + +Entire pages can be marked for redaction using the `addPageRedactions` method: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { + PdfViewerComponent, + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + + +
    + + + `, + providers: [ + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent implements AfterViewInit { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'AnnotationEditTool', + 'RedactionEditTool', // shows the redaction UI tool (optional) + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + //Add page redactions programmatically (pages 1, 3, 5, 7) + addPageRedactions(): void { + this.pdfViewer.annotation.addPageRedactions([1, 3, 5, 7]); + } +} + +{% endhighlight %} +{% endtabs %} + +## Apply redaction programmatically + +Once annotations are added, you can permanently apply them to the document using the `redact` method: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { + PdfViewerComponent, + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + +
    + + + `, + providers: [ + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent implements AfterViewInit { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'AnnotationEditTool', + 'RedactionEditTool', // shows the redaction UI tool (optional) + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + //Apply redaction programmatically (irreversible) + applyRedaction(): void { + this.pdfViewer.annotation.redact(); + } +} + +{% endhighlight %} +{% endtabs %} + +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. + +## Configure default redaction annotation properties + +You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { + PdfViewerComponent, + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    +
    + + + `, + providers: [ + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent implements AfterViewInit { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'AnnotationEditTool', + 'RedactionEditTool', // shows the redaction UI tool (optional) + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + //Configure default redaction annotation properties (same as your JS) + ngAfterViewInit(): void { + (this.pdfViewer as any).redactionSettings = { + overlayText: 'Confidential', + markerFillColor: '#FF0000', + markerBorderColor: '#000000', + isRepeat: false, + fillColor: '#F8F8F8', + fontColor: '#333333', + fontSize: 14, + fontFamily: 'Symbol', + textAlign: 'Right' + }; + } +} + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples) + +## Redaction property panel + +The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. + +![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) + +## See also + +* [Overview of Redaction](./overview) +* [Redaction UI interactions](./ui-interaction) +* [Redaction Toolbar](./toolbar) +* [Reaction in Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/adding-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/adding-redaction-annotation.png new file mode 100644 index 000000000..b25b31126 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/adding-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/applied-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/applied-redaction-annot.png new file mode 100644 index 000000000..f6a6a2831 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/applied-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-button-mv.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-button-mv.png new file mode 100644 index 000000000..bd02a6bc3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-button-mv.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png new file mode 100644 index 000000000..0dea706e6 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-dialog.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-dialog.png new file mode 100644 index 000000000..0692de34e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/apply-redaction-dialog.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png new file mode 100644 index 000000000..8e061a883 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/moving-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/moving-redaction-annotation.png new file mode 100644 index 000000000..f7715e2d1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/moving-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-annot.png new file mode 100644 index 000000000..bf4804998 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png new file mode 100644 index 000000000..69658a826 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-panel.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-panel.png new file mode 100644 index 000000000..be68305ae Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/page-redaction-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-button-icon.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-button-icon.png new file mode 100644 index 000000000..954df393d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-button-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-page-icon.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-page-icon.png new file mode 100644 index 000000000..0c9dbed27 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-page-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-text-context-menu.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-text-context-menu.png new file mode 100644 index 000000000..a88985b39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redact-text-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-annot.png new file mode 100644 index 000000000..5e9cde040 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-delete-context-menu.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-delete-context-menu.png new file mode 100644 index 000000000..cd8f38b82 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-delete-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-delete-icon.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-delete-icon.png new file mode 100644 index 000000000..4026f8c49 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-delete-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-icon-toolbar.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-icon-toolbar.png new file mode 100644 index 000000000..6de03e8cc Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-icon-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-mobile-view.png new file mode 100644 index 000000000..2d9539200 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-mobile-view.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-properties-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-properties-annot.png new file mode 100644 index 000000000..079e65e59 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-properties-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png new file mode 100644 index 000000000..5a56fb1d5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-property-panel-icon.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-property-panel-icon.png new file mode 100644 index 000000000..3cc44eb64 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-property-panel-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png new file mode 100644 index 000000000..08d9a3a6a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/resizing-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/resizing-redaction-annotation.png new file mode 100644 index 000000000..846e301da Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/resizing-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png new file mode 100644 index 000000000..a78383509 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/show-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/show-redaction-toolbar.png new file mode 100644 index 000000000..94d75eb3b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/redaction-annotations-images/show-redaction-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/search-redact.md new file mode 100644 index 000000000..8918e441e --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/search-redact.md @@ -0,0 +1,178 @@ +--- +layout: post +title: Search text and redact in Angular PDF Viewer | Syncfusion +description: Learn how to find text and add redaction annotations programmatically in the Syncfusion Angular PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Search text and redact in Angular PdfViewer + +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. + +N> Prerequisites: Add the PdfViewer control to your Angular application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +## Steps to add Redaction annotations on search Text Bounds + +**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample. + + +**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    +
    + + +
    + + + +
    + `, + providers: [ + // Angular DI is the Angular equivalent of PdfViewer.Inject(...) + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Same sources as in your JS + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + // Primary toolbar including Redaction + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // show Redaction entry in main toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + /** + * Finds the term "syncfusion" across the document and adds Redaction annotations + * on top of every match (converts 72-dpi bounds to 96-dpi for addAnnotation). + */ + async searchTextAndRedact(): Promise { + const term = 'syncfusion'; + // Use async search so we don't depend on extractTextCompleted timing. + const results = await this.pdfViewer.textSearchModule.findTextAsync(term, false); + if (!results || results.length === 0) { + console.warn('No matches found.'); + return; + } + + const px = (pt: number) => (pt * 96) / 72; // convert from points to pixels + + for (const pageResult of results) { + if (!pageResult || !pageResult.bounds || pageResult.bounds.length === 0) { continue; } + if (pageResult.pageIndex == null) { continue; } // guard + const pageNumber = pageResult.pageIndex + 1; // API expects 1-based + + for (const bound of pageResult.bounds) { + this.pdfViewer.annotation.addAnnotation('Redaction', { + bound: { + x: px(bound.x), + y: px(bound.y), + width: px(bound.width), + height: px(bound.height) + }, + pageNumber, + overlayText: 'Confidential', + fillColor: '#00FF40FF', + fontColor: '#333333', + fontSize: 12, + fontFamily: 'Arial', + markerFillColor: '#FF0000', + markerBorderColor: '#000000' + } as any); // 'as any' to accept redaction-specific options + } + } + } + + /** Permanently applies all redaction marks in the document. */ + applyRedaction(): void { + this.pdfViewer.annotation.redact(); + } +} + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples) + +## Notes +- Ensure the PDF is fully loaded before triggering extraction and search. +- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates. +- Customize overlay text, colors, and typography as needed. +- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [UI interactions](./ui-interaction) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/toolbar.md new file mode 100644 index 000000000..d60d89594 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/toolbar.md @@ -0,0 +1,232 @@ +--- +layout: post +title: Customize the redaction toolbar in Angular PDF Viewer | Syncfusion +description: Learn how to customize the redaction toolbar in the Syncfusion Angular PDF Viewer by showing or hiding default items. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction toolbar customization in Angular + +The redaction toolbar in the Syncfusion Angular PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Standalone mode (CDN) – keep this version aligned with your package + public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + + // Matches your JS toolbar configuration, with RedactionEditTool included + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; +} + +{% endhighlight %} +{% endtabs %} + +Refer to the following image for the toolbar view: + +![Enable redaction toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +## Show or hide the redaction toolbar + +You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. + +### Display the redaction toolbar using the toolbar icon + +When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. + +![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +### Display the redaction toolbar programmatically + +You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. + +The following example demonstrates toggling the redaction toolbar programmatically: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + +
    + + +
    + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Standalone assets (keep version aligned with your installed package) + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + + // Includes RedactionEditTool in the primary toolbar + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // primary-bar entry to access the Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + // Separate handlers for show/hide (no toggle) + showRedactionToolbar(): void { + this.pdfViewer.toolbar.showRedactionToolbar(true); + } + + hideRedactionToolbar(): void { + this.pdfViewer.toolbar.showRedactionToolbar(false); + } +} + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples) + +Refer to the following image for details: + +![Programmatically show the Redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) + +## See also + +* [Adding the redaction annotation in PDF viewer](../redaction/overview) +* [UI interactions](./ui-interaction) +* [Programmatic support](./programmatic-support) +* [Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md new file mode 100644 index 000000000..dbf0aec0c --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md @@ -0,0 +1,136 @@ +--- +layout: post +title: Redaction UI interactions in Angular PDF Viewer | Syncfusion +description: Learn about UI interactions in Redaction annotations of the Syncfusion Angular PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction UI interactions in Angular PdfViewer + +## Add redaction annotations from the toolbar + +Use the redaction tool in the toolbar to draw over content that should be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties. + +![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) + +#### Redaction annotations are interactive + +* **Movable** – Drag and reposition the annotation within the same page. +![Moving a redaction annotation](redaction-annotations-images/moving-redaction-annotation.png) + +* **Resizable** – Resize the annotation to cover the required area. +![Resizing a redaction annotation](redaction-annotations-images/resizing-redaction-annotation.png) + +N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see the [Toolbar customization](../toolbar). + +## Add redaction annotations using the context menu + +In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. + +![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) + +## Update redaction properties + +After adding a redaction annotation, you can update its properties through the property panel or programmatically. + +### Update using the property panel + +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. + +The property panel can be opened in two ways: + +* By clicking the **redaction property panel** icon in the toolbar. +![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) + +* By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. +![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) + +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + + +## Delete redaction annotations + +Delete redaction annotations using any of the following: + +* **Right-click and select Delete** from the context menu. + +![Context menu showing Delete for a redaction](redaction-annotations-images/redaction-delete-context-menu.png) + +* **Click the Delete button** on the toolbar. +![Toolbar delete icon for redaction](redaction-annotations-images/redaction-delete-icon.png) + +* **Press the Delete key** after selecting the annotation. + +## Redact pages using the UI + +Entire pages can be marked for redaction using the **Redact Pages** option in the toolbar. Clicking the icon opens a dialog with options: + +* **Current Page** – Redacts the page currently in view. +* **Odd Pages Only** – Redacts all odd‑numbered pages. +* **Even Pages Only** – Redacts all even‑numbered pages. +* **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. + +After choosing the range, click **Save** to apply redaction marks to the selected pages. + +![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) + +## Apply redaction from the toolbar + +The **Apply Redaction** button permanently removes all marked content from the document. + +* The button is disabled when no redaction annotations exist. +* It automatically enables once at least one annotation is present. + +![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) + +N> Redaction is permanent. Once applied, the original content cannot be restored. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md index fa8cb0449..ee0427ef1 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md @@ -57,4 +57,5 @@ The frequently asked questions in Essential® PDF Viewer are liste * [Find Text using findTextAsync Method](./how-to/find-text-async) * [Extract Text](./how-to/extract-text) * [Dynamically Enable or Disable Text Selection](./how-to/enable-text-selection) -* [Show and Hide Annotations](./how-to/show-hide-annotation) \ No newline at end of file +* [Show and Hide Annotations](./how-to/show-hide-annotation) +* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md new file mode 100644 index 000000000..02eb84fa8 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md @@ -0,0 +1,100 @@ +--- +layout: post +title: Load document after resources Loaded Angular PDF Viewer | Syncfusion +description: Learn here all about how to Load document after loading assets in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Load a PDF only after PDFium resources are ready + +In Standalone mode, the Angular PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in `resourceUrl`. Attempting to load a document before those assets are available can cause errors. Use the `resourcesLoaded` event to defer document loading until all required assets are ready. + +## When does resourcesLoaded trigger? + +The `resourcesLoaded` event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the [`load`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#load) method to open a document (by URL or Base64). + +## How to Load Document after resourcesLoaded + +- Set the `resourceUrl` to a valid PDF Viewer assets path (CDN or your hosted path). +- Listen to `(resourcesLoaded)` and call `load` inside the handler. + +```html + + + +``` + +```ts +// app.component.ts +import { Component, ViewChild } from '@angular/core'; +import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + providers: [ + ToolbarService, + MagnificationService, + NavigationService, + LinkAnnotationService, + ThumbnailViewService, + BookmarkViewService, + TextSelectionService, + AnnotationService, + FormDesignerService, + FormFieldsService, + PageOrganizerService + ], + styleUrls: ['app.component.css'], + standalone: true, + imports: [PdfViewerModule], +}) +export class AppComponent { + @ViewChild('pdfViewer') + public pdfViewer!: PdfViewerComponent; + + // Point to the PDF Viewer assets (scripts/wasm) location + public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + // Sample sources to demonstrate both URL and Base64 loading + public documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public base64: string = '';// supply your Base64 here when needed + + // Called by the (resourcesLoaded) event + public resourcesLoaded(): void { + // Choose ONE of the following load options: + + // 1) Load by URL + this.pdfViewer.load(this.documentUrl, ""); + + // 2) Load by Base64 (uncomment if you want to load Base64) + // if (this.base64) { + // this.pdfViewer.load(`data:application/pdf;base64,${this.base64}`, ""); + // } + } +} +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to) + +## Notes and best practices + +- Always set a valid `resourceUrl` when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire. +- Load documents inside `resourcesLoaded`. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks. +- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call `load` again later (for example, in response to user actions) without waiting for the event. + +## See also + +- [Events in Angular PDF Viewer](../events#resourcesloaded) +- [Open PDF files](../open-pdf-files) +- [Save PDF files](../save-pdf-files) +- [Getting started](../getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md new file mode 100644 index 000000000..302a5394e --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md @@ -0,0 +1,259 @@ +--- +layout: post +title: Extract Pages in Angular PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Extract pages in Angular PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI, and also control extraction programmatically. The Extract Pages tool is available by default in Organize Pages. + +## Extract Pages in Organize Pages + +- Open the Organize Pages panel in the PDF Viewer toolbar. +- Locate and click the Extract Pages option. + +![Extract Pages](../images/extract-page.png) + +When selected, a secondary toolbar dedicated to extraction is displayed. + +![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png) + +## Extract pages using the UI + +You can extract by typing page numbers/ranges or by selecting thumbnails. + +1. Click Extract Pages in the Organize Pages panel. +2. In the input box, enter the pages to extract. Supported formats include: + - Single pages: 1,3,5 + - Ranges: 2-6 + - Combinations: 1,4,7-9 +3. Alternatively, select the page thumbnails you want instead of typing values. +4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool. + +![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png) + + N> Page numbers are 1-based (first page is 1). Invalid or out-of-range entries are ignored. + +## Extraction options (checkboxes) + +Two options appear in the secondary toolbar: + +- **Delete Pages After Extracting:** + - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. Ranges such as 2-4 export pages 2, 3, and 4 as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +### Enable/disable or show/hide Extract Pages + +Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`. + +Use the following code snippet to enable or disable the Extract Pages option: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} +import { Component, OnInit } from '@angular/core'; +import { + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + FormFieldsService, + FormDesignerService, + PrintService, + PageOrganizerService, +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + FormFieldsService, + FormDesignerService, + PrintService, + PageOrganizerService, + ] +}) +export class AppComponent implements OnInit { + public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; + ngOnInit(): void { } +} +{% endhighlight %} +{% endtabs %} + +Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`. + +Use the following code snippet to remove the Extract Pages option: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} +import { Component, OnInit } from '@angular/core'; +import { + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + FormFieldsService, + FormDesignerService, + PrintService, + PageOrganizerService, +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + FormFieldsService, + FormDesignerService, + PrintService, + PageOrganizerService, + ] +}) +export class AppComponent implements OnInit { + public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; + ngOnInit(): void { } +} +{% endhighlight %} +{% endtabs %} + +### Extract pages and load the result programmatically + +You can extract pages programmatically using the `extractPages` method. +The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} +import { Component, OnInit } from '@angular/core'; +import { + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + FormFieldsService, + FormDesignerService, + PrintService, + PageOrganizerService, +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
    + + + +
    + `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + FormFieldsService, + FormDesignerService, + PrintService, + PageOrganizerService, + ] +}) +export class AppComponent implements OnInit { + public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; + ngOnInit(): void { } + + + onExtract() { + const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0]; + // Extract pages 1 and 2 + const array = (viewer as any).extractPages('1,2'); + // Load the extracted pages back into the viewer + (viewer as any).load(array,""); + console.log(array); + } +} +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to) + +## See also + +- [Overview](../overview) +- [UI interactions](../ui-interactions) +- [Programmatic support](../programmatic-support) +- [Toolbar](../toolbar) +- [Events](../events) +- [Mobile view](../mobile-view) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/mobile-view.md new file mode 100644 index 000000000..f725e4b62 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/mobile-view.md @@ -0,0 +1,189 @@ +--- +layout: post +title: Redaction in mobile view in Core PDF Viewer | Syncfusion +description: Learn how to apply redactions in mobile view using the Syncfusion ASP.NET Core PDF Viewer with a complete toolbar setup and redaction workflow. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Redaction in Mobile View in ASP.NET Core PdfViewer Component + +The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the ASP.NET Core PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. + +![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) + +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. + +## Adding Redaction in Mobile View + +To enable redaction functionality in your ASP.NET Core application, configure the PDF Viewer with the following setup: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +## Understanding Mobile Redaction Toolbar Tools + +When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. + +### Redaction Annotation Tool + +The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: + +Function: Creates visual redaction annotations that mark content for permanent removal +Usage: +Touch and drag to draw rectangular redaction overlays on any content area. + +Process: +- Selected content appears with a customizable overlay (default black) +- Annotations remain editable until explicitly applied +- Can be repositioned or deleted before final application + +![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png) + +### Page Redaction Tool + +The Page Redaction tool enables batch redaction of entire pages based on specific patterns. + +![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) + +Function: Redacts complete pages or page ranges with a single action +Options Available: +- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) +- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) +- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) +- Current Page: Redacts only the currently displayed page + +Usage: +Select desired pattern → Review affected pages in the viewer → Confirm redaction scope + +![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png) + +### Redaction Properties Tool + +The Redaction Properties tool allows customization of redaction appearance before application. + +![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) + +Function: Customize the visual appearance of redaction overlays and text replacement +Customizable Properties: +- Fill Color: Change the redaction overlay color (default: black) +- Outline Color: Set outline color for redaction boxes (optional) +- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") +- Text Color: Change overlay text color for better visibility +- Text Font: Select font family for overlay text +- Text Alignment: Position overlay text within redaction boxes +- Text Size: Adjust overlay text size relative to redaction area + +![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png) + +## Enabling Redaction Mode in Mobile View + +Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. + +![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png) + +Step 2: From the redaction toolbar, select your desired redaction tool: +- First Tool (Redaction Annotation): For selective content redaction +- Second Tool (Page Redaction): For page-wide or pattern-based redaction +- Third Tool (Redaction Properties): For appearance customization + +Step 3: Configure your redaction parameters using the selected tool interface. + +## Applying Different Redaction Types in Mobile View + +### Selective Content Redaction +1. Select Redaction Annotation tool (first button) +2. Choose Content: Tap and drag over text or draw rectangular areas +3. Preview: Check redaction overlays for accuracy +4. Apply: Tap "Apply Redactions" button + +### Page-Wide Redaction +1. Select Page Redaction tool (second button) +2. Choose Pattern: Select odd pages, even pages, or custom range +3. Review: Verify affected pages in the viewer +4. Apply: Confirm page redaction scope and apply + +### Custom Appearance Redaction +1. Select Redaction Properties tool (third button) +2. Customize: Adjust colors, overlay text, and formatting +3. Preview: See changes applied to existing annotations +4. Apply: Use customized appearance for final redaction + +## Applying Redactions in Mobile View + +N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. + +Once you have configured redactions using any combination of tools. + +Step 1: Review all redaction marks and configurations. + +![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png) + +Step 2: Tap the Apply Redactions button in the redaction toolbar + +![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png) + +Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone + +![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png) + +The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). + +![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png) + +## Removing Redaction Annotations + +To remove existing redaction annotations before they are applied: + +- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode +- Step 2: Tap on any existing redaction annotation you wish to remove +- Step 3: Select Delete from the context menu that appears + +Alternative: Tap redaction annotation → Use delete button in annotation properties panel + +![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) + +N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. + +## See Also + +* [Redaction Overview](./overview) +* [UI Interaction](./ui-interaction) +* [Programmatic Support in Redaction](./programmatic-support) +* [Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md new file mode 100644 index 000000000..789862082 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Redaction annotation in Core PDF Viewer | Syncfusion +description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion ASP.NET Core PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Redaction in ASP.NET Core PdfViewer + +Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion ASP.NET Core PDF Viewer lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +N> Prerequisites: Add the PdfViewer control to your ASP.NET Core application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) + +## Add Redaction Annotations + +You can mark specific content for redaction using the toolbar or through code. + +Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. + +![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) + +## Delete Redaction Annotations + +Redaction annotations can be removed easily: + +- Click the **Delete** button on the toolbar, or +- Select the annotation and press the **Delete** key. + +![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) + +## Redact Entire Pages + +The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. + +![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) + +## Apply Redaction + +Once annotations are added, you can permanently apply them to the document. This action cannot be undone. + +Use the **Apply Redaction** button on the toolbar or call the API method: + +- The button is disabled until at least one redaction annotation exists. +- It becomes active when redaction annotations are present. + +![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) + +N> After redaction is applied, the original content cannot be recovered. + +## Comment Support + +Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction. + +Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments). + +## Import and Export Redaction Annotations + +You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions. + +For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation). + +## See also + +* [Redaction UI interactions](./ui-interaction) +* [Redaction Programmatic support](./programmatic-support) +* [Redaction Toolbar](./toolbar) +* [Redaction Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md new file mode 100644 index 000000000..9beadd350 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md @@ -0,0 +1,328 @@ +--- +layout: post +title: Redaction Programmatic support in Core PDF Viewer | Syncfusion +description: Learn how to add, delete, update, and apply redaction annotations programmatically in the Syncfusion ASP.NET Core PDF Viewer. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Programmatic support for redaction in ASP.NET Core PdfViewer + +The Syncfusion ASP.NET Core PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +## Add redaction annotations programmatically + +You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +## Delete redaction annotations programmatically + +Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + + +Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key. + +## Update redaction annotation properties programmatically + +You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +## Add page redactions programmatically + +Entire pages can be marked for redaction using the `addPageRedactions` method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +## Apply redaction programmatically + +Once annotations are added, you can permanently apply them to the document using the `redact` method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. + +## Configure default redaction annotation properties + +You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) + +## Redaction property panel + +The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. + +![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) + +## See also + +* [Overview of Redaction](./overview) +* [Redaction UI interactions](./ui-interaction) +* [Redaction Toolbar](./toolbar) +* [Reaction in Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/adding-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/adding-redaction-annotation.png new file mode 100644 index 000000000..b25b31126 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/adding-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/applied-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/applied-redaction-annot.png new file mode 100644 index 000000000..f6a6a2831 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/applied-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-button-mv.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-button-mv.png new file mode 100644 index 000000000..bd02a6bc3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-button-mv.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png new file mode 100644 index 000000000..0dea706e6 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-dialog.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-dialog.png new file mode 100644 index 000000000..0692de34e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/apply-redaction-dialog.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png new file mode 100644 index 000000000..8e061a883 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/moving-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/moving-redaction-annotation.png new file mode 100644 index 000000000..f7715e2d1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/moving-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-annot.png new file mode 100644 index 000000000..bf4804998 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png new file mode 100644 index 000000000..69658a826 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-panel.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-panel.png new file mode 100644 index 000000000..be68305ae Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/page-redaction-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-button-icon.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-button-icon.png new file mode 100644 index 000000000..954df393d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-button-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-page-icon.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-page-icon.png new file mode 100644 index 000000000..0c9dbed27 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-page-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-text-context-menu.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-text-context-menu.png new file mode 100644 index 000000000..a88985b39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redact-text-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-annot.png new file mode 100644 index 000000000..5e9cde040 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-delete-context-menu.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-delete-context-menu.png new file mode 100644 index 000000000..cd8f38b82 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-delete-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-delete-icon.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-delete-icon.png new file mode 100644 index 000000000..4026f8c49 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-delete-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-icon-toolbar.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-icon-toolbar.png new file mode 100644 index 000000000..6de03e8cc Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-icon-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-mobile-view.png new file mode 100644 index 000000000..2d9539200 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-mobile-view.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-properties-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-properties-annot.png new file mode 100644 index 000000000..079e65e59 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-properties-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png new file mode 100644 index 000000000..5a56fb1d5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-property-panel-icon.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-property-panel-icon.png new file mode 100644 index 000000000..3cc44eb64 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-property-panel-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png new file mode 100644 index 000000000..08d9a3a6a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/resizing-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/resizing-redaction-annotation.png new file mode 100644 index 000000000..846e301da Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/resizing-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png new file mode 100644 index 000000000..a78383509 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/show-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/show-redaction-toolbar.png new file mode 100644 index 000000000..94d75eb3b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/redaction-annotations-images/show-redaction-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/search-redact.md new file mode 100644 index 000000000..879f504e5 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/search-redact.md @@ -0,0 +1,122 @@ +--- +layout: post +title: Search text and redact in Core PDF Viewer | Syncfusion +description: Learn how to find text and add redaction annotations programmatically in the Syncfusion ASP.NET Core PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Search text and redact in ASP.NET Core PdfViewer + +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. + +N> Prerequisites: Add the PdfViewer control to your ASP.NET Core application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +## Steps to add Redaction annotations on search Text Bounds + +**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started) to create a simple PDF Viewer sample. + + +**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +@page +@model IndexModel +@{ + ViewData["Title"] = "Search text and redact"; +} +
    +
    + + +
    + + + +
    + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) + +## Notes +- Ensure the PDF is fully loaded before triggering extraction and search. +- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates. +- Customize overlay text, colors, and typography as needed. +- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [UI interactions](./ui-interaction) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/toolbar.md new file mode 100644 index 000000000..597913df3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/toolbar.md @@ -0,0 +1,129 @@ +--- +layout: post +title: Customize the redaction toolbar in Core PDF Viewer | Syncfusion +description: Learn how to customize the redaction toolbar in the Syncfusion ASP.NET Core PDF Viewer by showing or hiding default items. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction toolbar customization in ASP.NET Core + +The redaction toolbar in the Syncfusion ASP.NET Core PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +Refer to the following image for the toolbar view: + +![Enable redaction toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +## Show or hide the redaction toolbar + +You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. + +### Display the redaction toolbar using the toolbar icon + +When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. + +![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +### Display the redaction toolbar programmatically + +You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. + +The following example demonstrates toggling the redaction toolbar programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + +
    + + +
    + + +
    + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) + +Refer to the following image for details: + +![Programmatically show the Redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) + +## See also + +* [Adding the redaction annotation in PDF viewer](../redaction/overview) +* [UI interactions](./ui-interaction) +* [Programmatic support](./programmatic-support) +* [Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/ui-interaction.md new file mode 100644 index 000000000..2b46addc4 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/ui-interaction.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Redaction UI interactions in Core PDF Viewer | Syncfusion +description: Learn about UI interactions in Redaction annotations of the Syncfusion ASP.NET Core PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction UI interactions in ASP.NET Core PdfViewer + +## Add redaction annotations from the toolbar + +Use the redaction tool in the toolbar to draw over content that should be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties. + +![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) + +#### Redaction annotations are interactive + +* **Movable** – Drag and reposition the annotation within the same page. +![Moving a redaction annotation](redaction-annotations-images/moving-redaction-annotation.png) + +* **Resizable** – Resize the annotation to cover the required area. +![Resizing a redaction annotation](redaction-annotations-images/resizing-redaction-annotation.png) + +N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see the [Toolbar customization](../toolbar). + +## Add redaction annotations using the context menu + +In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. + +![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) + +## Update redaction properties + +After adding a redaction annotation, you can update its properties through the property panel or programmatically. + +### Update using the property panel + +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. + +The property panel can be opened in two ways: + +* By clicking the **redaction property panel** icon in the toolbar. +![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) + +* By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. +![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) + +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + +## Delete redaction annotations + +Delete redaction annotations using any of the following: + +* **Right-click and select Delete** from the context menu. + +![Context menu showing Delete for a redaction](redaction-annotations-images/redaction-delete-context-menu.png) + +* **Click the Delete button** on the toolbar. +![Toolbar delete icon for redaction](redaction-annotations-images/redaction-delete-icon.png) + +* **Press the Delete key** after selecting the annotation. + +## Redact pages using the UI + +Entire pages can be marked for redaction using the **Redact Pages** option in the toolbar. Clicking the icon opens a dialog with options: + +* **Current Page** – Redacts the page currently in view. +* **Odd Pages Only** – Redacts all odd‑numbered pages. +* **Even Pages Only** – Redacts all even‑numbered pages. +* **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. + +After choosing the range, click **Save** to apply redaction marks to the selected pages. + +![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) + +## Apply redaction from the toolbar + +The **Apply Redaction** button permanently removes all marked content from the document. + +* The button is disabled when no redaction annotations exist. +* It automatically enables once at least one annotation is present. + +![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) + +N> Redaction is permanent. Once applied, the original content cannot be restored. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to-overview.md index 73355d7dc..59c9b2a03 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to-overview.md @@ -63,3 +63,4 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to select annotations in multi page?](./how-to/select-multi-page-annotations) * [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation) * [How to print the PDF document silently?](./how-to/print-document) +* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-document-after-resources-loaded.md new file mode 100644 index 000000000..af8dc66b9 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-document-after-resources-loaded.md @@ -0,0 +1,77 @@ +--- +layout: post +title: Load document after resources Loaded Core PDF Viewer | Syncfusion +description: Learn here how to load a PDF only after assets are ready in the Syncfusion ASP.NET Core PDF Viewer (Standalone) using the resourcesLoaded event. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Load a PDF only after PDFium resources are ready + +In Standalone mode, the ASP.NET Core PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in the resourceUrl property. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready. + +## When does resourcesLoaded trigger? + +The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64). + +## How to Load Document after resourcesLoaded + +- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path). +- Listen to resourcesLoaded and call load inside the handler. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +@page +@model IndexModel +@{ + ViewData["Title"] = "Home page"; +} + +
    + + +
    + + + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to) + +## Notes and best practices + +- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire. +- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks. +- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event. + +## See also + +- [Events in ASP.NET Core PDF Viewer](../event#resourcesloaded) +- [Open PDF files](../open-pdf-files) +- [Save PDF files](../save-pdf-files) +- [Getting started](../getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/extract-pages.md new file mode 100644 index 000000000..8f1ac16f7 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/extract-pages.md @@ -0,0 +1,136 @@ +--- +layout: post +title: Extract Pages in ASP.NET Core PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion ASP.NET Core PDF Viewer control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Extract pages in ASP.NET Core PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI. +The Extract Pages tool is available by default in Organize Pages. + +## Extract Pages in Organize Pages + +- Open the Organize Pages panel in the PDF Viewer toolbar. +- Locate and click the Extract Pages option. + +![Extract Pages](../images/extract-page.png) + +When selected, a secondary toolbar dedicated to extraction is displayed. + +![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png) + +## Extract pages using the UI + +You can extract by typing page numbers/ranges or by selecting thumbnails. + +1. Click Extract Pages in the Organize Pages panel. +2. In the input box, enter the pages to extract. Supported formats include: + - Single pages: 1,3,5 + - Ranges: 2-6 + - Combinations: 1,4,7-9 +3. Alternatively, select the page thumbnails you want instead of typing values. +4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool. + +![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png) + + N> Page numbers are 1-based (first page is 1). Invalid or out-of-range entries are ignored. + +## Extraction options (checkboxes) + +Two options appear in the secondary toolbar: + +- **Delete Pages After Extracting:** + - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. Ranges such as 2-4 export pages 2, 3, and 4 as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable Extract Pages + +Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`. + +Use the following code snippet to enable or disable the Extract Pages option: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + +
    +{% endhighlight %} +{% endtabs %} + +Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`. + +Use the following code snippet to remove the Extract Pages option: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + +
    +{% endhighlight %} +{% endtabs %} + +### Extract pages and load the result programmatically + +You can extract pages programmatically using the `extractPages` method. +The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + + +
    + + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to) + +## See also + +- [Overview](../overview) +- [UI interactions](../ui-interactions) +- [Programmatic support](../programmatic-support) +- [Toolbar](../toolbar) +- [Events](../events) +- [Mobile view](../mobile-view) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/mobile-view.md new file mode 100644 index 000000000..9bdbf7a72 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/mobile-view.md @@ -0,0 +1,188 @@ +--- +layout: post +title: Redaction in mobile view in MVC PDF Viewer | Syncfusion +description: Learn how to apply redactions in mobile view using the Syncfusion ASP.NET MVC PDF Viewer with a complete toolbar setup and redaction workflow. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Redaction in Mobile View in ASP.NET MVC PdfViewer Component + +The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the ASP.NET MVC PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. + +![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) + +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. + +## Adding Redaction in Mobile View + +To enable redaction functionality in your ASP.NET MVC application, configure the PDF Viewer with the following setup: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +## Understanding Mobile Redaction Toolbar Tools + +When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. + +### Redaction Annotation Tool + +The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: + +Function: Creates visual redaction annotations that mark content for permanent removal +Usage: +Touch and drag to draw rectangular redaction overlays on any content area. + +Process: +- Selected content appears with a customizable overlay (default black) +- Annotations remain editable until explicitly applied +- Can be repositioned or deleted before final application + +![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png) + +### Page Redaction Tool + +The Page Redaction tool enables batch redaction of entire pages based on specific patterns. + +![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) + +Function: Redacts complete pages or page ranges with a single action +Options Available: +- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) +- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) +- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) +- Current Page: Redacts only the currently displayed page + +Usage: +Select desired pattern → Review affected pages in the viewer → Confirm redaction scope + +![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png) + +### Redaction Properties Tool + +The Redaction Properties tool allows customization of redaction appearance before application. + +![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) + +Function: Customize the visual appearance of redaction overlays and text replacement +Customizable Properties: +- Fill Color: Change the redaction overlay color (default: black) +- Outline Color: Set outline color for redaction boxes (optional) +- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") +- Text Color: Change overlay text color for better visibility +- Text Font: Select font family for overlay text +- Text Alignment: Position overlay text within redaction boxes +- Text Size: Adjust overlay text size relative to redaction area + +![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png) + +## Enabling Redaction Mode in Mobile View + +Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. + +![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png) + +Step 2: From the redaction toolbar, select your desired redaction tool: +- First Tool (Redaction Annotation): For selective content redaction +- Second Tool (Page Redaction): For page-wide or pattern-based redaction +- Third Tool (Redaction Properties): For appearance customization + +Step 3: Configure your redaction parameters using the selected tool interface. + +## Applying Different Redaction Types in Mobile View + +### Selective Content Redaction +1. Select Redaction Annotation tool (first button) +2. Choose Content: Tap and drag over text or draw rectangular areas +3. Preview: Check redaction overlays for accuracy +4. Apply: Tap "Apply Redactions" button + +### Page-Wide Redaction +1. Select Page Redaction tool (second button) +2. Choose Pattern: Select odd pages, even pages, or custom range +3. Review: Verify affected pages in the viewer +4. Apply: Confirm page redaction scope and apply + +### Custom Appearance Redaction +1. Select Redaction Properties tool (third button) +2. Customize: Adjust colors, overlay text, and formatting +3. Preview: See changes applied to existing annotations +4. Apply: Use customized appearance for final redaction + +## Applying Redactions in Mobile View + +N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. + +Once you have configured redactions using any combination of tools. + +Step 1: Review all redaction marks and configurations. + +![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png) + +Step 2: Tap the Apply Redactions button in the redaction toolbar + +![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png) + +Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone + +![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png) + +The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). + +![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png) + +## Removing Redaction Annotations + +To remove existing redaction annotations before they are applied: + +- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode +- Step 2: Tap on any existing redaction annotation you wish to remove +- Step 3: Select Delete from the context menu that appears + +Alternative: Tap redaction annotation → Use delete button in annotation properties panel + +![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) + +N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. + +## See Also + +* [Redaction Overview](./overview) +* [UI Interaction](./ui-interaction) +* [Programmatic Support in Redaction](./programmatic-support) +* [Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/overview.md new file mode 100644 index 000000000..ce8981404 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/overview.md @@ -0,0 +1,119 @@ +--- +layout: post +title: Redaction annotation in MVC PDF Viewer | Syncfusion +description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion ASP.NET MVC PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Redaction in ASP.NET MVC PdfViewer + +Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion ASP.NET MVC PDF Viewer lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +N> Prerequisites: Add the PdfViewer control to your ASP.NET MVC application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) + +## Add Redaction Annotations + +You can mark specific content for redaction using the toolbar or through code. + +Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. + +![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) + +## Delete Redaction Annotations + +Redaction annotations can be removed easily: + +- Click the **Delete** button on the toolbar, or +- Select the annotation and press the **Delete** key. + +![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) + +## Redact Entire Pages + +The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. + +![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) + +## Apply Redaction + +Once annotations are added, you can permanently apply them to the document. This action cannot be undone. + +Use the **Apply Redaction** button on the toolbar or call the API method: + +- The button is disabled until at least one redaction annotation exists. +- It becomes active when redaction annotations are present. + +![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) + +N> After redaction is applied, the original content cannot be recovered. + +## Comment Support + +Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction. + +Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments). + +## Import and Export Redaction Annotations + +You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions. + +For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation). + +## See also + +* [Redaction UI interactions](./ui-interaction) +* [Redaction Programmatic support](./programmatic-support) +* [Redaction Toolbar](./toolbar) +* [Redaction Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/programmatic-support.md new file mode 100644 index 000000000..89bf13793 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/programmatic-support.md @@ -0,0 +1,321 @@ +--- +layout: post +title: Redaction Programmatic support in MVC PDF Viewer | Syncfusion +description: Learn how to add, delete, update, and apply redaction annotations programmatically in the Syncfusion ASP.NET MVC PDF Viewer. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Programmatic support for redaction in ASP.NET MVC PdfViewer + +The Syncfusion ASP.NET MVC PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +## Add redaction annotations programmatically + +You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +## Delete redaction annotations programmatically + +Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + + +Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key. + +## Update redaction annotation properties programmatically + +You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +## Add page redactions programmatically + +Entire pages can be marked for redaction using the `addPageRedactions` method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +## Apply redaction programmatically + +Once annotations are added, you can permanently apply them to the document using the `redact` method: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +
    + +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. + +## Configure default redaction annotation properties + +You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples) + +## Redaction property panel + +The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. + +![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) + +## See also + +* [Overview of Redaction](./overview) +* [Redaction UI interactions](./ui-interaction) +* [Redaction Toolbar](./toolbar) +* [Reaction in Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/adding-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/adding-redaction-annotation.png new file mode 100644 index 000000000..b25b31126 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/adding-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/applied-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/applied-redaction-annot.png new file mode 100644 index 000000000..f6a6a2831 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/applied-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-button-mv.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-button-mv.png new file mode 100644 index 000000000..bd02a6bc3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-button-mv.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png new file mode 100644 index 000000000..0dea706e6 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-dialog.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-dialog.png new file mode 100644 index 000000000..0692de34e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/apply-redaction-dialog.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png new file mode 100644 index 000000000..8e061a883 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/moving-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/moving-redaction-annotation.png new file mode 100644 index 000000000..f7715e2d1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/moving-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-annot.png new file mode 100644 index 000000000..bf4804998 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png new file mode 100644 index 000000000..69658a826 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-panel.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-panel.png new file mode 100644 index 000000000..be68305ae Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/page-redaction-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-button-icon.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-button-icon.png new file mode 100644 index 000000000..954df393d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-button-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-page-icon.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-page-icon.png new file mode 100644 index 000000000..0c9dbed27 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-page-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-text-context-menu.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-text-context-menu.png new file mode 100644 index 000000000..a88985b39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redact-text-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-annot.png new file mode 100644 index 000000000..5e9cde040 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-delete-context-menu.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-delete-context-menu.png new file mode 100644 index 000000000..cd8f38b82 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-delete-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-delete-icon.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-delete-icon.png new file mode 100644 index 000000000..4026f8c49 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-delete-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-icon-toolbar.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-icon-toolbar.png new file mode 100644 index 000000000..6de03e8cc Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-icon-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-mobile-view.png new file mode 100644 index 000000000..2d9539200 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-mobile-view.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-properties-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-properties-annot.png new file mode 100644 index 000000000..079e65e59 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-properties-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png new file mode 100644 index 000000000..5a56fb1d5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-property-panel-icon.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-property-panel-icon.png new file mode 100644 index 000000000..3cc44eb64 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-property-panel-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png new file mode 100644 index 000000000..08d9a3a6a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/resizing-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/resizing-redaction-annotation.png new file mode 100644 index 000000000..846e301da Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/resizing-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png new file mode 100644 index 000000000..a78383509 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/show-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/show-redaction-toolbar.png new file mode 100644 index 000000000..94d75eb3b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/redaction-annotations-images/show-redaction-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/search-redact.md new file mode 100644 index 000000000..14981d888 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/search-redact.md @@ -0,0 +1,121 @@ +--- +layout: post +title: Search text and redact in MVC PDF Viewer | Syncfusion +description: Learn how to find text and add redaction annotations programmatically in the Syncfusion ASP.NET MVC PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Search text and redact in ASP.NET MVC PdfViewer + +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. + +N> Prerequisites: Add the PdfViewer control to your ASP.NET MVC application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +## Steps to add Redaction annotations on search Text Bounds + +**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started) to create a simple PDF Viewer sample. + + +**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +@{ + ViewBag.Title = "Search text and redact"; +} + +
    +
    + + +
    + + @Html.EJS().PdfViewer("pdfViewer") + .Height("640px") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .IsExtractText(true) + .Render() +
    + + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples) + +## Notes +- Ensure the PDF is fully loaded before triggering extraction and search. +- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates. +- Customize overlay text, colors, and typography as needed. +- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [UI interactions](./ui-interaction) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/toolbar.md new file mode 100644 index 000000000..19196220d --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/toolbar.md @@ -0,0 +1,127 @@ +--- +layout: post +title: Customize the redaction toolbar in MVC PDF Viewer | Syncfusion +description: Learn how to customize the redaction toolbar in the Syncfusion ASP.NET MVC PDF Viewer by showing or hiding default items. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction toolbar customization in ASP.NET MVC + +The redaction toolbar in the Syncfusion ASP.NET MVC PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +Refer to the following image for the toolbar view: + +![Enable redaction toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +## Show or hide the redaction toolbar + +You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. + +### Display the redaction toolbar using the toolbar icon + +When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. + +![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +### Display the redaction toolbar programmatically + +You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. + +The following example demonstrates toggling the redaction toolbar programmatically: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + +
    + + +
    + @Html.EJS().PdfViewer("pdfViewer") + .ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib") + .DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf") + .Height("640px") + .Render() +
    + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples) + +Refer to the following image for details: + +![Programmatically show the Redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) + +## See also + +* [Adding the redaction annotation in PDF viewer](../redaction/overview) +* [UI interactions](./ui-interaction) +* [Programmatic support](./programmatic-support) +* [Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/ui-interaction.md new file mode 100644 index 000000000..fada3844e --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/Redaction/ui-interaction.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Redaction UI interactions in MVC PDF Viewer | Syncfusion +description: Learn about UI interactions in Redaction annotations of the Syncfusion ASP.NET MVC PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction UI interactions in ASP.NET MVC PdfViewer + +## Add redaction annotations from the toolbar + +Use the redaction tool in the toolbar to draw over content that should be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties. + +![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) + +#### Redaction annotations are interactive + +* **Movable** – Drag and reposition the annotation within the same page. +![Moving a redaction annotation](redaction-annotations-images/moving-redaction-annotation.png) + +* **Resizable** – Resize the annotation to cover the required area. +![Resizing a redaction annotation](redaction-annotations-images/resizing-redaction-annotation.png) + +N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see the [Toolbar customization](../toolbar). + +## Add redaction annotations using the context menu + +In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. + +![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) + +## Update redaction properties + +After adding a redaction annotation, you can update its properties through the property panel or programmatically. + +### Update using the property panel + +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. + +The property panel can be opened in two ways: + +* By clicking the **redaction property panel** icon in the toolbar. +![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) + +* By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. +![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) + +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + +## Delete redaction annotations + +Delete redaction annotations using any of the following: + +* **Right-click and select Delete** from the context menu. + +![Context menu showing Delete for a redaction](redaction-annotations-images/redaction-delete-context-menu.png) + +* **Click the Delete button** on the toolbar. +![Toolbar delete icon for redaction](redaction-annotations-images/redaction-delete-icon.png) + +* **Press the Delete key** after selecting the annotation. + +## Redact pages using the UI + +Entire pages can be marked for redaction using the **Redact Pages** option in the toolbar. Clicking the icon opens a dialog with options: + +* **Current Page** – Redacts the page currently in view. +* **Odd Pages Only** – Redacts all odd‑numbered pages. +* **Even Pages Only** – Redacts all even‑numbered pages. +* **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. + +After choosing the range, click **Save** to apply redaction marks to the selected pages. + +![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) + +## Apply redaction from the toolbar + +The **Apply Redaction** button permanently removes all marked content from the document. + +* The button is disabled when no redaction annotations exist. +* It automatically enables once at least one annotation is present. + +![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) + +N> Redaction is permanent. Once applied, the original content cannot be restored. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to-overview.md index 1e99673ca..1caa38127 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to-overview.md @@ -74,3 +74,4 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to set Author name for annotation in PDF Viewer?](./how-to/set-author-name-to-annotation) * [How to Show notification dialog in PDF Viewer?](./how-to/show-notification-dialog) * [How to set date to the signature in PDF Viewer?](./how-to/signature-date) +* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/load-document-after-resources-loaded.md new file mode 100644 index 000000000..6cd5f62fd --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/load-document-after-resources-loaded.md @@ -0,0 +1,65 @@ +--- +layout: post +title: Load document after resources Loaded MVC PDF Viewer | Syncfusion +description: Learn here how to load a PDF only after assets are ready in the Syncfusion ASP.NET MVC PDF Viewer (Standalone) using the resourcesLoaded event. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Load a PDF only after PDFium resources are ready + +In Standalone mode, the ASP.NET MVC PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in the resourceUrl property. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready. + +## When does resourcesLoaded trigger? + +The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64). + +## How to Load Document after resourcesLoaded + +- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path). +- Listen to resourcesLoaded and call load inside the handler. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +@{ + ViewBag.Title = "Home Page"; +} +@Html.EJS().ScriptManager() +
    +
    + @Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib").Render() +
    +
    + + + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to) + +## Notes and best practices + +- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire. +- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks. +- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event. + +## See also + +- [Events in ASP.NET MVC PDF Viewer](../event#resourcesloaded) +- [Open PDF files](../open-pdf-files) +- [Save PDF files](../save-pdf-files) +- [Getting started](../getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md new file mode 100644 index 000000000..85968b982 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Extract Pages in ASP.NET MVC PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion ASP.NET MVC PDF Viewer control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Extract pages in ASP.NET MVC PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI. +The Extract Pages tool is available by default in Organize Pages. + +## Extract Pages in Organize Pages + +- Open the Organize Pages panel in the PDF Viewer toolbar. +- Locate and click the Extract Pages option. + +![Extract Pages](../images/extract-page.png) + +When selected, a secondary toolbar dedicated to extraction is displayed. + +![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png) + +## Extract pages using the UI + +You can extract by typing page numbers/ranges or by selecting thumbnails. + +1. Click Extract Pages in the Organize Pages panel. +2. In the input box, enter the pages to extract. Supported formats include: + - Single pages: 1,3,5 + - Ranges: 2-6 + - Combinations: 1,4,7-9 +3. Alternatively, select the page thumbnails you want instead of typing values. +4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool. + +![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png) + + N> Page numbers are 1-based (first page is 1). Invalid or out-of-range entries are ignored. + +## Extraction options (checkboxes) + +Two options appear in the secondary toolbar: + +- **Delete Pages After Extracting:** + - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. Ranges such as 2-4 export pages 2, 3, and 4 as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable Extract Pages + +Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`. + +Use the following code snippet to enable or disable the Extract Pages option: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new {canExtractPages = false}).Render() +
    +{% endhighlight %} +{% endtabs %} + +Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`. + +Use the following code snippet to remove the Extract Pages option: + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    +@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new {showExtractPagesOption = false}).Render() +
    +{% endhighlight %} +{% endtabs %} + +### Extract pages and load the result programmatically + +You can extract pages programmatically using the `extractPages` method. +The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    +@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new {CanExtractPages = true}).Render() +
    + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to) + +## See also + +- [Overview](../overview) +- [UI interactions](../ui-interactions) +- [Programmatic support](../programmatic-support) +- [Toolbar](../toolbar) +- [Events](../events) +- [Mobile view](../mobile-view) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/server-actions.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/server-actions.md index a6bd4d842..0dd4cd0ea 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/server-actions.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/server-actions.md @@ -4,11 +4,10 @@ title: Server actions for Syncfusion ASP.NET MVC PDF Viewer description: Review the ASP.NET MVC server actions used by the Syncfusion PDF Viewer to manage loading, caching, annotations, and document interactions. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- -# Server Actions +# Server Actions in ASP.NET MVC PDF Viewer Syncfusion® PDF Viewer is a client-server control that processes PDF documents on the server and sends incremental responses to the client for rendering and interaction. Ensure the ASP.NET MVC controller routes are registered, dependency injection supplies `IHostingEnvironment` and `IMemoryCache`, and caching is configured to persist page data between requests. Validate file paths and restrict inputs to trusted locations to avoid exposing sensitive files. @@ -382,7 +381,7 @@ The `jsonObjects` parameter represents the request payload sent by the PDF Viewe public string freeTextAnnotation { get; set; } public string signatureData { get; set; } public string fieldsData { get; set; } - public string FormDesigner { get; set; } + public string formDesigner { get; set; } public string inkSignatureData { get; set; } public string tileXCount { get; set; } public string tileYCount { get; set; } @@ -399,4 +398,4 @@ The `jsonObjects` parameter represents the request payload sent by the PDF Viewe public bool isAnnotationsExist { get; set; } public bool isFormFieldAnnotationsExist { get; set; } } -``` \ No newline at end of file +``` diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md b/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md new file mode 100644 index 000000000..9709dfcec --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md @@ -0,0 +1,648 @@ +--- +layout: post +title: Accessible PDF Reading in Blazor PDF Viewer | Syncfusion +description: Learn about accessible PDF reading in Blazor PDF Viewer using Microsoft Edge’s Screen Reader and Windows Speechdescription. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Accessible PDF Reading in Blazor PDF Viewer + +Accessible PDF reading lets users listen to PDF content using speech output. It improves usability for people who prefer audio interaction, need hands‑free review, or rely on screen readers. + +This accessible PDF reading feature supports two approaches: +1. Microsoft Edge’s Screen Reader +2. Windows Speech Synthesis API + +The following demo illustrates both supported approaches: +- [Blazor PDF Viewer example -Accessible PDF Reading]() + +## Microsoft Edge’s Screen Reader + +Use Microsoft Edge’s built-in Read Aloud to listen to the PDF content. + +- Open the sample document in Microsoft Edge. +- Click the **Read Aloud** icon in the Edge toolbar or press **Ctrl + Shift + U** to start reading the document aloud. +- To start from a specific page, navigate to that page and click anywhere; reading begins from the first readable text at that location. +- To read only selected text, select the sentence or portion of text you want, then use Read Aloud to read just that selection. + +**Step 1:** Create and add a JavaScript file to the app and reference it in the head element. + +```cshtml + + + + + +``` + +**Step 2:** Add the following code to the JavaScript `accessibility.js` file. + +{% tabs %} +{% highlight js tabtitle="accessibility.js" %} + +// Initialize PDF accessibility features and observe page changes +function initPdfAccessibility() { + const viewerInfo = getViewerInfo(); + if (!viewerInfo) return; + viewerInfo.container.querySelectorAll('.e-pv-page-div').forEach(wirePage); + const mutationObserver = new MutationObserver(mutations => { + mutations.forEach(mutation => { + mutation.addedNodes.forEach(node => { + if (node.nodeType !== 1) return; + if (node.matches && node.matches('.e-pv-page-div')) { + wirePage(node); + } else if (node.querySelectorAll) { + node.querySelectorAll('.e-pv-page-div').forEach(wirePage); + } + }); + }); + }); + mutationObserver.observe(viewerInfo.container, { childList: true, subtree: true }); +} + +// Get viewer container and ID +function getViewerInfo() { + const container = document.querySelector('.e-pv-viewer-container'); + if (!container) return null; + return { container, viewerId: container.id.replace('_viewerContainer', '') }; +} +// Insert hidden SR node for screen reader - Microsoft Reader +function insertSrNode(div) { + const pageNumber = (div.id.match(/pageDiv_(\d+)/)[1]); + const srId = `pdf_page_${pageNumber}_sr`; + let sr = document.getElementById(srId); + if (!sr) { + sr = Object.assign(document.createElement('div'), { id: srId, className: 'e-pv-radio-btn', tabIndex: -1 }); + div.appendChild(sr); + } + return sr; +} +// Select SR text for screen reader - Mircosoft Reader +function selectSrText(div) { + const sr = insertSrNode(div); + const selection = window.getSelection(); + const range = document.createRange(); + range.selectNodeContents(sr); + selection.removeAllRanges(); + selection.addRange(range); +} +// Move caret to first visible text node - Mircosoft Reader +function collapseCaretToVisibleText(div) { + const textLayer = div.querySelector('.e-pv-text-layer'); + if (textLayer) { + const selection = window.getSelection(); + const range = document.createRange(); + range.setStart(textLayer.firstChild, 0); + range.collapse(true); + selection.removeAllRanges(); + selection.addRange(range); + } +} +// Focus page for accessibility - Mircosoft Reader +function focusPageDiv(div) { + if (!div) return; + const textLayer = div.querySelector('.e-pv-text-layer'); + if (!textLayer || !textLayer.textContent.trim()) { + requestAnimationFrame(() => focusPageDiv(div)); + return; + } + const sr = insertSrNode(div); + sr.textContent = textLayer.textContent; + selectSrText(div); + collapseCaretToVisibleText(div); +} +// Wire accessibility handlers to page div - Mircosoft Reader +function wirePage(div) { + if (!div || div.hasAttribute('data-a11y-init')) return; + div.addEventListener('mousedown', () => focusPageDiv(div)); + div.addEventListener('click', () => focusPageDiv(div)); + div.setAttribute('data-a11y-init', 'true'); +} + +// Reader the selected text aloud - Mircosoft Reader + function readAloudText(text) { + window.speechSynthesis.cancel(); + const utterance = new SpeechSynthesisUtterance(text); + window.speechSynthesis.speak(utterance); +} + +// Cancel speech and remove highlights - Mircosoft Reader + function cancelReading() { + if (window.speechSynthesis?.speaking) { + window.speechSynthesis.cancel(); + } +} + +{% endhighlight %} +{% endtabs %} + +**Step 3:** Add the following code to the `Home.razor` + +{% tabs %} +{% highlight razor tabtitle="~/Home.razor" %} +@page "/" +@inject IJSRuntime JSRuntime + + + + + + + +@code +{ + // Reference to the PDF Viewer component + private SfPdfViewer2? PdfViewer; + + // Path to the PDF document to be loaded in the viewer + private string DocumentPath = "https://cdn.syncfusion.com/content/pdf/programmatical-annotations.pdf"; + + // Triggered when the document is unloaded from the viewer + private async Task OnDocumentUnloaded() + { + // Calls a JavaScript function to cancel any ongoing reading process + await JSRuntime.InvokeVoidAsync("cancelReading"); + } + + // Triggered when the document is loaded in the viewer + private async Task OnDocumentLoaded() + { + // Calls a JavaScript function to initialize PDF accessibility features + await JSRuntime.InvokeVoidAsync("initPdfAccessibility"); + } + + // Triggered when text selection ends in the PDF Viewer + private async Task HandleTextSelectionEnd(TextSelectionEndEventArgs args) + { + if (!string.IsNullOrEmpty(args.TextContent)) + { + await JSRuntime.InvokeVoidAsync("readAloudText", args.TextContent); + } + } +} +{% endhighlight %} +{% endtabs %} + +![Edge Screen Reader](./images/edge-screen-reader.png) + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Accessible/EdgeScreenReader) + +## Windows Speech Synthesis API + +Use the browser’s Windows Speech Synthesis API (speechSynthesis) to implement in-app Read Aloud functionality with custom controls. This approach: +- Provides playback controls, including Play and Pause/Resume. +- Reads content line by line and can continue across multiple pages. +- Reads only the selected text when a selection is made. +- Works on modern browsers and platforms that support the Speech Synthesis API. + +**Step 1:** Create and add a JavaScript file to the app and reference it in the head element. + +```cshtml + + + + + +``` + +**Step 2:** Add the following code to the JavaScript `accessibility.js` file. + +{% tabs %} +{% highlight js tabtitle="accessibility.js" %} +// Register .NET object for interop + function registerDotNetObject(dotNetObj) { + window.myDotNetObj = dotNetObj; +} +// Read selected text and highlight +function readSelectedText(args, zoomLevel, muteVoice) { + const viewerInfo = getViewerInfo(); + window.speechSynthesis.cancel(); + clearAllHighlights(); + const text = args.textContent; + const bounds = args.textBounds; + bounds.forEach(bound => { + const pageDiv = document.getElementById(`${viewerInfo.viewerId}_pageDiv_${bound.pageIndex - 1}`); + if (pageDiv) createHighlightBox(bound, pageDiv, zoomLevel); + }); + if (muteVoice) return; + requestAnimationFrame(() => { + speakText(text, clearAllHighlights); + }); +} +// Read a line from page and notify .NET +function readLineFromPage(pageIndex, lineIndex, isPrev, muteVoice) { + window.speechSynthesis.cancel(); + clearAllHighlights(); + const viewerInfo = getViewerInfo(); + if (!viewerInfo) return; + const pageDiv = document.getElementById(`${viewerInfo.viewerId}_pageDiv_${pageIndex}`); + if (!pageDiv) return; + function processLines() { + const linesArray = getLinesFromPage(pageIndex); + if (!linesArray || linesArray.length === 0) return; + let currentLineSpans; + if (lineIndex >= linesArray.length && linesArray.length > 0) { + window.myDotNetObj.invokeMethodAsync('GoNextPage'); + return; + } + if (lineIndex === -1) { + window.myDotNetObj.invokeMethodAsync('GoPreviousPage'); + return; + } + if (isPrev) { + currentLineSpans = linesArray[linesArray.length - 1]; + } else { + currentLineSpans = linesArray[lineIndex]; + } + addHighlightBox(currentLineSpans); + if (currentLineSpans && !muteVoice) { + const lineText = currentLineSpans.map(s => s.textContent).join(' '); + requestAnimationFrame(() => { + speakText(lineText, clearAllHighlights); + }); + } + } + // If spans already exist, process immediately + if (pageDiv.querySelector('.e-pv-text-layer span')) { + processLines(); + } else { + // Observe DOM changes until spans are added + const observer = new MutationObserver(() => { + if (pageDiv.querySelector('.e-pv-text-layer span')) { + observer.disconnect(); + processLines(); + } + }); + observer.observe(pageDiv, { childList: true, subtree: true }); + } +} +// Update the current line index value + function updateLineIndex(pageIndex) { + return new Promise(resolve => { + const viewerInfo = getViewerInfo(); + if (!viewerInfo) return resolve(0); + const pageDiv = document.getElementById(`${viewerInfo.viewerId}_pageDiv_${pageIndex}`); + if (!pageDiv) return resolve(0); + function checkSpanElement() { + const textLayer = pageDiv.querySelector('.e-pv-text-layer'); + if (textLayer && textLayer.querySelector('span')) { + const linesArray = getLinesFromPage(pageIndex); + resolve(linesArray.length); + return true; + } + return false; + } + if (!checkSpanElement()) { + const observer = new MutationObserver(() => { + if (checkSpanElement()) observer.disconnect(); + }); + observer.observe(pageDiv, { childList: true, subtree: true }); + } + }); +} +// Group spans into lines +function getLinesFromPage(pageIndex) { + const viewerInfo = getViewerInfo(); + if (!viewerInfo) return []; + const pageDiv = document.getElementById(`${viewerInfo.viewerId}_pageDiv_${pageIndex}`); + if (!pageDiv) return []; + const textLayer = pageDiv.querySelector('.e-pv-text-layer'); + if (!textLayer) return []; + const spans = Array.from(textLayer.querySelectorAll('span')); + if (spans.length === 0) return []; + const rotationStyle = getComputedStyle(spans[0]).transform; + let rotationAngle = 0; + if (rotationStyle && rotationStyle !== 'none') { + const [a, b] = rotationStyle.split('(')[1].split(')')[0].split(','); + rotationAngle = Math.round(Math.atan2(b, a) * (180 / Math.PI)); + if (rotationAngle < 0) rotationAngle += 360; + } + const linesMap = new Map(); + spans.forEach(span => { + const rect = span.getBoundingClientRect(); + const key = (rotationAngle === 90 || rotationAngle === 270) ? Math.round(rect.left) : Math.round(rect.top); + if (!linesMap.has(key)) linesMap.set(key, []); + linesMap.get(key).push(span); + }); + return Array.from(linesMap.values()).map(lineSpans => + lineSpans.sort((a, b) => { + const rectA = a.getBoundingClientRect(); + const rectB = b.getBoundingClientRect(); + return (rotationAngle === 90 || rotationAngle === 270) ? rectA.top - rectB.top : rectA.left - rectB.left; + }) + ); +} + +// Speak text with optional target voiceUri; on end, invoke callbacks and reset UI +function speakText(text, onEnd) { + if (!text || !text.trim()) text = "Warning. No readable text found."; + const utterance = new SpeechSynthesisUtterance(text); + utterance.onend = onEnd; + speechSynthesis.speak(utterance); +} +// Create highlight box for given bounds +function createHighlightBox(bound, pageDiv, zoomLevel) { + const box = document.createElement('div'); + Object.assign(box.style, { + position: 'absolute', + left: `${bound.left * zoomLevel}px`, + top: `${bound.top * zoomLevel}px`, + width: `${bound.width * zoomLevel}px`, + height: `${bound.height * zoomLevel}px`, + border: '2px solid rgba(0, 0, 0, 0.6)', + borderRadius: '4px', + pointerEvents: 'none' + }); + box.className = 'highlight-box-selected'; + // Store original bounds in data attributes + box.dataset.left = bound.left; + box.dataset.top = bound.top; + box.dataset.width = bound.width; + box.dataset.height = bound.height; + pageDiv.appendChild(box); +} +// Highlight spans for a line +function addHighlightBox(currentLineSpans) { + if (!currentLineSpans || currentLineSpans.length === 0) return; + scrollIntoViewIfNeeded(currentLineSpans[0]); + const rects = currentLineSpans.map(s => s.getBoundingClientRect()); + const minLeft = Math.min(...rects.map(r => r.left)); + const maxRight = Math.max(...rects.map(r => r.right)); + const minTop = Math.min(...rects.map(r => r.top)); + const maxBottom = Math.max(...rects.map(r => r.bottom)); + const pageDiv = currentLineSpans[0].closest('.e-pv-page-div'); + const pageRect = pageDiv.getBoundingClientRect(); + const highlightBox = document.createElement('div'); + Object.assign(highlightBox.style, { + position: 'absolute', + left: `${minLeft - pageRect.left}px`, + top: `${minTop - pageRect.top}px`, + width: `${maxRight - minLeft}px`, + height: `${maxBottom - minTop}px`, + border: '2px solid rgba(0, 0, 0, 0.6)', + borderRadius: '4px', + pointerEvents: 'none' + }); + highlightBox.className = 'highlight-box'; + pageDiv.appendChild(highlightBox); +} +// Update highlight dynamically while reading + function updateHighlightBox(pageIndex, lineIndex, zoomLevel) { + if (!window.speechSynthesis?.speaking) return; + // Check if line highlight exists + const lineHighlights = document.querySelectorAll('.highlight-box'); + const selectedHighlights = document.querySelectorAll('.highlight-box-selected'); + if (lineHighlights.length > 0) { + // Update line highlight without removing + clearLineHighlight(); + function tryUpdate() { + const linesArray = getLinesFromPage(pageIndex); + if (!linesArray || !linesArray[lineIndex]) { + setTimeout(tryUpdate, 0); + return; + } + addHighlightBox(linesArray[lineIndex]); + } + tryUpdate(); + } else if (selectedHighlights.length > 0) { + // Update selected-text highlights based on zoom + selectedHighlights.forEach(box => { + const left = parseFloat(box.dataset.left); + const top = parseFloat(box.dataset.top); + const width = parseFloat(box.dataset.width); + const height = parseFloat(box.dataset.height); + Object.assign(box.style, { + left: `${left * zoomLevel}px`, + top: `${top * zoomLevel}px`, + width: `${width * zoomLevel}px`, + height: `${height * zoomLevel}px` + }); + }); + } +} +// Get viewer container and ID +function getViewerInfo() { + const container = document.querySelector('.e-pv-viewer-container'); + if (!container) return null; + return { container, viewerId: container.id.replace('_viewerContainer', '') }; +} +// Scroll to the element +function scrollIntoViewIfNeeded(element) { + if (!element) return; + const viewerInfo = getViewerInfo(); + if (!viewerInfo) return; + const container = viewerInfo.container; + const containerRect = container.getBoundingClientRect(); + const elementRect = element.getBoundingClientRect(); + const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom; + if (!isVisible) { + element.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } +} +// For line level highlights +function clearLineHighlight() { + document.querySelectorAll('.highlight-box').forEach(box => box.remove()); +} +// For selected-text highlights +function clearSelectedHighlights() { + document.querySelectorAll('.highlight-box-selected').forEach(box => box.remove()); +} +// For clear all highlights +function clearAllHighlights() { + clearLineHighlight(); + clearSelectedHighlights(); +} + +// Pause or resume speech synthesis + function readAloudMute(isPaused) { + const speechSynth = window.speechSynthesis; + isPaused ? speechSynth.resume() : speechSynth.pause(); +} +// Cancel speech and remove highlights - Mircosoft Reader + function cancelReading() { + if (window.speechSynthesis?.speaking) { + window.speechSynthesis.cancel(); + clearAllHighlights(); + } +} + +{% endhighlight %} +{% endtabs %} + +**Step 3:** Add the following code to the `Home.razor` + +{% tabs %} +{% highlight razor tabtitle="~/Home.razor" %} +@page "/" +@using Syncfusion.Blazor.Buttons +@inject IJSRuntime JSRuntime + +Previous +Next +Mute + + + + + + +@code { + private DotNetObjectReference? objRef; + private SfPdfViewer2? PdfViewer; + private string DocumentPath = "https://cdn.syncfusion.com/content/pdf/programmatical-annotations.pdf"; + private bool muteVoice; + private int currentLineIndex = 0; + private bool IsPrevious = true; + private bool IsNext = true; + private bool ReadNextPage; + private bool ReadPreviousPage; + private int CurrentPage = 1; + + protected override void OnInitialized() + { + objRef = DotNetObjectReference.Create(this); + } + + // Called when PDF document is loaded + private async Task OnDocumentLoaded() + { + IsNext = false; + } + + // Register .NET object for JS interop after first render + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await JSRuntime.InvokeVoidAsync("registerDotNetObject", objRef); + } + } + + // Called when PDF document is unloaded + private async Task OnDocumentUnloaded() + { + await JSRuntime.InvokeVoidAsync("cancelReading"); + CurrentPage = 1; + currentLineIndex = 0; + IsPrevious = true; + } + + // Handles page change events + private async Task OnPageChanged() + { + if (ReadNextPage) + { + currentLineIndex = 0; + await NextLine(); + ReadNextPage = false; + } + else if (ReadPreviousPage) + { + await PreviousLine(true); + ReadPreviousPage = false; + } + } + + // Updates highlight box based on zoom and current line + private async Task UpdateElement() + { + double? ZoomValue = PdfViewer?.ZoomValue / 100.0; + await JSRuntime.InvokeVoidAsync("updateHighlightBox", PdfViewer?.CurrentPageNumber - 1, currentLineIndex - 1, ZoomValue); + } + + // Toggles mute/unmute for reading aloud + private async Task Mute() + { + await JSRuntime.InvokeVoidAsync("readAloudMute", muteVoice); + muteVoice = !muteVoice; + } + + // Reads the previous line or navigates to the previous page + private async Task PreviousLine(bool isPreviousPage = false) + { + if (PdfViewer != null && currentLineIndex > 0 || isPreviousPage) + { + if (CurrentPage != PdfViewer!.CurrentPageNumber && !ReadPreviousPage) + { + await PdfViewer.GoToPageAsync(CurrentPage); + } + else + { + CurrentPage = PdfViewer.CurrentPageNumber; + } + currentLineIndex--; + await JSRuntime.InvokeVoidAsync("readLineFromPage", CurrentPage - 1, currentLineIndex - 1, isPreviousPage, muteVoice); + if (isPreviousPage) + currentLineIndex = await JSRuntime.InvokeAsync("updateLineIndex", CurrentPage - 1); + IsPrevious = currentLineIndex < 1 && isPreviousPage; + IsNext = false; + } + } + // Reads the next line in the PDF + private async Task NextLine() + { + if (CurrentPage != PdfViewer!.CurrentPageNumber && !ReadNextPage) + { + await PdfViewer.GoToPageAsync(CurrentPage); + } + else + { + CurrentPage = PdfViewer.CurrentPageNumber; + } + currentLineIndex++; + await JSRuntime.InvokeVoidAsync("readLineFromPage", CurrentPage - 1, currentLineIndex - 1, false, muteVoice); + IsPrevious = currentLineIndex < 1; + IsNext = false; + } + + // Reads selected text aloud + private async Task OnTextSelectionEnd(TextSelectionEndEventArgs args) + { + double? ZoomValue = PdfViewer?.ZoomValue / 100.0; + await JSRuntime.InvokeVoidAsync("readSelectedText", args, ZoomValue, muteVoice); + } + + // Navigates to the next page + [JSInvokable] + public async Task GoNextPage() + { + if (PdfViewer!.CurrentPageNumber == PdfViewer.PageCount) + { + await PdfViewer.GoToFirstPageAsync(); + } + else + { + await PdfViewer.GoToNextPageAsync(); + } + ReadNextPage = true; + } + // Navigates to the previous page + [JSInvokable] + public async Task GoPreviousPage() + { + if (PdfViewer!.CurrentPageNumber == 1) + { + await PdfViewer.GoToLastPageAsync(); + } + else + { + await PdfViewer!.GoToPreviousPageAsync(); + } + ReadPreviousPage = true; + } + +} +{% endhighlight %} +{% endtabs %} + +![Windows Speech Synthesis](./images/windows-speech-synthesis.png) + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Accessible/WebSynthesis) + +## See also + +- [Blazor PDF Viewer example -Accessible PDF Reading]() diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md index fdae5ca89..e9eb6dde2 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md @@ -18,7 +18,7 @@ The SfPdfViewer component provides options to add, edit, and delete comments for * Text markup annotation * Free text annotation -![Comments in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-comments.png) +![Comments in Blazor SfPdfViewer](../images/blazor-pdfviewer-comments.png) ## Adding a comment to the annotation @@ -50,7 +50,7 @@ If the comment panel is already open, select an annotation and add a comment usi * The selected annotation’s comment container is highlighted in the comment panel. * Add a comment and any required replies using the comment panel. -![Adding Comments in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-add-new-comment.png) +![Adding Comments in Blazor SfPdfViewer](../images/blazor-pdfviewer-add-new-comment.png) ### Adding Comment Replies @@ -64,7 +64,7 @@ If the comment panel is already open, select an annotation and add a comment usi * Select Set status in the context menu. * Choose the required status for the annotation comment. -![Blazor PDFViewer with Comment Status](../../blazor-classic/images/blazor-pdfviewer-comment-status.png) +![Blazor PDFViewer with Comment Status](../images/blazor-pdfviewer-comment-status.png) ### Editing the comments and comments replies of the annotations @@ -95,7 +95,7 @@ Edit comments and replies in the following ways: * Choose the required status for the annotation comment. * Status 'None' is the default. Choosing 'None' removes the status indicator from the comment or reply. -![Editing Comment in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-comment-editing.png) +![Editing Comment in Blazor SfPdfViewer](../images/blazor-pdfviewer-comment-editing.png) ### Delete Comment or Comment Replies @@ -103,7 +103,7 @@ Edit comments and replies in the following ways: * Click the More options button in the comment or reply container. * Select Delete in the context menu. -![Deleting Comment in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-delete-comments.png) +![Deleting Comment in Blazor SfPdfViewer](../images/blazor-pdfviewer-delete-comments.png) N> Deleting the root comment from the comment panel also deletes the associated annotation. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/free-text-annotation.md index f8b9fbd2c..056a1b3a0 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/free-text-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/free-text-annotation.md @@ -21,7 +21,7 @@ Free text annotations can be added using the annotation toolbar. When Free Text Annotation mode is enabled from Pan, the viewer automatically switches to Text Select mode. -![Free Text Annotation in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-free-text-annotation.png) +![Free Text Annotation in Blazor SfPdfViewer](../images/blazor-pdfviewer-free-text-annotation.png) ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md index 04f50b0d5..0a8a21497 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md @@ -18,12 +18,12 @@ The SfPdfViewer component supports importing and exporting annotations as a JSON * The annotation toolbar appears. * Select Comment Panel in the annotation toolbar. -![Comment panel button shown in the annotation toolbar of SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-edit-sticknotes-comment.png) +![Comment panel button shown in the annotation toolbar of SfPdfViewer](../images/blazor-pdfviewer-edit-sticknotes-comment.png) * The comment panel is displayed. * Select **More Option** in the comment panel container. -![More options menu opened in the comment panel of SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-show-more-option.png) +![More options menu opened in the comment panel of SfPdfViewer](../images/blazor-pdfviewer-show-more-option.png) ## Importing annotation to the PDF document @@ -34,11 +34,11 @@ The SfPdfViewer component supports importing and exporting annotations as a JSON * Select **More Option** in the comment panel container. * Choose Import Annotations. -![Import annotations option selected in the comment panel of SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-import-annotation.png) +![Import annotations option selected in the comment panel of SfPdfViewer](../images/blazor-pdfviewer-import-annotation.png) * A file explorer dialog opens. Choose the JSON file to import into the loaded PDF document. -![PDF document in SfPdfViewer after annotations have been imported from JSON](../../blazor-classic/images/blazor-pdfviewer-imported-annotation.png) +![PDF document in SfPdfViewer after annotations have been imported from JSON](../images/blazor-pdfviewer-imported-annotation.png) ## Importing annotation using SfPdfViewer API @@ -93,7 +93,7 @@ The SfPdfViewer component supports exporting annotations as a JSON file or JSON * Select **More Option** in the comments panel container. * Choose Export Annotations. -![Export annotations option selected in the comments panel of SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-export-annotation.png) +![Export annotations option selected in the comments panel of SfPdfViewer](../images/blazor-pdfviewer-export-annotation.png) N> The Export Annotations option is disabled when the loaded PDF document does not contain any annotations. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md index d0d8eb3b7..d18c5dcd7 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md @@ -11,7 +11,7 @@ documentation: ug The Blazor SfPdfViewer component supports adding, editing, and deleting ink annotations. -![Ink annotation toolbar in Blazor PDF Viewer](../../blazor-classic/images/ink_annotation.png) +![Ink annotation toolbar in Blazor PDF Viewer](../images/ink_annotation.png) ## Adding an ink annotation to the PDF document @@ -21,7 +21,7 @@ Ink annotations can be added using the annotation toolbar. * Choose the **Draw Ink** button to enable ink mode. * Draw on any page of the loaded PDF document. -![Draw ink tool in annotation toolbar](../../blazor-classic/images/ink_tool.png) +![Draw ink tool in annotation toolbar](../images/ink_tool.png) ```cshtml @using Syncfusion.Blazor.Buttons @@ -49,19 +49,19 @@ The stroke color, thickness, and opacity of an ink annotation can be modified us Change the stroke color using the color palette available in the Edit Stroke Color tool. -![Change stroke color of ink annotation](../../blazor-classic/images/ink_strokecolor.png) +![Change stroke color of ink annotation](../images/ink_strokecolor.png) ### Editing thickness Adjust the border thickness using the range slider in the Edit Thickness tool. -![Change thickness of ink annotation](../../blazor-classic/images/ink_thickness.png) +![Change thickness of ink annotation](../images/ink_thickness.png) ### Editing opacity Control the transparency using the range slider in the Edit Opacity tool. -![Change opacity of ink annotation](../../blazor-classic/images/ink_opacity.png) +![Change opacity of ink annotation](../images/ink_opacity.png) ## Setting default properties during the control initialization diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md index 442256e72..7ee13844f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md @@ -17,7 +17,7 @@ The SfPdfViewer provides options to add and work with measurement annotations. U * Radius * Volume -![Calibrate Annotation in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-calibrate-annotation.png) +![Calibrate Annotation in Blazor SfPdfViewer](../images/blazor-pdfviewer-calibrate-annotation.png) ## Adding measurement annotations to the PDF document @@ -30,7 +30,7 @@ Measurement annotations can be added using the annotation toolbar. When a measurement mode is enabled while in Pan mode, the SfPdfViewer switches to Text Select mode. -![Adding Calibrate in Blazor SfPdfViewer Toolbar](../../blazor-classic/images/blazor-pdfviewer-add-calibrate-in-toolbar.png) +![Adding Calibrate in Blazor SfPdfViewer Toolbar](../images/blazor-pdfviewer-add-calibrate-in-toolbar.png) ```cshtml @@ -65,31 +65,31 @@ The fill color, stroke color, thickness, and opacity of a measurement annotation Edit the fill color of the annotation using the color palette in the Edit Color tool. -![Editing Calibrate FillColor in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-calibrate-fillcolor.png) +![Editing Calibrate FillColor in Blazor SfPdfViewer](../images/blazor-pdfviewer-calibrate-fillcolor.png) ### Editing stroke color Edit the stroke color of the annotation using the color palette in the Edit Stroke Color tool. -![Editing Calibrate StrokeColor in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-calibrate-stroke-color.png) +![Editing Calibrate StrokeColor in Blazor SfPdfViewer](../images/blazor-pdfviewer-calibrate-stroke-color.png) ### Editing thickness Edit the border thickness of the annotation using the range slider in the Edit Thickness tool. -![Editing Calibrate Thickness in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-calibrate-thickness.png) +![Editing Calibrate Thickness in Blazor SfPdfViewer](../images/blazor-pdfviewer-calibrate-thickness.png) ### Editing opacity Edit the opacity of the annotation using the range slider in the Edit Opacity tool. -![Editing Calibrate Opacity in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-calibrate-opacity.png) +![Editing Calibrate Opacity in Blazor SfPdfViewer](../images/blazor-pdfviewer-calibrate-opacity.png) ### Editing the line properties The properties of line-based annotations such as Distance and Perimeter can be edited using the Line Properties window. Open it by selecting the Properties option from the context menu when right-clicking a distance or perimeter annotation. -![Editing Calibrate Property in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-calibrate-property.png) +![Editing Calibrate Property in Blazor SfPdfViewer](../images/blazor-pdfviewer-calibrate-property.png) ## Setting default properties during control initialization @@ -154,7 +154,7 @@ Set default properties for measurement annotations before initializing the contr Modify the scale ratio and unit of measurement using the Scale Ratio option in the context menu of the SfPdfViewer. -![Editing Calibrate Scale Ratio in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-calibrate-scaleratio.png) +![Editing Calibrate Scale Ratio in Blazor SfPdfViewer](../images/blazor-pdfviewer-calibrate-scaleratio.png) The supported units of measurement for measurement annotations are: @@ -165,7 +165,7 @@ The supported units of measurement for measurement annotations are: * Pica * Feet -![Calibrate Scale Dialog in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-calibrate-scale-dialog.png) +![Calibrate Scale Dialog in Blazor SfPdfViewer](../images/blazor-pdfviewer-calibrate-scale-dialog.png) ## Setting default scale ratio settings during control initialization diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md index 41c424407..f841b2833 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md @@ -17,7 +17,7 @@ The Blazor SfPdfViewer supports adding, editing, and deleting shape annotations. * Circle * Polygon -![Shape annotations in the Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-shape-annotation.png) +![Shape annotations in the Blazor SfPdfViewer](../images/blazor-pdfviewer-shape-annotation.png) ## Adding a shape annotation to the PDF document @@ -30,7 +30,7 @@ Shape annotations can be added from the annotation toolbar. When the viewer is in pan mode and a shape drawing mode is activated, the control switches to text selection mode to enable drawing. -![Adding shape annotations in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-add-shape-in-toolbar.png) +![Adding shape annotations in Blazor SfPdfViewer](../images/blazor-pdfviewer-add-shape-in-toolbar.png) ```cshtml @@ -64,31 +64,31 @@ The annotation toolbar provides tools to modify fill color, stroke color, thickn Use the Edit Color tool to change the annotation’s fill color via the color palette. -![Editing fill color in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-edit-fill-color.png) +![Editing fill color in Blazor SfPdfViewer](../images/blazor-pdfviewer-edit-fill-color.png) ### Editing stroke color Use the Edit Stroke Color tool to change the border color via the color palette. -![Editing stroke color in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-edit-shape-stroke-color.png) +![Editing stroke color in Blazor SfPdfViewer](../images/blazor-pdfviewer-edit-shape-stroke-color.png) ### Editing thickness Use the Edit Thickness tool to adjust the border thickness with the range slider. -![Editing shape border thickness in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-shape-thickness.png) +![Editing shape border thickness in Blazor SfPdfViewer](../images/blazor-pdfviewer-shape-thickness.png) ### Editing opacity Use the Edit Opacity tool to modify transparency with the range slider. -![Editing shape opacity in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-shape-opacity.png) +![Editing shape opacity in Blazor SfPdfViewer](../images/blazor-pdfviewer-shape-opacity.png) ### Editing the line properties Properties for line-based shapes (Line and Arrow) can be adjusted in the Line Properties dialog. Open it by choosing Properties from the context menu after right-clicking a line or arrow annotation. -![Editing line and arrow properties in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-edit-line-property.png) +![Editing line and arrow properties in Blazor SfPdfViewer](../images/blazor-pdfviewer-edit-line-property.png) ## Setting default properties during control initialization @@ -184,7 +184,7 @@ The appearance of an annotation’s selector can be customized using [Annotation ``` -![Customized selector in Blazor SfPdfViewer](../../blazor-classic/images/customselector.png) +![Customized selector in Blazor SfPdfViewer](../images/customselector.png) [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Selector/Customize%20Annotation%20%20Selector). diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md index e39562d19..e3ddcd163 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/stamp-annotation.md @@ -16,7 +16,7 @@ The SfPdfViewer component provides options to add, edit, delete, and rotate the * Standard business stamp * Custom stamp -![Stamp annotations displayed in the Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-stamp-annotation.png) +![Stamp annotations displayed in the Blazor SfPdfViewer](../images/blazor-pdfviewer-stamp-annotation.png) ## Adding stamp annotations to the PDF document @@ -25,11 +25,11 @@ Stamp annotations can be added using the annotation toolbar. * Click the **Edit Annotation** button in the SfPdfViewer toolbar. A toolbar appears below it. * Click the **Stamp Annotation** dropdown button. A dropdown appears showing the available stamp types. -![Adding Stamp in Blazor SfPdfViewer Toolbar](../../blazor-classic/images/blazor-pdfviewer-add-stamp-in-toolbar.png) +![Adding Stamp in Blazor SfPdfViewer Toolbar](../images/blazor-pdfviewer-add-stamp-in-toolbar.png) * Select the required stamp type from the dropdown to add it to the page. -![Selecting Annotation from Stamp Popup in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-select-stamp-annotation.png) +![Selecting Annotation from Stamp Popup in Blazor SfPdfViewer](../images/blazor-pdfviewer-select-stamp-annotation.png) * Place the annotation on the desired page in the PDF document. @@ -41,7 +41,7 @@ When entering stamp mode while in pan mode, the SfPdfViewer automatically switch * Click the **Stamp Annotation** dropdown button. A dropdown appears showing the available options. * Click the **Custom Stamp** button. -![Custom stamp picker in the Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-custom-stamp.png) +![Custom stamp picker in the Blazor SfPdfViewer](../images/blazor-pdfviewer-custom-stamp.png) * In the file explorer dialog, choose an image to add as a stamp on the PDF page. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/sticky-notes-annotation.md index 4134afdfb..cd69273b6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/sticky-notes-annotation.md @@ -11,7 +11,7 @@ documentation: ug The SfPdfViewer control provides options to add, edit, and delete sticky notes annotations in a PDF document. -![StickyNotes Annotation in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-stickynotes-annotation.png) +![StickyNotes Annotation in Blazor SfPdfViewer](../images/blazor-pdfviewer-stickynotes-annotation.png) ## Adding a sticky note annotation to the PDF document @@ -21,7 +21,7 @@ Sticky notes annotations can be added using the annotation toolbar. * Click the location on the page where the sticky note annotation should appear. * The sticky note annotation is added at the clicked position. -![Adding StickyNotes in Blazor SfPdfViewer Toolbar](../../blazor-classic/images/blazor-pdfviewer-add-stickynotes-in-toolbar.png) +![Adding StickyNotes in Blazor SfPdfViewer Toolbar](../images/blazor-pdfviewer-add-stickynotes-in-toolbar.png) Annotation comments can be added using the Comment panel. @@ -29,7 +29,7 @@ Annotation comments can be added using the Comment panel. * Select the Comment option from the context menu. * Use the Comment panel to add Comments, Reply, and Status. -![Blazor SfPdfViewer with StickyNotes Comment](../../blazor-classic/images/blazor-pdfviewer-stickynotes-comment.png) +![Blazor SfPdfViewer with StickyNotes Comment](../images/blazor-pdfviewer-stickynotes-comment.png) ## Editing the properties of the sticky note annotation @@ -37,7 +37,7 @@ Annotation comments can be added using the Comment panel. Adjust the annotation opacity using the range slider in the Edit Opacity tool. -![StickyNotes Opacity in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-stickynotes-opacity.png) +![StickyNotes Opacity in Blazor SfPdfViewer](../images/blazor-pdfviewer-stickynotes-opacity.png) ### Editing comments @@ -45,11 +45,11 @@ The comment, comment reply, and comment status of the annotation can be edited u - Open the Comment panel using the Comment Panel button in the annotation toolbar. -![Editing StickyNotes Comment in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-edit-sticknotes-comment.png) +![Editing StickyNotes Comment in Blazor SfPdfViewer](../images/blazor-pdfviewer-edit-sticknotes-comment.png) Use the menu in the Comment panel to modify or delete comments, replies, and their status. -![StickyNotes Editing in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-editing-stickynotes.png) +![StickyNotes Editing in Blazor SfPdfViewer](../images/blazor-pdfviewer-editing-stickynotes.png) ## Setting default properties during control initialization diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/text-markup-annotation.md index b60e6f246..71be550b7 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/text-markup-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/text-markup-annotation.md @@ -35,7 +35,7 @@ There are two ways to highlight text in a PDF document. * Select the text to add the highlight annotation. * Alternatively, select the text first and then click **Highlight** to apply it. -![Highlighted text in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-highlight-text.png) +![Highlighted text in Blazor SfPdfViewer](../images/blazor-pdfviewer-highlight-text.png) In pan mode, entering highlight mode switches the viewer to text select mode to enable text selection for highlighting. @@ -81,7 +81,7 @@ There are two ways to underline text in a PDF document. * Select the text to add the underline annotation. * Alternatively, select the text first and then click **Underline** to apply it. -![Underlined text in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-underline-text.png) +![Underlined text in Blazor SfPdfViewer](../images/blazor-pdfviewer-underline-text.png) In pan mode, entering underline mode switches the viewer to text select mode to enable text selection for underlining. @@ -127,7 +127,7 @@ Using the context menu. * Select the text to add the strikethrough annotation. * Alternatively, select the text first and then click **Strikethrough** to apply it. -![Strikethrough text in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-strike-through-text.png) +![Strikethrough text in Blazor SfPdfViewer](../images/blazor-pdfviewer-strike-through-text.png) In pan mode, entering strikethrough mode switches the viewer to text select mode to enable text selection for striking through. @@ -208,13 +208,13 @@ The color and opacity of a text markup annotation can be changed using the **Edi Change the annotation color using the color palette in the **Edit Color** tool. -![Editing text markup color in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-editing-text-color.png) +![Editing text markup color in Blazor SfPdfViewer](../images/blazor-pdfviewer-editing-text-color.png) ### Editing opacity Change the annotation opacity using the range slider in the **Edit Opacity** tool. -![Editing text markup opacity in Blazor SfPdfViewer](../../blazor-classic/images/blazor-pdfviewer-edit-text-opacity.png) +![Editing text markup opacity in Blazor SfPdfViewer](../images/blazor-pdfviewer-edit-text-opacity.png) ## Text markup annotation settings diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md index ba72afe9c..53c53099b 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-change-the-highlighted-color-of-the-text.md @@ -35,6 +35,6 @@ The following code illustrates how to change the highlight color of the text. } ``` -![Highlighted text in Blazor PDF Viewer](../../blazor-classic/images/highlighttext.png) +![Highlighted text in Blazor PDF Viewer](../images/highlighttext.png) [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Text%20Markup/Customize%20highlight%20annotation). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md index 3245e828e..e91770bd4 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md @@ -21,7 +21,7 @@ The form fields displayed in the SfPdfViewer are: * Signature field * List box -![Form filling in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-form-filling.png) +![Form filling in Blazor SfPdfViewer](images/blazor-pdfviewer-form-filling.png) ## Disabling form fields @@ -48,21 +48,21 @@ 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. -![Signature field in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-signature-field.png) +![Signature field in Blazor SfPdfViewer](images/blazor-pdfviewer-signature-field.png) * Draw the signature in the signature panel. -![Displaying signature panel in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-signature-panel.png) +![Displaying signature panel in Blazor SfPdfViewer](images/blazor-pdfviewer-signature-panel.png) * Click the **CREATE** button. The drawn signature is added to the signature field. -![Displaying signature in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-signature.png) +![Displaying signature in Blazor SfPdfViewer](images/blazor-pdfviewer-signature.png) ## Delete the signature inside the signature field Delete a signature placed in a signature field by using the Delete option in the annotation toolbar. -![Deleting signature in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-delete-signature.png) +![Deleting signature in Blazor SfPdfViewer](images/blazor-pdfviewer-delete-signature.png) ## Export and import form fields diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md index 80aaa1ade..10439651e 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md @@ -18,15 +18,15 @@ Add a handwritten signature using the annotation toolbar. * Click the **Edit Annotation** in the SfPdfViewer toolbar to open the annotation toolbar. * Select the **HandWritten Signature** tool to open the signature panel. -![Handwritten signature option in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-handwritten-sign.png) +![Handwritten signature option in Blazor SfPdfViewer](images/blazor-pdfviewer-handwritten-sign.png) * Draw the signature in the signature panel using a mouse, or touch. -![Signature panel displayed in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-sign-panel.png) +![Signature panel displayed in Blazor SfPdfViewer](images/blazor-pdfviewer-sign-panel.png) * Click **Create**, then move and place the signature at the desired location on the page. -![Placing a handwritten signature in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-adding-signature.png) +![Placing a handwritten signature in Blazor SfPdfViewer](images/blazor-pdfviewer-adding-signature.png) The added signature becomes part of the PDF annotations and is preserved when saving or exporting the document. @@ -34,7 +34,7 @@ The added signature becomes part of the PDF annotations and is preserved when sa The stroke color, thickness, and opacity of a handwritten signature can be adjusted using the annotation toolbar’s edit stroke color tool, edit thickness tool, and edit opacity tools. Select the signature on the page to enable these property editors for that item. After placement, the signature can also be moved, resized, or removed like other annotations. -![Editing handwritten signature properties in Blazor SfPdfViewer](../blazor-classic/images/blazor-pdfviewer-signature-properties.png) +![Editing handwritten signature properties in Blazor SfPdfViewer](images/blazor-pdfviewer-signature-properties.png) ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-annotation-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-annotation-toolbar.png index 8af0dbbed..6914adc59 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-annotation-toolbar.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-annotation-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-calibrate-in-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-calibrate-in-toolbar.png new file mode 100644 index 000000000..90abcf2cd Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-calibrate-in-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-new-comment.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-new-comment.png new file mode 100644 index 000000000..3d744d3a1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-new-comment.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-shape-in-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-shape-in-toolbar.png new file mode 100644 index 000000000..4bcd25ef3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-shape-in-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-stamp-in-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-stamp-in-toolbar.png new file mode 100644 index 000000000..e393128af Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-stamp-in-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-stickynotes-in-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-stickynotes-in-toolbar.png new file mode 100644 index 000000000..c6146b498 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-add-stickynotes-in-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-adding-signature.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-adding-signature.png new file mode 100644 index 000000000..c81f9c560 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-adding-signature.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-annotation.png new file mode 100644 index 000000000..05efe849c Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-fillcolor.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-fillcolor.png new file mode 100644 index 000000000..897bd9e82 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-fillcolor.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-opacity.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-opacity.png new file mode 100644 index 000000000..94ce8cf61 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-opacity.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-property.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-property.png new file mode 100644 index 000000000..cf85e8e67 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-property.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-scale-dialog.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-scale-dialog.png new file mode 100644 index 000000000..11bb5c771 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-scale-dialog.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-scaleratio.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-scaleratio.png new file mode 100644 index 000000000..9ebe996a6 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-scaleratio.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-stroke-color.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-stroke-color.png new file mode 100644 index 000000000..0a95bd7bf Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-stroke-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-thickness.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-thickness.png new file mode 100644 index 000000000..dcb495e71 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-calibrate-thickness.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comment-editing.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comment-editing.png new file mode 100644 index 000000000..215ad752c Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comment-editing.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comment-status.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comment-status.png new file mode 100644 index 000000000..fe1d2a929 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comment-status.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comments.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comments.png new file mode 100644 index 000000000..5538d78f9 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-comments.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-custom-stamp.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-custom-stamp.png new file mode 100644 index 000000000..49ddc3709 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-custom-stamp.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-delete-comments.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-delete-comments.png new file mode 100644 index 000000000..cd666a41d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-delete-comments.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-delete-signature.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-delete-signature.png new file mode 100644 index 000000000..63c3dfc59 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-delete-signature.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-fill-color.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-fill-color.png new file mode 100644 index 000000000..71ba2db68 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-line-property.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-line-property.png new file mode 100644 index 000000000..ba2de2a46 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-line-property.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-shape-stroke-color.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-shape-stroke-color.png new file mode 100644 index 000000000..a0e2ec77c Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-shape-stroke-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-sticknotes-comment.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-sticknotes-comment.png new file mode 100644 index 000000000..9826b3f4f Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-sticknotes-comment.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-text-opacity.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-text-opacity.png new file mode 100644 index 000000000..b14f42dd3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-edit-text-opacity.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-editing-stickynotes.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-editing-stickynotes.png new file mode 100644 index 000000000..02e36d1bd Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-editing-stickynotes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-editing-text-color.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-editing-text-color.png new file mode 100644 index 000000000..eaada3ecd Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-editing-text-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-export-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-export-annotation.png new file mode 100644 index 000000000..c3dbda5d0 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-export-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-form-filling.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-form-filling.png new file mode 100644 index 000000000..05140861c Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-form-filling.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-free-text-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-free-text-annotation.png new file mode 100644 index 000000000..b59ffd600 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-free-text-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-handwritten-sign.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-handwritten-sign.png new file mode 100644 index 000000000..2bb7ea795 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-handwritten-sign.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-highlight-text.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-highlight-text.png new file mode 100644 index 000000000..6a8379377 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-highlight-text.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-import-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-import-annotation.png new file mode 100644 index 000000000..4a8dd50ad Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-import-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-imported-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-imported-annotation.png new file mode 100644 index 000000000..4362e996e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-imported-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-select-stamp-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-select-stamp-annotation.png new file mode 100644 index 000000000..d4136834f Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-select-stamp-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-annotation.png new file mode 100644 index 000000000..6b7fa10a5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-opacity.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-opacity.png new file mode 100644 index 000000000..ede3c9f5a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-opacity.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-thickness.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-thickness.png new file mode 100644 index 000000000..c255d33bb Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-shape-thickness.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-show-more-option.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-show-more-option.png new file mode 100644 index 000000000..f3db68ab7 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-show-more-option.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-sign-panel.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-sign-panel.png new file mode 100644 index 000000000..aab119915 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-sign-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-field.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-field.png new file mode 100644 index 000000000..74edaa96b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-field.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-panel.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-panel.png new file mode 100644 index 000000000..daee80db4 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-properties.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-properties.png new file mode 100644 index 000000000..25cbcb52a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature-properties.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature.png new file mode 100644 index 000000000..6a220fda1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-signature.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-squiggly-text.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-squiggly-text.png index 5f687a388..ea1323a42 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-squiggly-text.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-squiggly-text.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stamp-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stamp-annotation.png new file mode 100644 index 000000000..233434d98 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stamp-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-annotation.png new file mode 100644 index 000000000..40f760bc7 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-comment.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-comment.png new file mode 100644 index 000000000..ca079aa12 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-comment.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-opacity.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-opacity.png new file mode 100644 index 000000000..fc6d3844a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-stickynotes-opacity.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-strike-through-text.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-strike-through-text.png new file mode 100644 index 000000000..90b339cda Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-strike-through-text.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-underline-text.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-underline-text.png new file mode 100644 index 000000000..907d6a5c4 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-pdfviewer-underline-text.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-add-comment-reply-comment.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-add-comment-reply-comment.png index e9b0c5f9e..6d968f2de 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-add-comment-reply-comment.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-add-comment-reply-comment.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-add-stamp-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-add-stamp-annotation.png index 70fbabb62..635f93441 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-add-stamp-annotation.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-add-stamp-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-edit-comment-reply-comment.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-edit-comment-reply-comment.png index eb957ea3f..c17395edf 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-edit-comment-reply-comment.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-edit-comment-reply-comment.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-edit-stamp-annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-edit-stamp-annotation.png index 8d03b6525..bd5a70126 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-edit-stamp-annotation.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-sfpdfviewer-programmatically-edit-stamp-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/customized_templated_stamp_appearance.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/customized_templated_stamp_appearance.png index ead3feee2..802ef6367 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/customized_templated_stamp_appearance.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/customized_templated_stamp_appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/customizing_datetime_format.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/customizing_datetime_format.png index 278d6e057..0ff2b1f63 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/customizing_datetime_format.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/customizing_datetime_format.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/customselector.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/customselector.png new file mode 100644 index 000000000..dfe461b0e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/customselector.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/edge-screen-reader.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/edge-screen-reader.png new file mode 100644 index 000000000..a4b5b2853 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/edge-screen-reader.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/enabling_multiline_support.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/enabling_multiline_support.png index fce0d5eaf..496596a41 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/enabling_multiline_support.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/enabling_multiline_support.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/highlighttext.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/highlighttext.png new file mode 100644 index 000000000..2027aff88 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/highlighttext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_annotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_annotation.png new file mode 100644 index 000000000..5d053a47f Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_opacity.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_opacity.png new file mode 100644 index 000000000..fc75d3076 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_opacity.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_strokecolor.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_strokecolor.png new file mode 100644 index 000000000..6cd4bb2e5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_strokecolor.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_thickness.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_thickness.png new file mode 100644 index 000000000..c82f8e312 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_thickness.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_tool.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_tool.png new file mode 100644 index 000000000..6779498b4 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/ink_tool.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/rotation_support_for_customized_templated_stamps.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/rotation_support_for_customized_templated_stamps.png index fb2838b5f..dd1fdc8ed 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/images/rotation_support_for_customized_templated_stamps.png and b/Document-Processing/PDF/PDF-Viewer/blazor/images/rotation_support_for_customized_templated_stamps.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/windows-speech-synthesis.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/windows-speech-synthesis.png new file mode 100644 index 000000000..95fb4139c Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/windows-speech-synthesis.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md new file mode 100644 index 000000000..26ca31634 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/events.md @@ -0,0 +1,109 @@ +--- +layout: post +title: Organize Pages Events in Blazor PDF Viewer | Syncfusion +description: Learn how to organize pages Events in the Blazor PDF Viewer, including rotating, rearranging, inserting, deleting, and copying pages. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Organize Pages Events in Blazor PDF Viewer + +The PDF Viewer provides events to track and respond to actions within the page organizer, allowing for the customization of page manipulation features. + +|Name|Description| +|---|---| +|PageOrganizerSaveRequested|Triggers when a save action is performed in the page organizer.| +|PageOrganizerZoomChanged|Triggers when the zoom level of the page organizer is changed.| +|PageOrganizerVisibilityChanged|Triggers when the page organizer dialog visibility is changed.| + +## PageOrganizerSaveRequested Event + +The `PageOrganizerSaveRequested` event is triggered when a save action is performed in the page organizer. + +- Occurs when the **Save as** button in the page organizer toolbar is clicked after modifying the document structure. + +The event arguments provide the necessary information about the save event: + +- `FileName`: The name of the currently loaded PDF document. +- `DownloadDocument`: A base64 string of the modified PDF document data. +- `Cancel`: A boolean that, when set to `true`, prevents the default save action from proceeding. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +@code { + private void SavePages(PageOrganizerSaveEventArgs args) { + Console.WriteLine("Saved File Name : " + args.FileName.ToString()); + } +} + +{% endhighlight %} +{% endtabs %} + +## PageOrganizerZoomChanged Event + +The `PageOrganizerZoomChanged` event is triggered when the zoom level of the page organizer is changed. + +- This event is fired when the user interacts with the zoom slider in the page organizer. The `ShowImageZoomingSlider` property in `PageOrganizerSettings` must be set to `true` for the slider to be visible. + +Event arguments: + +- `PreviousZoom`: The previous zoom value. +- `CurrentZoom`: The current zoom value. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +@code { + private void ZoomChange(PageOrganizerZoomChangedEventArgs args) { + Console.WriteLine("Current Zoom : " + args.CurrentZoom); + } +} + +{% endhighlight %} +{% endtabs %} + +## PageOrganizerVisibilityChanged Event + +The `PageOrganizerVisibilityChanged` event is triggered when the page organizer dialog visibility is changed. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + +@code { + private void VisibleChanged(bool isVisible) { + Console.WriteLine("Organize Dialog Visibility : " + isVisible.ToString()); + } +} + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer/Page-Organizer-Events) + +## See also + +- Overall Viewer events: [Event](../events) +- Annotation events: [Annotation events](../annotation/events) +- Form designer events: [Form field events](../form-designer/events) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Drag_and_Drop.gif b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Drag_and_Drop.gif new file mode 100644 index 000000000..5c5793e9f Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Drag_and_Drop.gif differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Duplicate_Pages.gif b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Duplicate_Pages.gif new file mode 100644 index 000000000..4366ca352 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Duplicate_Pages.gif differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Extract_Pages.gif b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Extract_Pages.gif new file mode 100644 index 000000000..34b5597b8 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Extract_Pages.gif differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Import_Pages.gif b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Import_Pages.gif new file mode 100644 index 000000000..8636b5a39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Import_Pages.gif differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Insert_Pages.gif b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Insert_Pages.gif new file mode 100644 index 000000000..b4e5655b7 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/Insert_Pages.gif differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-copy-disable.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-copy-disable.png new file mode 100644 index 000000000..692f66152 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-copy-disable.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-copy-page.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-copy-page.png new file mode 100644 index 000000000..fd2b5ee2e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-copy-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-delete-disable.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-delete-disable.png new file mode 100644 index 000000000..8a043fe53 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-delete-disable.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-extract-disable.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-extract-disable.png new file mode 100644 index 000000000..d00eab088 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-extract-disable.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-import-disable.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-import-disable.png new file mode 100644 index 000000000..7afeaf616 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-import-disable.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-disable.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-disable.png new file mode 100644 index 000000000..cd8982ebd Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-disable.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-left.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-left.png new file mode 100644 index 000000000..142563e80 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-left.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-right.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-right.png new file mode 100644 index 000000000..d6a035854 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-insert-right.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-mobile-options.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-mobile-options.png new file mode 100644 index 000000000..ab408ec80 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-mobile-options.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-mobile-view.png new file mode 100644 index 000000000..0edd85110 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-mobile-view.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-pages.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-pages.png new file mode 100644 index 000000000..9357047fa Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-pages.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-disable.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-disable.png new file mode 100644 index 000000000..2a5d4701e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-disable.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-left.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-left.png new file mode 100644 index 000000000..6c26315d0 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-left.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-right.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-right.png new file mode 100644 index 000000000..ade49a4b5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-rotate-right.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-select-all.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-select-all.png new file mode 100644 index 000000000..1c2bc86c5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-select-all.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-select-delete.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-select-delete.png new file mode 100644 index 000000000..8c6f58be8 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-select-delete.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-delete.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-delete.png new file mode 100644 index 000000000..a4382b619 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-delete.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-extract-page.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-extract-page.png new file mode 100644 index 000000000..db8848a97 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-import-page.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-import-page.png new file mode 100644 index 000000000..39c70bb4b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-import-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-redo.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-redo.png new file mode 100644 index 000000000..2b5c279e5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-redo.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-rotate-left.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-rotate-left.png new file mode 100644 index 000000000..3dbd43b93 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-rotate-left.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-rotate-right.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-rotate-right.png new file mode 100644 index 000000000..8f0dfcaa5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-rotate-right.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-select.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-select.png new file mode 100644 index 000000000..0e7b54f2d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-select.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-undo.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-undo.png new file mode 100644 index 000000000..23f895d09 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-ui-undo.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-zoom-panel.png b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-zoom-panel.png new file mode 100644 index 000000000..61fd6a22d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/images/organize-zoom-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/mobile-view.md new file mode 100644 index 000000000..17d7b5fa3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/mobile-view.md @@ -0,0 +1,41 @@ +--- +layout: post +title: Organize Pages in Mobile PDF Viewer Blazor | Syncfusion +description: Learn how to organize pages in the mobile PDF Viewer, including rotating, rearranging, inserting, deleting, and duplicating pages on mobile devices. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Organize Pages in Mobile PDF Viewer Blazor + +The PDF Viewer offers a mobile-responsive layout for the `Organize Pages` feature, ensuring a seamless experience on smaller devices. When viewed on a mobile device, the toolbar and navigation elements adapt to the screen size, providing easy access to all page management tools. + +![Organize Mobile View](./images/organize-mobile-view.png) + +## Mobile-Friendly Toolbar + +In the mobile view, the `Organize Pages` toolbar is displayed at the bottom of the screen for easy one-handed access. The toolbar includes the same set of tools as the desktop version, such as insert, delete, and rotate, but with a mobile-optimized layout. + +## Context Menu for Page Operations + +To perform actions on a page thumbnail, tap and hold on the thumbnail to open a context menu. This menu contains all the available page operations: + +* **Rotate Clockwise**: Rotate the selected page 90 degrees clockwise. +* **Rotate Counter-Clockwise**: Rotate the selected page 90 degrees counter-clockwise. +* **Rearrange pages**: Drag and drop pages to update the reading order. +* **Insert Page**: Insert a new page. +* **Duplicate Page**: Duplicate the selected page. +* **Delete Page**: Remove the selected page. +* **Select All**: Select all pages in the document. +* **Import a PDF document**: Merge the current document with pages from another PDF file. +* **Extract Pages**: Extract the current document pages as a PDF file. +* **Save updates**: Review changes in real time and use **Save** or **Save As** to download the revised document. + +![Alt text](./images/organize-mobile-options.png) + +## Rearranging Pages on Mobile + +To rearrange pages, tap and hold a page thumbnail to select it, then drag it to the desired position. A blue line will indicate the drop location. + +By providing a mobile-friendly interface, the PDF Viewer ensures that users can efficiently manage their PDF documents from any device, anywhere. diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md new file mode 100644 index 000000000..17e88351a --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/overview.md @@ -0,0 +1,180 @@ +--- +layout: post +title: Overview of Organize Pages in Blazor PDF Viewer component | Syncfusion +description: Learn here all about Overview of functionalities of Organize Pages in Syncfusion Blazor PDF Viewer component. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Organize Pages in Blazor PDF Viewer component + +The PDF Viewer allows you to manage your PDF documents efficiently by organizing pages seamlessly. Whether you need to add new pages, remove unnecessary ones, rotate pages, move pages within the document, and duplicate pages, the PDF Viewer facilitates these tasks effortlessly. + +## Getting started + +To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities. + +![Alt text](./images/organize-pages.png) + +The page organization support enables you to perform various actions such as rotating, rearranging, inserting, duplicating, and deleting pages within a PDF document using organize pages dialog. + +### Rotating PDF pages + +You can adjust the orientation of PDF pages to ensure proper alignment. The rotate icon offers the following options: + +* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise. + +![Organzie Rotate Clockwise](./images/organize-rotate-right.png) + +* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise. + +![Organzie Rotate Counter Clockwise](./images/organize-rotate-left.png) + +### Rearranging PDF pages + +You can easily change the sequence of pages within your document using the drag and drop method: + +* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order. + +![Drag and Drop Organize](./images/Drag_and_Drop.gif) + +### Inserting new pages + +Effortlessly add new pages to your document with the following options: + +* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon. + +![Organzie Insert Left](./images/organize-insert-left.png) + +* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon. + +![Organzie Insert Right](./images/organize-insert-right.png) + +### Deleting PDF pages + +Removing unwanted pages from your document is straight forward: + +* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once. +* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document. + +![Organzie Select and Delete](./images/organize-select-delete.png) + +### Duplicating PDF pages + +Duplicate the pages within your PDF document effortlessly: + +* `Select pages to Duplicate`: Click on the page thumbnails you wish to duplicate. Use the duplicate option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action. + +![Organzie Copy Pages](./images/organize-copy-page.png) + +### Importing a PDF Document + +Seamlessly import a PDF document into your existing document: + +* `Import PDF document`: Click the **Import Document** button to import a PDF. If a page is selected, the imported document’s thumbnail will be inserted to the right of the selected page. If multiple or no pages are selected, the thumbnail will be added as the first page. When **Save** or **Save As** is clicked, the imported PDF will be merged with the current document. You can insert a blank page to the left or right of the imported thumbnail, delete it, or drag and drop it to reposition as needed. + +![Alt text](./images/Import_Pages.gif) + +### Extract Document Pages + +* `Extract Document Pages`: Click the **Extract Document** button to extract a PDF pages. If a pages are selected, the selected pages are extracted as a separate document. + +![Alt text](./images/Extract_Pages.gif) + +### Selecting all pages + +Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document. + +![Organzie Select Pages](./images/organize-select-all.png) + +### Zooming Page Thumbnails + +Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to: + +* Increase or decrease the size of page thumbnails using the zoom slider +* See more details on pages when zoomed in +* View more pages simultaneously when zoomed out + +This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization. + +![Organzie Zoom Panel](./images/organize-zoom-panel.png) + +### Real-time updates + +Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications. + +### SaveAs functionality + +Safeguard your edits by utilizing the **Save As** feature. This enables you to download the modified version of the PDF document for future reference, ensuring that your changes are securely stored. + +## API's supported + +**EnablePageOrganizer:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`, indicating that the page organizer is enabled. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + +{% endhighlight %} +{% endtabs %} + +**PageOrganizerVisibility:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + +{% endhighlight %} +{% endtabs %} + +**PageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, duplicating, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied. + +* **CanDelete** : It allow users to enable or disable the delete pages from the document. By default it set as `true`. +* **CanInsert** : It allow users to enable or disable the insert new pages from the document. By default it set as `true`. +* **CanRotate** : It allow users to enable or disable the rotate pages from the document. By default it set as `true`. +* **CanDuplicate** : It allow users to enable or disable the duplicate pages from the document. By default it set as `true`. +* **CanRearrange** : It allow users to enable or disable the order of pages from the document. By default it set as `true`. +* **CanExtractPages** : It allow users to enable or disable extract pages into a separate document. By default it set as `true`. +* **ShowImageZoomingSlider** : It allow users to enable or disable the zoom slider for images. By default it set as `true`. +* **ImageZoom** : It represents the current zoom value of the images in the page organizer view. By default it set as `1`. +* **ImageZoomMin** : It represent minimum value for the image zooming slider in the page organizer view. By default it set as `1` and acceptable values: `1` to `4`. +* **ImageZoomMin** : It represent maximum value for the image zooming slider in the page organizer view. By default it set as `5` and acceptable values: `2` to `5`. +* **FooterButtons** : It specifies which buttons are visible in the Page Organizer dialog footer. + * `None` - Hide both Save and Save As buttons. + * `Save` - Show only the "Save" button. + * `Save As` - Show only the "SaveAs" button. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +{% endhighlight %} +{% endtabs %} + +## Keyboard shortcuts + +The following keyboard shortcuts are available at the organize pages dialog. + +* **Ctrl+Z** : Undo the last action performed. +* **Ctrl+Y** : Redo the action that was undone. + +#### Conclusion + +With the Organize Pages feature in the PDF Viewer, managing your PDF documents has never been easier. Whether you are adding new content, adjusting page orientation, moving the pages, duplicating the pages, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease! + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/programmatic-support.md new file mode 100644 index 000000000..54cc0836f --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/programmatic-support.md @@ -0,0 +1,290 @@ +--- +layout: post +title: Programmatical Organize Pages in Syncfusion PDF Viewer | Syncfusion +description: Learn here all about the Programmatic Support including rotating, rearranging, inserting, deleting, and duplicating for Organize Pages. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Programmatic Support for Organize Pages in Blazor PDF Viewer control + +The PDF Viewer provides comprehensive programmatic support for organizing pages, allowing you to integrate and manage PDF functionalities directly within your application. This section details the available APIs to enable, control, and interact with the page organization features. + +## Rotate Pages + +This method allows programmatic rotation of individual or multiple pages within the PDF document. The rotation is applied to the client-side representation and will be persisted upon saving the document. Provide the indexes of the page to rotate and rotation direction. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Rotate + + + +@code { + SfPdfViewer2? Viewer; + + private async Task RotateMethod() { + await Viewer?.RotatePagesAsync([1,2], RotationDirection.Clockwise); + } +} + +{% endhighlight %} +{% endtabs %} + +`RotationDirection` represent the rotation direction of the page. It has two types + +- `RotationDirection.Clockwise` - It rotates the page in the clock wise direction. +- `RotationDirection.CounterClockwise` - It rotates the page in the anti clock wise direction. + +### Rotate Pages with angle + +This method allows programmatic rotation of individual or multiple pages within the PDF document to a specific angle. The rotation is applied to the client-side representation and will be persisted upon saving the document. Provide the indexes of the page to rotate and rotation angle. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Rotate Angale + + + +@code { + SfPdfViewer2? Viewer; + + private async Task RotateMethodAngle() { + await Viewer?.RotatePagesToAngleAsync([1,2], PageRotation.RotateAngle180); + } +} + +{% endhighlight %} +{% endtabs %} + +`PageRotation` represent the rotation angle of the page. It has four types + +- `PageRotation.RotateAngle0` - It rotates the page in the 0 degree direction. +- `PageRotation.RotateAngle90` - It rotates the page in the 90 degree direction. +- `PageRotation.RotateAngle180` - It rotates the page in the 180 degree direction. +- `PageRotation.RotateAngle270` - It rotates the page in the 270 degree direction. + +## Move Pages + +This method allows asynchronously arranges the specified pages at the given target position. It rearrange the pages in the document based in the targeted index. Provide the indexes of the page to move and targeted index to move. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Move + + + +@code { + SfPdfViewer2? Viewer; + + private async Task MoveMethod() { + await Viewer?.MovePagesAsync([1,2], 10); + } +} + +{% endhighlight %} +{% endtabs %} + +## Insert Pages + +This method allows asynchronously inserts one or more blank pages at the specified index. It insert the blank pages in the document based in the targeted index. Provide the indexes to add blank pages and count of the pages need to be added. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Insert + + + +@code { + SfPdfViewer2? Viewer; + + private async Task InsertBlankMethod() { + await Viewer?.InsertBlankPagesAsync(2, 3); + } +} + +{% endhighlight %} +{% endtabs %} + +## Delete Pages + +This method allows asynchronously deletes the pages at the specified indices from the document. It delete the pages in the document based in the targeted index. Provide the indexes to delete pages of the document. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Delete + + + +@code { + SfPdfViewer2? Viewer; + + private async Task DeleteMethod() { + await Viewer?.DeletePagesAsync([1,2]); + } +} + +{% endhighlight %} +{% endtabs %} + +## Duplicate Pages + +This method allows asynchronously duplicates the pages at the specified indices from the document. It duplicates the pages in the document based in the targeted index. Provide the indexes to duplicates pages of the document. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Duplicate + + + +@code { + SfPdfViewer2? Viewer; + + private async Task DuplicateMethod() { + await Viewer?.DuplicatePagesAsync([1,2]); + } +} + +{% endhighlight %} +{% endtabs %} + +## Export Pages + +This method allows extracts the specified pages and downloads them as a separate PDF document. It extract the pages in the document based in the targeted index. Provide the indexes to extract pages of the document. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Extract + + + +@code { + SfPdfViewer2? Viewer; + + private async Task ExtractMethod() { + await Viewer?.ExtractPagesAsync([1,2]); + } +} + +{% endhighlight %} +{% endtabs %} + +### Export Pages as Stream + +This method allows extracts the specified pages and returns the extracted PDF as a stream. It extract the pages in the document as index based in the targeted index. Provide the indexes to extract pages of the document as stream. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Extract Stream + + + +@code { + SfPdfViewer2? Viewer; + Stream docStream; + private async Task ExtractMethodStream() { + docStream = await Viewer?.ExtractPagesAsStreamAsync([1,2]); + await Viewer?.LoadAsync(docStream, null); + } +} + +{% endhighlight %} +{% endtabs %} + +## Import Pages + +This method allows inserts pages from another PDF document at the specified index. It insert the pages of the another document based in the targeted index. Provide the indexes to import pages of the another document, byte array of the imported document and password. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Import + + + +@code { + SfPdfViewer2? Viewer; + + private async Task ImportMethod() { + byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/pdf-succinctly.pdf"); + await Viewer?.InsertPagesAsync(2, byteArray, null); + } +} + +{% endhighlight %} +{% endtabs %} + +### Import Pages as Stream + +This method allows inserts pages from another PDF document as stream at the specified index. It insert the pages of the another document as stream based in the targeted index. Provide the indexes to import pages of the another document, stream of the imported document and password. + +{% tabs %} +{% highlight razor %} +@page "/" +@using Syncfusion.Blazor.Buttons + +Import Stream + + + +@code { + SfPdfViewer2? Viewer; + + private async Task ImportMethodStream() { + byte[] byteArray = System.IO.File.ReadAllBytes("wwwroot/pdf-succinctly.pdf"); + MemoryStream stream = new MemoryStream(byteArray); + await Viewer?.InsertPagesAsync(2, stream, null); + } +} + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer/Organize-API-Support) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md new file mode 100644 index 000000000..11946b9fc --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/toolbar.md @@ -0,0 +1,145 @@ +--- +layout: post +title: Organize Page Toolbar in Blazor PDF Viewer control | Syncfusion +description: Learn here all about Organize Page Toolbar Customization in Syncfusion Blazor PDF Viewer. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Organize Page Toolbar Customization in Blazor PDF Viewer control + +The PDF Viewer allows you to customize the toolbar for the organize pages feature, enabling you to show or hide specific tools based on your application's requirements. The `PageOrganizerSettings` API provides properties to control the visibility of each tool in the organize pages dialog. + +## Show or hide the insert option + +The `CanInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +{% endhighlight %} +{% endtabs %} + +![Insert Disable](./images/organize-insert-disable.png) + +## Show or hide the delete option + +The `CanDelete` property controls the visibility of the delete tool. When set to `false`, the delete tool will be hidden. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +{% endhighlight %} +{% endtabs %} + +![Delete Disable](./images/organize-delete-disable.png) + +## Show or hide the rotate option + +The `CanRotate` property controls the visibility of the rotate tool. When set to `false`, the rotate tool will be hidden. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +{% endhighlight %} +{% endtabs %} + +![Rotate Disable](./images/organize-rotate-disable.png) + +## Show or hide the duplicate option + +The `CanDuplicate` property controls the visibility of the copy tool. When set to `false`, the copy tool will be hidden. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +{% endhighlight %} +{% endtabs %} + +![Duplicate Disable](./images/organize-copy-disable.png) + +## Show or hide the import option + +The `CanImport` property controls the visibility of the import tool. When set to `false`, the import tool will be hidden. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +{% endhighlight %} +{% endtabs %} + +![Import Disable](./images/organize-import-disable.png) + +## Show or hide the extract option + +The `CanExtractPages` property controls the visibility of the extract tool. When set to `false`, the extract tool will be hidden. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +{% endhighlight %} +{% endtabs %} + +![Extract Disable](./images/organize-extract-disable.png) + +## Show or hide the rearrange option + +The `CanRearrange` property controls the ability to rearrange pages. When set to `false`, pages cannot be rearranged. + +{% tabs %} +{% highlight razor %} +@page "/" + + + + + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Page%20Organizer/Page-Organizer-Settings) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/ui-interactions.md new file mode 100644 index 000000000..13eb3de07 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pages/ui-interactions.md @@ -0,0 +1,105 @@ +--- +layout: post +title: UI Interaction for Organize Pages in Blazor PDF Viewer | Syncfusion +description: Learn about the UI interactions including rotating, rearranging, inserting, deleting, and duplicating for organize pages. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# UI Interactions for Organizing Pages in Blazor PDF Viewer + +The PDF Viewer provides an intuitive user interface for managing and organizing pages within a PDF document. This section covers the various UI interactions available in the `Organize Pages` dialog. + +## Rotating PDF pages + +You can adjust the orientation of pages to ensure proper alignment. The rotate icon in the Organize Pages dialog provides the following options: + +* **Rotate clockwise**: Rotate the selected pages 90 degrees clockwise. + +![Rotating Clockwise](./images/organize-ui-rotate-right.png) + +* **Rotate counter-clockwise**: Rotate the selected pages 90 degrees counter-clockwise. + +![Rotating Counter Clockwise](./images/organize-ui-rotate-left.png) + +## Rearranging PDF pages + +Easily change the sequence of pages using the drag-and-drop method: + +* **Drag and drop**: Click and drag a page thumbnail to the desired position within the document, then release it to reorder the pages. + +![Rearranging](./images/Drag_and_Drop.gif) + +## Inserting new pages + +Effortlessly add blank pages to your document with the following options: + +* **Insert blank page left**: Insert a blank page to the left of the selected page. +* **Insert blank page right**: Insert a blank page to the right of the selected page. + +![Rearranging](./images/Insert_Pages.gif) + +## Deleting PDF pages + +Remove unwanted pages from your document with these steps: + +1. **Select pages to delete**: Click on the thumbnails of the pages you wish to remove. You can select multiple pages at once. +2. **Delete selected pages**: Use the delete option in the Organize Pages pane to remove the selected pages from the document. + +![Delete](./images/organize-ui-delete.png) + +## Duplicating PDF pages + +Duplicate pages within your PDF document effortlessly: + +* **Select pages to duplicate**: Click on the page thumbnails you wish to duplicate. +* **Duplicate selected pages**: Use the duplicate option to create duplicates. The copied pages will be added to the right of the selected pages. + +![Duplicating](./images/Duplicate_Pages.gif) + +## Importing a PDF document + +Seamlessly import another PDF document into your current document: + +* **Import PDF document**: Click the **Import Document** button to select and import a PDF. The imported document will be inserted as a thumbnail. If a page is selected, the thumbnail will be added to its right. If no pages are selected, it will be added as the first page. The imported PDF will be merged with the current document upon saving. + +![Importing](./images/organize-ui-extract-page.png) + +### Extract Document Pages + +* `Extract Document Pages`: Click the **Extract Document** button to extract a PDF pages. If a pages are selected, the selected pages are extracted as a separate document. + +![Alt text](./images/organize-ui-import-page.png) + +## Selecting all pages + +Select all pages simultaneously to perform bulk operations, such as rotating or deleting all pages at once. + +![Selecting](./images/organize-ui-select.png) + +## Zooming page thumbnails + +Adjust the size of page thumbnails for better visibility and precision: + +* Use the zoom slider to increase or decrease the thumbnail size. +* Zoom in to see more detail on each page. +* Zoom out to view more pages at once. + +![Zooming](./images/organize-zoom-panel.png) + +## Real-time updates and saving + +All changes are reflected instantly in the Organize Pages dialog. Click the **Save** button to apply the modifications to the document. Use the **Save As** feature to download a new version of the PDF with your changes. + +## Keyboard shortcuts + +The following keyboard shortcuts are available in the Organize Pages dialog: + +* **Ctrl+Z**: Undo the last action. + +![Keyboard](./images/organize-ui-undo.png) + +* **Ctrl+Y**: Redo the last undone action. + +![Keyboard](./images/organize-ui-redo.png) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pdf.md new file mode 100644 index 000000000..b653d789f --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/organize-pdf.md @@ -0,0 +1,39 @@ +--- +layout: post +title: Organize Pages in Blazor PDF Viewer | Syncfusion +description: Learn here all about Organize Pages in Syncfusion Blazor PDF Viewer component. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Organize pages in Blazor PDF Viewer + +The Blazor PDF Viewer component provides an Organize Pages panel that helps you prepare documents before sharing them. Use it to tidy scanned files, move pages into the right order, and duplicate important content without leaving the viewer. + +To open the Organize Pages panel, load a document, ensure that the Organize Pages toolbar item is enabled, and choose **Organize Pages** from the left vertical toolbar. The document must allow page-level edits; otherwise, the toolbar item is hidden. + +The Organize Pages panel supports the following actions: + +* **Rotate pages**: Fix page orientation in 90-degree increments to correct scanned pages. +* **Rearrange pages**: Drag and drop page thumbnails to update the reading order. +* **Insert new pages**: Add blank pages at the required position. +* **Delete pages**: Remove pages that are no longer needed. +* **Duplicate pages**: Duplicate selected pages to reuse content elsewhere in the document. +* **Import a PDF document**: Merge the current document with pages from another PDF file. +* **Extract Pages**: Extract the current document pages as a PDF file. +* **Select all pages**: Apply bulk actions, such as rotation or deletion, to every page. +* **Save updates**: Review changes in real time and use **Save** or **Save As** to download the revised document. + +After completing the changes, apply them by selecting **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order. + +For a full guide to Organize Pages in Blazor, see the feature landing page: [Organize pages in Blazor PDF Viewer](./organize-pages/overview). + +## See also + +- [UI interactions for Organize Pages](./organize-pages/ui-interactions) +- [Toolbar items for Organize Pages](./organize-pages/toolbar) +- [Programmatic support for Organize Pages](./organize-pages/programmatic-support) +- [Organize Pages events](./organize-pages/events) +- [Organize Pages in mobile view](./organize-pages/mobile-view) + diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/annotation-toolbar.md index ab786c621..94554e3e3 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization/annotation-toolbar.md @@ -95,7 +95,10 @@ Refer to the image below for the mobile view (responsive layout adapts to width) ![Annotation toolbar with selected tools on mobile](../images/Annotation_Toolbar_Customization_Mobile.png) -[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/CustomAnnotationToolbar.razor). +[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/CustomAnnotationToolbar.razor) + +N> Properties tools (color, opacity, thickness, font, etc.) now appear only after you select or add the related annotation. Until you select or add one, these tools are hidden. +N> This change reduces clutter and shows options only when they’re relevant to the selected annotation. ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md new file mode 100644 index 000000000..b0ca355da --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/mobile-view.md @@ -0,0 +1,179 @@ +--- +layout: post +title: Redaction in mobile view in JavaScript ES5 PDF Viewer | Syncfusion +description: Learn how to apply redactions in mobile view using the Syncfusion JavaScript (ES5) PDF Viewer with a complete toolbar setup and redaction workflow. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Redaction in Mobile View in JavaScript (ES5) PdfViewer Component + +The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the JavaScript (ES5) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. + +![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) + +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. + +## Adding Redaction in Mobile View + +To enable redaction functionality in your JavaScript (ES5) application, configure the PDF Viewer with the following setup: + +```js +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", + toolbarSettings: { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Enables Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + } +}); +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'); +``` + +## Understanding Mobile Redaction Toolbar Tools + +When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. + +### Redaction Annotation Tool + +The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: + +Function: Creates visual redaction annotations that mark content for permanent removal +Usage: +Touch and drag to draw rectangular redaction overlays on any content area. + +Process: +- Selected content appears with a customizable overlay (default black) +- Annotations remain editable until explicitly applied +- Can be repositioned or deleted before final application + +![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png) + +### Page Redaction Tool + +The Page Redaction tool enables batch redaction of entire pages based on specific patterns. + +![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) + +Function: Redacts complete pages or page ranges with a single action +Options Available: +- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) +- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) +- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) +- Current Page: Redacts only the currently displayed page + +Usage: +Select desired pattern → Review affected pages in the viewer → Confirm redaction scope + +![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png) + +### Redaction Properties Tool + +The Redaction Properties tool allows customization of redaction appearance before application. + +![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) + +Function: Customize the visual appearance of redaction overlays and text replacement +Customizable Properties: +- Fill Color: Change the redaction overlay color (default: black) +- Outline Color: Set outline color for redaction boxes (optional) +- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") +- Text Color: Change overlay text color for better visibility +- Text Font: Select font family for overlay text +- Text Alignment: Position overlay text within redaction boxes +- Text Size: Adjust overlay text size relative to redaction area + +![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png) + +## Enabling Redaction Mode in Mobile View + +Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. + +![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png) + +Step 2: From the redaction toolbar, select your desired redaction tool: +- First Tool (Redaction Annotation): For selective content redaction +- Second Tool (Page Redaction): For page-wide or pattern-based redaction +- Third Tool (Redaction Properties): For appearance customization + +Step 3: Configure your redaction parameters using the selected tool interface. + +## Applying Different Redaction Types in Mobile View + +### Selective Content Redaction +1. Select Redaction Annotation tool (first button) +2. Choose Content: Tap and drag over text or draw rectangular areas +3. Preview: Check redaction overlays for accuracy +4. Apply: Tap "Apply Redactions" button + +### Page-Wide Redaction +1. Select Page Redaction tool (second button) +2. Choose Pattern: Select odd pages, even pages, or custom range +3. Review: Verify affected pages in the viewer +4. Apply: Confirm page redaction scope and apply + +### Custom Appearance Redaction +1. Select Redaction Properties tool (third button) +2. Customize: Adjust colors, overlay text, and formatting +3. Preview: See changes applied to existing annotations +4. Apply: Use customized appearance for final redaction + +## Applying Redactions in Mobile View + +N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. + +Once you have configured redactions using any combination of tools. + +Step 1: Review all redaction marks and configurations. + +![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png) + +Step 2: Tap the Apply Redactions button in the redaction toolbar + +![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png) + +Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone + +![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png) + +The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). + +![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png) + +## Removing Redaction Annotations + +To remove existing redaction annotations before they are applied: + +- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode +- Step 2: Tap on any existing redaction annotation you wish to remove +- Step 3: Select Delete from the context menu that appears + +Alternative: Tap redaction annotation → Use delete button in annotation properties panel + +![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) + +N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. + +## See Also + +* [Redaction Overview](./overview) +* [UI Interaction](./ui-interaction) +* [Programmatic Support in Redaction](./programmatic-support) +* [Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md new file mode 100644 index 000000000..251095a98 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/overview.md @@ -0,0 +1,110 @@ +--- +layout: post +title: Redaction annotation in Javascript PDF Viewer | Syncfusion +description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Redaction in JavaScript (ES5) PdfViewer + +Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +```js +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", + toolbarSettings: { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Enables Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + } +}); +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'); +``` + +N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) + +## Add Redaction Annotations + +You can mark specific content for redaction using the toolbar or through code. + +Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. + +![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) + +## Delete Redaction Annotations + +Redaction annotations can be removed easily: + +- Click the **Delete** button on the toolbar, or +- Select the annotation and press the **Delete** key. + +![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) + +## Redact Entire Pages + +The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. + +![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) + +## Apply Redaction + +Once annotations are added, you can permanently apply them to the document. This action cannot be undone. + +Use the **Apply Redaction** button on the toolbar or call the API method: + +- The button is disabled until at least one redaction annotation exists. +- It becomes active when redaction annotations are present. + +![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) + +N> After redaction is applied, the original content cannot be recovered. + +## Comment Support + +Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction. + +Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments). + +## Import and Export Redaction Annotations + +You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions. + +For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation-js). + +## See also + +* [Redaction UI interactions](./ui-interaction) +* [Redaction Programmatic support](./programmatic-support) +* [Redaction Toolbar](./toolbar) +* [Redaction Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md new file mode 100644 index 000000000..88b5c9196 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/programmatic-support.md @@ -0,0 +1,189 @@ +--- +layout: post +title: Redaction Programmatic support in JavaScript PDF Viewer | Syncfusion +description: Learn how to add, delete, update, and apply redaction annotations programmatically in the Syncfusion JavaScript (ES5/JavaScript) PDF Viewer. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Programmatic support for redaction in JavaScript (ES5) PdfViewer + +The Syncfusion JavaScript PDF Viewer (EJ2) provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +```js +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", + toolbarSettings: { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Enables Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + } +}); +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'); +``` + +## Add redaction annotations programmatically + +You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. + +```html + +``` +```js +document.getElementById('addRedactAnnot').addEventListener('click', () => { + viewer.annotation.addAnnotation("Redaction", { + bound: { x: 200, y: 480, width: 150, height: 75 }, + pageNumber: 1, + markerFillColor: '#0000FF', + markerBorderColor: 'white', + fillColor: 'red', + overlayText: 'Confidential', + fontColor: 'yellow', + fontFamily: 'Times New Roman', + fontSize: 8, + beforeRedactionsApplied: false + }); +}); +``` + +You can listen to the `annotationAdd` event to track when annotations are added: + +```js +viewer.annotationAdd = (args) => { + console.log('Annotation added:', args); +}; +``` + +## Delete redaction annotations programmatically + +Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. + +```html + +``` +```js +// Delete annotation by id +document.getElementById('deleteAnnotationbyId').addEventListener('click', () => { + viewer.annotationModule.deleteAnnotationById( + viewer.annotationCollection[0].annotationId + ); + }); +``` + +Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key. + +## Update redaction annotation properties programmatically + +You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color: + +```html + +``` +```js +let editRedactAnnotation = document.getElementById('editRedactAnnotation'); +if (editRedactAnnotation) { +editRedactAnnotation.addEventListener('click', function () { + if (viewer) { + for (let i = 0; i < viewer.annotationCollection.length; i++) { + if (viewer.annotationCollection[i].subject === "Redaction") { + viewer.annotationCollection[i].overlayText= 'EditedAnnotation', + viewer.annotationCollection[i].markerFillColor= '#22FF00', + viewer.annotationCollection[i].markerBorderColor= '#000000', + viewer.annotationCollection[i].isRepeat= true, + viewer.annotationCollection[i].fillColor= '#F8F8F8', + viewer.annotationCollection[i].fontColor= '#333333', + viewer.annotationCollection[i].fontSize= 14, + viewer.annotationCollection[i].fontFamily= 'Symbol', + viewer.annotationCollection[i].textAlign= 'Right' + viewer.annotationCollection[i].beforeRedactionsApplied= false + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); + } + } + } +}); +} +``` + +## Add page redactions programmatically + +Entire pages can be marked for redaction using the `addPageRedactions` method: + +```html + +``` +```js +document.getElementById('addPageRedactions').addEventListener('click', () => { + viewer.annotation.addPageRedactions([1, 3, 5, 7]); // Redacts pages 1, 3, 5, and 7 +}); +``` + +## Apply redaction programmatically + +Once annotations are added, you can permanently apply them to the document using the `redact` method: + +```html + +``` +```js +document.getElementById('redact').addEventListener('click', () => { + viewer.annotation.redact(); +}); +``` + +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. + +## Configure default redaction annotation properties + +You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically: + +```js +viewer.redactionSettings= { + overlayText: 'Confidential', + markerFillColor: '#FF0000', + markerBorderColor: '#000000', + isRepeat: false, + fillColor: '#F8F8F8', + fontColor: '#333333', + fontSize: 14, + fontFamily: 'Symbol', + textAlign: 'Right' + }; +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/JavaScript-pdf-viewer-examples) + +## Redaction property panel + +The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. + +![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) + +## See also + +* [Overview of Redaction](./overview) +* [Redaction UI interactions](./ui-interaction) +* [Redaction Toolbar](./toolbar) +* [Reaction in Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/adding-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/adding-redaction-annotation.png new file mode 100644 index 000000000..b25b31126 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/adding-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/applied-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/applied-redaction-annot.png new file mode 100644 index 000000000..f6a6a2831 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/applied-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-button-mv.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-button-mv.png new file mode 100644 index 000000000..bd02a6bc3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-button-mv.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png new file mode 100644 index 000000000..0dea706e6 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-dialog.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-dialog.png new file mode 100644 index 000000000..0692de34e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/apply-redaction-dialog.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png new file mode 100644 index 000000000..8e061a883 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/moving-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/moving-redaction-annotation.png new file mode 100644 index 000000000..f7715e2d1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/moving-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-annot.png new file mode 100644 index 000000000..bf4804998 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png new file mode 100644 index 000000000..69658a826 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-panel.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-panel.png new file mode 100644 index 000000000..be68305ae Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/page-redaction-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-button-icon.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-button-icon.png new file mode 100644 index 000000000..954df393d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-button-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-page-icon.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-page-icon.png new file mode 100644 index 000000000..0c9dbed27 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-page-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-text-context-menu.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-text-context-menu.png new file mode 100644 index 000000000..a88985b39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redact-text-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-annot.png new file mode 100644 index 000000000..5e9cde040 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-delete-context-menu.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-delete-context-menu.png new file mode 100644 index 000000000..cd8f38b82 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-delete-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-delete-icon.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-delete-icon.png new file mode 100644 index 000000000..4026f8c49 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-delete-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-icon-toolbar.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-icon-toolbar.png new file mode 100644 index 000000000..6de03e8cc Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-icon-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-mobile-view.png new file mode 100644 index 000000000..2d9539200 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-mobile-view.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-properties-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-properties-annot.png new file mode 100644 index 000000000..079e65e59 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-properties-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png new file mode 100644 index 000000000..5a56fb1d5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-property-panel-icon.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-property-panel-icon.png new file mode 100644 index 000000000..3cc44eb64 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-property-panel-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png new file mode 100644 index 000000000..08d9a3a6a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/resizing-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/resizing-redaction-annotation.png new file mode 100644 index 000000000..846e301da Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/resizing-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png new file mode 100644 index 000000000..a78383509 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/show-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/show-redaction-toolbar.png new file mode 100644 index 000000000..94d75eb3b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/redaction-annotations-images/show-redaction-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/search-redact.md new file mode 100644 index 000000000..3e5e867c3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/search-redact.md @@ -0,0 +1,111 @@ +--- +layout: post +title: Search text and redact in Javascript PDF Viewer | Syncfusion +description: Learn how to find text and add redaction annotations programmatically in the Syncfusion Javascript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Search text and redact in JavaScript (ES5) PdfViewer + +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. + +N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +## Steps to add Redaction annotations on search Text Bounds + +**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:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. + + +```html + + +``` +```js +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", +}); + +//Adding Redaction Tool in the toolbar +pdfviewer.toolbarSettings.toolbarItems = ['OpenOption', 'UndoRedoTool', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'CommentTool', 'SubmitForm', 'AnnotationEditTool', 'RedactionEditTool', 'FormDesignerEditTool', 'SearchOption', 'PrintOption', 'DownloadOption']; + +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'); +//EventListener to Search Text and Redact +document.getElementById('searchTextRedact').addEventListener('click', () => { + // Function to handle extractTextCompleted event + pdfviewer.extractTextCompleted = args => { + const searchText = "syncfusion"; //Provide text to be redacted + + // Perform text search + const searchResults = pdfviewer.textSearchModule.findText(searchText, false); + + if (!searchResults || searchResults.length === 0) { + console.warn("No matches found."); + return; + } + + // Loop through search results + for (let i = 0; i < searchResults.length; i++) { + const pageResult = searchResults[i]; + if (!pageResult || !pageResult.bounds || pageResult.bounds.length === 0) { continue; } + + // guard pageIndex (fixes TS18048) + if (pageResult.pageIndex == null) { continue; } + const pageNumber = pageResult.pageIndex + 1; + + // Loop through each bounding box of the found text + for (let j = 0; j < pageResult.bounds.length; j++) { + const bound = pageResult.bounds[j]; + + // Add a redaction annotation at the found text location + pdfviewer.annotation.addAnnotation("Redaction", { + bound: { + x: (bound.x * 96) / 72, + y: (bound.y * 96) / 72, + width: (bound.width * 96) / 72, + height: (bound.height * 96) / 72 + }, + pageNumber: pageNumber, + overlayText: "Confidential", + fillColor: "#00FF40FF", + fontColor: "#333333", + fontSize: 12, + fontFamily: "Arial", + // removed textAlign property (fixes TS2353) + markerFillColor: "#FF0000", + markerBorderColor: "#000000" + }); + } + } + }; + }); + +//EventListener to Apply Redaction +document.getElementById("applyRedaction")?.addEventListener('click', ()=>{ + pdfviewer.annotation.redact(); +}); +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/Javascript-pdf-viewer-examples) + +## Notes +- Ensure the PDF is fully loaded before triggering extraction and search. +- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates. +- Customize overlay text, colors, and typography as needed. +- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [UI interactions](./ui-interaction) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/toolbar.md new file mode 100644 index 000000000..3fc4887cb --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/toolbar.md @@ -0,0 +1,95 @@ +--- +layout: post +title: Customize the redaction toolbar in JavaScript PDF Viewer | Syncfusion +description: Learn how to customize the redaction toolbar in the Syncfusion JavaScript PDF Viewer by showing or hiding default items. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction toolbar customization in JavaScript + +The redaction toolbar in the Syncfusion JavaScript (ES5/JavaScript) PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +```js +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", + toolbarSettings: { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Enables Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + } +}); +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'); +``` + +Refer to the following image for the toolbar view: + +![Enable redaction toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +## Show or hide the redaction toolbar + +You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. + +### Display the redaction toolbar using the toolbar icon + +When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. + +![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +### Display the redaction toolbar programmatically + +You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. + +The following example demonstrates toggling the redaction toolbar programmatically: + + +```html + + + +``` +```js +document.getElementById('showRedactionToolbar').addEventListener('click', () => { + pdfviewer.toolbar.showRedactionToolbar(true); // Show the redaction toolbar +}); + +document.getElementById('hideRedactionToolbar').addEventListener('click', () => { + pdfviewer.toolbar.showRedactionToolbar(false); // Hide the redaction toolbar +}); +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) + +Refer to the following image for details: + +![Programmatically show the Redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) + +## See also + +* [Adding the redaction annotation in PDF viewer](../redaction/overview) +* [UI interactions](./ui-interaction) +* [Programmatic support](./programmatic-support) +* [Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md new file mode 100644 index 000000000..d4ca4bf74 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/Redaction/ui-interaction.md @@ -0,0 +1,136 @@ +--- +layout: post +title: Redaction UI interactions in JavaScript PDF Viewer | Syncfusion +description: Learn about UI interactions in Redaction annotations of the Syncfusion JavaScript (ES5) PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction UI interactions in JavaScript (ES5) PdfViewer + +## Add redaction annotations from the toolbar + +Use the redaction tool in the toolbar to draw over content that should be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties. + +![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) + +#### Redaction annotations are interactive + +* **Movable** – Drag and reposition the annotation within the same page. +![Moving a redaction annotation](redaction-annotations-images/moving-redaction-annotation.png) + +* **Resizable** – Resize the annotation to cover the required area. +![Resizing a redaction annotation](redaction-annotations-images/resizing-redaction-annotation.png) + +N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see the [Toolbar customization](../toolbar). + +## Add redaction annotations using the context menu + +In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. + +![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) + +## Update redaction properties + +After adding a redaction annotation, you can update its properties through the property panel or programmatically. + +### Update using the property panel + +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. + +The property panel can be opened in two ways: + +* By clicking the **redaction property panel** icon in the toolbar. +![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) + +* By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. +![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) + +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + + +## Delete redaction annotations + +Delete redaction annotations using any of the following: + +* **Right-click and select Delete** from the context menu. + +![Context menu showing Delete for a redaction](redaction-annotations-images/redaction-delete-context-menu.png) + +* **Click the Delete button** on the toolbar. +![Toolbar delete icon for redaction](redaction-annotations-images/redaction-delete-icon.png) + +* **Press the Delete key** after selecting the annotation. + +## Redact pages using the UI + +Entire pages can be marked for redaction using the **Redact Pages** option in the toolbar. Clicking the icon opens a dialog with options: + +* **Current Page** – Redacts the page currently in view. +* **Odd Pages Only** – Redacts all odd‑numbered pages. +* **Even Pages Only** – Redacts all even‑numbered pages. +* **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. + +After choosing the range, click **Save** to apply redaction marks to the selected pages. + +![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) + +## Apply redaction from the toolbar + +The **Apply Redaction** button permanently removes all marked content from the document. + +* The button is disabled when no redaction annotations exist. +* It automatically enables once at least one annotation is present. + +![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) + +N> Redaction is permanent. Once applied, the original content cannot be restored. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) 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 index a63574b48..734e520dd 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to-overview.md @@ -66,4 +66,5 @@ The frequently asked questions in Essential® PDF Viewer are liste * [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) +* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-document-after-resources-loaded.md new file mode 100644 index 000000000..779890914 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/load-document-after-resources-loaded.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Load document after resources Loaded JS(ES5) PDF Viewer | Syncfusion +description: Learn here all about how to load document after loading assets in Syncfusion JavaScript (ES5) PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Load a PDF only after PDFium resources are ready + +In Standalone mode, the JavaScript (ES5) PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in resourceUrl. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready. + +## When does resourcesLoaded trigger? + +The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64). + +## How to Load Document after resourcesLoaded + +- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path). +- Listen to resourcesLoaded and call load inside the handler. + +```js +// Initialize the viewer in Standalone mode and point to the assets +var viewer = new ej.pdfviewer.PdfViewer({ + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + resourcesLoaded: onResourcesLoaded +}); +viewer.appendTo('#pdfViewer'); + +// Sample sources to demonstrate both URL and Base64 loading +var documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +// supply your Base64 here when needed +const base64 = 'data:application/pdf;base64,JVBERi0xLjMNCiXi48..'; +// Called when PDFium runtime assets have finished loading +function onResourcesLoaded() { + // Choose ONE of the following load options: + + // 1) Load by URL + viewer.load(documentUrl, ''); + + // 2) Load by Base64 (uncomment if you want to load Base64) + // if (base64) { + // viewer.load(base64, ''); + // } +} +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) + +## Notes and best practices + +- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire. +- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks. +- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event. + +## See also + +- [Events in JavaScript PDF Viewer](../event#resourcesloaded) +- [Open PDF files](../open-pdf-files) +- [Save PDF files](../save-pdf-files) +- [Getting started](../getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md new file mode 100644 index 000000000..b5124bf54 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md @@ -0,0 +1,116 @@ +--- +layout: post +title: Extract Pages in JavaScript PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion JavaScript PDF Viewer control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Extract pages in JavaScript PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI, and also control extraction programmatically. +The Extract Pages tool is available by default in Organize Pages. + +## Extract Pages in Organize Pages + +- Open the Organize Pages panel in the PDF Viewer toolbar. +- Locate and click the Extract Pages option. + +![Extract Pages](../images/extract-page.png) + +When selected, a secondary toolbar dedicated to extraction is displayed. + +![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png) + +## Extract pages using the UI + +You can extract by typing page numbers/ranges or by selecting thumbnails. + +1. Click Extract Pages in the Organize Pages panel. +2. In the input box, enter the pages to extract. Supported formats include: + - Single pages: 1,3,5 + - Ranges: 2-6 + - Combinations: 1,4,7-9 +3. Alternatively, select the page thumbnails you want instead of typing values. +4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool. + +![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png) + + N> Page numbers are 1-based (first page is 1). You can start anywhere—enter single pages or ranges like 2-3, 5, or 7-9. Invalid or out-of-range entries are ignored. + +## Extraction options (checkboxes) + +Two options appear in the secondary toolbar: + +- **Delete Pages After Extracting:** + - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file. + - Example: If you enter 1,2 and extract, a PDF containing pages 1 and 2 is downloaded, and pages 1 and 2 are removed from the currently loaded document in the viewer. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. + - Example: If you select pages 3, 5, and 6, three separate PDFs are downloaded (3.pdf, 5.pdf, and 6.pdf). If you enter a range (e.g., 2-4), pages 2, 3, and 4 are each downloaded as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable Extract Pages + +Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`. + +Use the following code snippet to enable or disable the Extract Pages option: + +```js +// Enable the Extract Pages Tool +viewer.pageOrganizerSettings = { canExtractPages: true }; +``` + +```js +// Disable the Extract Pages Tool +viewer.pageOrganizerSettings = { canExtractPages: false }; +``` + +Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`. + +Use the following code snippet to remove the Extract Pages option: +```js +// Remove the Extract Pages option entirely from the UI (redacted example as provided) +viewer.pageOrganizerSettings = { showExtractPagesOption: false } +``` + +### Extract pages and load the result programmatically + +You can extract pages programmatically using the `extractPages` method. +The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents. + +```html + +``` + +```js +document.getElementById('extractPage').addEventListener('click', function () { + // Extract pages 1 and 2 + var array = viewer.extractPages("1,2"); + + // Load the extracted pages back into the viewer + viewer.load(array,""); + + // Inspect the result if needed + console.log(array); +}); +``` + +[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) + +## See also + +- [Overview](../overview) +- [UI interactions](../ui-interactions) +- [Programmatic support](../programmatic-support) +- [Toolbar](../toolbar) +- [Events](../events) +- [Mobile view](../mobile-view) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/mobile-view.md new file mode 100644 index 000000000..8ced90db2 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/mobile-view.md @@ -0,0 +1,180 @@ +--- +layout: post +title: Redaction in mobile view in JavaScript ES6 PDF Viewer | Syncfusion +description: Learn how to apply redactions in mobile view using the Syncfusion JavaScript (ES6) PDF Viewer with a complete toolbar setup and redaction workflow. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Redaction in Mobile View in JavaScript (ES6) PdfViewer Component + +The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the JavaScript (ES6) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. + +![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) + +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. + +## Adding Redaction in Mobile View + +To enable redaction functionality in your JavaScript (ES6) application, configure the PDF Viewer with the following setup: + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); +let viewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib', + toolbarSettings: { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Enables Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + } +}); +viewer.appendTo('#pdfViewer'); +``` + +## Understanding Mobile Redaction Toolbar Tools + +When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. + +### Redaction Annotation Tool + +The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: + +Function: Creates visual redaction annotations that mark content for permanent removal +Usage: +Touch and drag to draw rectangular redaction overlays on any content area. + +Process: +- Selected content appears with a customizable overlay (default black) +- Annotations remain editable until explicitly applied +- Can be repositioned or deleted before final application + +![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png) + +### Page Redaction Tool + +The Page Redaction tool enables batch redaction of entire pages based on specific patterns. + +![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) + +Function: Redacts complete pages or page ranges with a single action +Options Available: +- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) +- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) +- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) +- Current Page: Redacts only the currently displayed page + +Usage: +Select desired pattern → Review affected pages in the viewer → Confirm redaction scope + +![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png) + +### Redaction Properties Tool + +The Redaction Properties tool allows customization of redaction appearance before application. + +![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) + +Function: Customize the visual appearance of redaction overlays and text replacement +Customizable Properties: +- Fill Color: Change the redaction overlay color (default: black) +- Outline Color: Set outline color for redaction boxes (optional) +- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") +- Text Color: Change overlay text color for better visibility +- Text Font: Select font family for overlay text +- Text Alignment: Position overlay text within redaction boxes +- Text Size: Adjust overlay text size relative to redaction area + +![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png) + +## Enabling Redaction Mode in Mobile View + +Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. + +![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png) + +Step 2: From the redaction toolbar, select your desired redaction tool: +- First Tool (Redaction Annotation): For selective content redaction +- Second Tool (Page Redaction): For page-wide or pattern-based redaction +- Third Tool (Redaction Properties): For appearance customization + +Step 3: Configure your redaction parameters using the selected tool interface. + +## Applying Different Redaction Types in Mobile View + +### Selective Content Redaction +1. Select Redaction Annotation tool (first button) +2. Choose Content: Tap and drag over text or draw rectangular areas +3. Preview: Check redaction overlays for accuracy +4. Apply: Tap "Apply Redactions" button + +### Page-Wide Redaction +1. Select Page Redaction tool (second button) +2. Choose Pattern: Select odd pages, even pages, or custom range +3. Review: Verify affected pages in the viewer +4. Apply: Confirm page redaction scope and apply + +### Custom Appearance Redaction +1. Select Redaction Properties tool (third button) +2. Customize: Adjust colors, overlay text, and formatting +3. Preview: See changes applied to existing annotations +4. Apply: Use customized appearance for final redaction + +## Applying Redactions in Mobile View + +N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. + +Once you have configured redactions using any combination of tools. + +Step 1: Review all redaction marks and configurations. + +![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png) + +Step 2: Tap the Apply Redactions button in the redaction toolbar + +![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png) + +Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone + +![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png) + +The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). + +![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png) + +## Removing Redaction Annotations + +To remove existing redaction annotations before they are applied: + +- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode +- Step 2: Tap on any existing redaction annotation you wish to remove +- Step 3: Select Delete from the context menu that appears + +Alternative: Tap redaction annotation → Use delete button in annotation properties panel + +![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) + +N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. + +## See Also + +* [Redaction Overview](./overview) +* [UI Interaction](./ui-interaction) +* [Programmatic Support in Redaction](./programmatic-support) +* [Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/overview.md new file mode 100644 index 000000000..5698ce23a --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/overview.md @@ -0,0 +1,114 @@ +--- +layout: post +title: Redaction annotation in Typescript PDF Viewer | Syncfusion +description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Redaction in JavaScript (ES6) PdfViewer + +Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", + toolbarSettings: { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Enables Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + } +}); + +viewer.appendTo('#pdfViewer'); +``` + +N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) + +## Add Redaction Annotations + +You can mark specific content for redaction using the toolbar or through code. + +Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. + +![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) + +## Delete Redaction Annotations + +Redaction annotations can be removed easily: + +- Click the **Delete** button on the toolbar, or +- Select the annotation and press the **Delete** key. + +![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) + +## Redact Entire Pages + +The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. + +![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) + +## Apply Redaction + +Once annotations are added, you can permanently apply them to the document. This action cannot be undone. + +Use the **Apply Redaction** button on the toolbar or call the API method: + +- The button is disabled until at least one redaction annotation exists. +- It becomes active when redaction annotations are present. + +![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) + +N> After redaction is applied, the original content cannot be recovered. + +## Comment Support + +Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction. + +Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments). + +## Import and Export Redaction Annotations + +You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions. + +For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation-ts). + +## See also + +* [Redaction UI interactions](./ui-interaction) +* [Redaction Programmatic support](./programmatic-support) +* [Redaction Toolbar](./toolbar) +* [Redaction Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/programmatic-support.md new file mode 100644 index 000000000..93ab9b618 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/programmatic-support.md @@ -0,0 +1,193 @@ +--- +layout: post +title: Redaction Programmatic support in TypeScript PDF Viewer | Syncfusion +description: Learn how to add, delete, update, and apply redaction annotations programmatically in the Syncfusion JavaScript (ES6/TypeScript) PDF Viewer. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Programmatic support for redaction in JavaScript (ES6) PdfViewer + +The Syncfusion JavaScript PDF Viewer (EJ2) provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", + toolbarSettings: { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Enables Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + } +}); + +viewer.appendTo('#pdfViewer'); +``` + +## Add redaction annotations programmatically + +You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. + +```html + +``` +```ts +document.getElementById('addRedactAnnot').addEventListener('click', () => { + viewer.annotation.addAnnotation("Redaction", { + bound: { x: 200, y: 480, width: 150, height: 75 }, + pageNumber: 1, + markerFillColor: '#0000FF', + markerBorderColor: 'white', + fillColor: 'red', + overlayText: 'Confidential', + fontColor: 'yellow', + fontFamily: 'Times New Roman', + fontSize: 8, + beforeRedactionsApplied: false + }); +}); +``` + +You can listen to the `annotationAdd` event to track when annotations are added: + +```ts +viewer.annotationAdd = (args) => { + console.log('Annotation added:', args); +}; +``` + +## Delete redaction annotations programmatically + +Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. + +```html + +``` +```ts +// Delete annotation by id +document.getElementById('deleteAnnotationbyId').addEventListener('click', () => { + viewer.annotationModule.deleteAnnotationById( + viewer.annotationCollection[0].annotationId + ); + }); +``` + +Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key. + +## Update redaction annotation properties programmatically + +You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color: + +```html + +``` +```ts +let editRedactAnnotation = document.getElementById('editRedactAnnotation'); +if (editRedactAnnotation) { +editRedactAnnotation.addEventListener('click', function () { + if (viewer) { + for (let i = 0; i < viewer.annotationCollection.length; i++) { + if (viewer.annotationCollection[i].subject === "Redaction") { + viewer.annotationCollection[i].overlayText= 'EditedAnnotation', + viewer.annotationCollection[i].markerFillColor= '#22FF00', + viewer.annotationCollection[i].markerBorderColor= '#000000', + viewer.annotationCollection[i].isRepeat= true, + viewer.annotationCollection[i].fillColor= '#F8F8F8', + viewer.annotationCollection[i].fontColor= '#333333', + viewer.annotationCollection[i].fontSize= 14, + viewer.annotationCollection[i].fontFamily= 'Symbol', + viewer.annotationCollection[i].textAlign= 'Right' + viewer.annotationCollection[i].beforeRedactionsApplied= false + viewer.annotation.editAnnotation(viewer.annotationCollection[i]); + } + } + } +}); +} +``` + +## Add page redactions programmatically + +Entire pages can be marked for redaction using the `addPageRedactions` method: + +```html + +``` +```ts +document.getElementById('addPageRedactions').addEventListener('click', () => { + viewer.annotation.addPageRedactions([1, 3, 5, 7]); // Redacts pages 1, 3, 5, and 7 +}); +``` + +## Apply redaction programmatically + +Once annotations are added, you can permanently apply them to the document using the `redact` method: + +```html + +``` +```ts +document.getElementById('redact').addEventListener('click', () => { + viewer.annotation.redact(); +}); +``` + +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. + +## Configure default redaction annotation properties + +You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically: + +```ts +viewer.redactionSettings= { + overlayText: 'Confidential', + markerFillColor: '#FF0000', + markerBorderColor: '#000000', + isRepeat: false, + fillColor: '#F8F8F8', + fontColor: '#333333', + fontSize: 14, + fontFamily: 'Symbol', + textAlign: 'Right' + }; +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## Redaction property panel + +The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. + +![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) + +## See also + +* [Overview of Redaction](./overview) +* [Redaction UI interactions](./ui-interaction) +* [Redaction Toolbar](./toolbar) +* [Reaction in Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/adding-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/adding-redaction-annotation.png new file mode 100644 index 000000000..b25b31126 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/adding-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/applied-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/applied-redaction-annot.png new file mode 100644 index 000000000..f6a6a2831 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/applied-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-button-mv.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-button-mv.png new file mode 100644 index 000000000..bd02a6bc3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-button-mv.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png new file mode 100644 index 000000000..0dea706e6 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-dialog.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-dialog.png new file mode 100644 index 000000000..0692de34e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/apply-redaction-dialog.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png new file mode 100644 index 000000000..8e061a883 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/moving-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/moving-redaction-annotation.png new file mode 100644 index 000000000..f7715e2d1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/moving-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-annot.png new file mode 100644 index 000000000..bf4804998 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png new file mode 100644 index 000000000..69658a826 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-panel.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-panel.png new file mode 100644 index 000000000..be68305ae Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/page-redaction-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-button-icon.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-button-icon.png new file mode 100644 index 000000000..954df393d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-button-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-page-icon.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-page-icon.png new file mode 100644 index 000000000..0c9dbed27 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-page-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-text-context-menu.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-text-context-menu.png new file mode 100644 index 000000000..a88985b39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redact-text-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-annot.png new file mode 100644 index 000000000..5e9cde040 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-delete-context-menu.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-delete-context-menu.png new file mode 100644 index 000000000..cd8f38b82 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-delete-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-delete-icon.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-delete-icon.png new file mode 100644 index 000000000..4026f8c49 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-delete-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-icon-toolbar.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-icon-toolbar.png new file mode 100644 index 000000000..6de03e8cc Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-icon-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-mobile-view.png new file mode 100644 index 000000000..2d9539200 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-mobile-view.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-properties-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-properties-annot.png new file mode 100644 index 000000000..079e65e59 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-properties-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png new file mode 100644 index 000000000..5a56fb1d5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-property-panel-icon.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-property-panel-icon.png new file mode 100644 index 000000000..3cc44eb64 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-property-panel-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png new file mode 100644 index 000000000..08d9a3a6a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/resizing-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/resizing-redaction-annotation.png new file mode 100644 index 000000000..846e301da Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/resizing-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png new file mode 100644 index 000000000..a78383509 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/show-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/show-redaction-toolbar.png new file mode 100644 index 000000000..94d75eb3b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/redaction-annotations-images/show-redaction-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/search-redact.md new file mode 100644 index 000000000..00e887d50 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/search-redact.md @@ -0,0 +1,114 @@ +--- +layout: post +title: Search text and redact in Typescript PDF Viewer | Syncfusion +description: Learn how to find text and add redaction annotations programmatically in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Search text and redact in JavaScript (ES6) PdfViewer + +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. + +N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +## Steps to add Redaction annotations on search Text Bounds + +**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample. + + +**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. + + +```html + + +``` +```ts +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, RedactionSettings } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); + +const viewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", +}); + +//Adding Redaction Tool in the toolbar +viewer.toolbarSettings.toolbarItems = ['OpenOption', 'UndoRedoTool', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'CommentTool', 'SubmitForm', 'AnnotationEditTool', 'RedactionEditTool', 'FormDesignerEditTool', 'SearchOption', 'PrintOption', 'DownloadOption']; +viewer.appendTo('#PdfViewer'); + +//EventListener to Search Text and Redact +document.getElementById('searchTextRedact')?.addEventListener('click', () => { + // Function to handle extractTextCompleted event + viewer.extractTextCompleted = args => { + const searchText = "syncfusion"; //Provide text to be redacted + + // Perform text search + const searchResults = viewer.textSearchModule.findText(searchText, false); + + if (!searchResults || searchResults.length === 0) { + console.warn("No matches found."); + return; + } + + // Loop through search results + for (let i = 0; i < searchResults.length; i++) { + const pageResult = searchResults[i]; + if (!pageResult || !pageResult.bounds || pageResult.bounds.length === 0) { continue; } + + // guard pageIndex (fixes TS18048) + if (pageResult.pageIndex == null) { continue; } + const pageNumber = pageResult.pageIndex + 1; + + // Loop through each bounding box of the found text + for (let j = 0; j < pageResult.bounds.length; j++) { + const bound = pageResult.bounds[j]; + + // Add a redaction annotation at the found text location + viewer.annotation.addAnnotation("Redaction", { + bound: { + x: (bound.x * 96) / 72, + y: (bound.y * 96) / 72, + width: (bound.width * 96) / 72, + height: (bound.height * 96) / 72 + }, + pageNumber: pageNumber, + overlayText: "Confidential", + fillColor: "#00FF40FF", + fontColor: "#333333", + fontSize: 12, + fontFamily: "Arial", + // removed textAlign property (fixes TS2353) + markerFillColor: "#FF0000", + markerBorderColor: "#000000" + }as RedactionSettings); + } + } + }; + }); + +//EventListener to Apply Redaction +document.getElementById("applyRedaction")?.addEventListener('click', ()=>{ + viewer.annotation.redact(); +}); +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## Notes +- Ensure the PDF is fully loaded before triggering extraction and search. +- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates. +- Customize overlay text, colors, and typography as needed. +- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [UI interactions](./ui-interaction) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/toolbar.md new file mode 100644 index 000000000..6aa0add2d --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/toolbar.md @@ -0,0 +1,99 @@ +--- +layout: post +title: Customize the redaction toolbar in TypeScript PDF Viewer | Syncfusion +description: Learn how to customize the redaction toolbar in the Syncfusion TypeScript PDF Viewer by showing or hiding default items. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction toolbar customization in TypeScript + +The redaction toolbar in the Syncfusion JavaScript (ES6/TypeScript) PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", + toolbarSettings: { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Enables Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + } +}); + +viewer.appendTo('#pdfViewer'); +``` + +Refer to the following image for the toolbar view: + +![Enable redaction toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +## Show or hide the redaction toolbar + +You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. + +### Display the redaction toolbar using the toolbar icon + +When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. + +![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +### Display the redaction toolbar programmatically + +You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. + +The following example demonstrates toggling the redaction toolbar programmatically: + + +```html + + + +``` +```ts +document.getElementById('showRedactionToolbar').addEventListener('click', () => { + viewer.toolbar.showRedactionToolbar(true); // Show the redaction toolbar +}); + +document.getElementById('hideRedactionToolbar').addEventListener('click', () => { + viewer.toolbar.showRedactionToolbar(false); // Hide the redaction toolbar +}); +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +Refer to the following image for details: + +![Programmatically show the Redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) + +## See also + +* [Adding the redaction annotation in PDF viewer](../redaction/overview) +* [UI interactions](./ui-interaction) +* [Programmatic support](./programmatic-support) +* [Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/ui-interaction.md new file mode 100644 index 000000000..e3aa8797d --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/ui-interaction.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Redaction UI interactions in TypeScript PDF Viewer | Syncfusion +description: Learn about UI interactions in Redaction annotations of the Syncfusion JavaScript (ES6) PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction UI interactions in JavaScript (ES6) PdfViewer + +## Add redaction annotations from the toolbar + +Use the redaction tool in the toolbar to draw over content that should be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties. + +![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) + +#### Redaction annotations are interactive + +* **Movable** – Drag and reposition the annotation within the same page. +![Moving a redaction annotation](redaction-annotations-images/moving-redaction-annotation.png) + +* **Resizable** – Resize the annotation to cover the required area. +![Resizing a redaction annotation](redaction-annotations-images/resizing-redaction-annotation.png) + +N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see the [Toolbar customization](../toolbar). + +## Add redaction annotations using the context menu + +In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. + +![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) + +## Update redaction properties + +After adding a redaction annotation, you can update its properties through the property panel or programmatically. + +### Update using the property panel + +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. + +The property panel can be opened in two ways: + +* By clicking the **redaction property panel** icon in the toolbar. +![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) + +* By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. +![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) + +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + +## Delete redaction annotations + +Delete redaction annotations using any of the following: + +* **Right-click and select Delete** from the context menu. + +![Context menu showing Delete for a redaction](redaction-annotations-images/redaction-delete-context-menu.png) + +* **Click the Delete button** on the toolbar. +![Toolbar delete icon for redaction](redaction-annotations-images/redaction-delete-icon.png) + +* **Press the Delete key** after selecting the annotation. + +## Redact pages using the UI + +Entire pages can be marked for redaction using the **Redact Pages** option in the toolbar. Clicking the icon opens a dialog with options: + +* **Current Page** – Redacts the page currently in view. +* **Odd Pages Only** – Redacts all odd‑numbered pages. +* **Even Pages Only** – Redacts all even‑numbered pages. +* **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. + +After choosing the range, click **Save** to apply redaction marks to the selected pages. + +![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) + +## Apply redaction from the toolbar + +The **Apply Redaction** button permanently removes all marked content from the document. + +* The button is disabled when no redaction annotations exist. +* It automatically enables once at least one annotation is present. + +![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) + +N> Redaction is permanent. Once applied, the original content cannot be restored. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md new file mode 100644 index 000000000..a8b45ca05 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md @@ -0,0 +1,366 @@ +--- +layout: post +title: Create form fields in the TypeScript PDF Viewer | Syncfusion +description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Create form fields in TypeScript PDF Viewer + +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. You can also create and manage form fields programmatically using the API. + +The PDF Viewer supports the following form field types: + +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field + +## Add the form field dynamically + +Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference. + +![Add a form field using the toolbar](../../images/addformfield.gif) + +## Drag the form field + +Drag the selected form field to reposition it within the PDF document. See the following GIF for reference. + +![Drag a selected form field in the PDF Viewer](../../images/dragformfield.gif) + +## Resize the form field + +Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference. + +![Resize a selected form field in the PDF Viewer](../../images/resizeformfield.gif) + +## Textbox + +### Add Textbox + +1) Open the Form Designer toolbar. +2) Select Textbox, then click/tap on the page to place it. +3) Resize/move as needed and set properties in the property panel. + +![Textbox added from UI](../../images/ui-textbox.png) + +### Add Textbox Programmatically + +To add a Textbox programmatically, call addFormField with type 'Textbox' and pass as `TextFieldSettings` object. The example below adds a textbox when the document loads. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'First Name', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 } + } as TextFieldSettings); +}; +``` + +## Password + +### Add Password + +1) Open the Form Designer toolbar. +2) Select Password, then place it on the page. +3) Configure tooltip, required, max length, etc. + +![Password added from UI](../../images/ui-password.png) + +### Add Password Programmatically + +To add a Password field programmatically, call addFormField with type 'Password' and pass as `PasswordFieldSettings` object. The example below adds the field when the document loads. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + pdfviewer.formDesignerModule.addFormField('Password', { + name: 'Account Password', + bounds: { X: 148, Y: 270, Width: 180, Height: 24 } + } as PasswordFieldSettings); +}; +``` + +## CheckBox + +### Add CheckBox + +1) Choose CheckBox in the Form Designer toolbar. +2) Click on the page to place, duplicate for multiple options if needed. +3) Use property panel to set IsChecked, tooltip, and appearance. + +![CheckBox added from UI](../../images/ui-checkbox.png) + +### Add CheckBox Programmatically + +To add a CheckBox programmatically, call `addFormField` with type 'CheckBox' and pass as `CheckBoxFieldSettings` object. Set isChecked and bounds as needed. The example below adds the field when the document loads. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + pdfviewer.formDesignerModule.addFormField('CheckBox', { + name: 'Subscribe', + isChecked: false, + bounds: { X: 56, Y: 664, Width: 20, Height: 20 } + } as CheckBoxFieldSettings); +}; +``` + +## RadioButton + +### Add RadioButton + +1) Select RadioButton in the Form Designer toolbar. +2) Place buttons sharing the same Name to create a group (e.g., Gender). +3) Use property panel to set selection, colors, and tooltip. + +![Radio buttons added from UI](../../images/ui-radiobutton.png) + +### Add RadioButton Programmatically + +To add radio buttons programmatically, call addFormField with type 'RadioButton' and pass as `RadioButtonFieldSettings` object. Use the same name to group buttons. The example below adds two radio buttons when the document loads. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + // Group by name: 'Gender' + pdfviewer.formDesignerModule.addFormField('RadioButton', { + name: 'Gender', + isSelected: false, + bounds: { X: 148, Y: 289, Width: 18, Height: 18 } + } as RadioButtonFieldSettings); + + pdfviewer.formDesignerModule.addFormField('RadioButton', { + name: 'Gender', + isSelected: false, + bounds: { X: 292, Y: 289, Width: 18, Height: 18 } + } as RadioButtonFieldSettings); +}; +``` + +## ListBox + +### Add ListBox + +1) Choose ListBox in the Form Designer toolbar. +2) Place the field and add items in the property panel. +3) Configure font, size, and selection behavior. + +![ListBox added from UI](../../images/ui-listbox.png) + +### Add ListBox Programmatically + +To add a ListBox programmatically, call `addFormField` with type 'ListBox' and pass as `ListBoxFieldSettings` object, including an options array for the items. The example below adds the field when the document loads. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, ListBoxFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + const options = [ + { itemName: 'Item 1', itemValue: 'item1' }, + { itemName: 'Item 2', itemValue: 'item2' }, + { itemName: 'Item 3', itemValue: 'item3' } + ]; + + pdfviewer.formDesignerModule.addFormField('ListBox', { + name: 'States', + options, + bounds: { X: 380, Y: 320, Width: 150, Height: 60 } + } as ListBoxFieldSettings); +}; +``` + +## DropDown + +### Add DropDown + +1) Select DropDown in the Form Designer toolbar. +2) Place the field, then add items via the property panel. +3) Adjust appearance and default value. + +![DropDown added from UI](../../images/ui-dropdown.png) + +### Add DropDown Programmatically + +To add a DropDown programmatically, call addFormField with type 'DropDown' and pass a `DropdownFieldSettings` object with an options array. The example below adds the field when the document loads. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + const options = [ + { itemName: 'Item 1', itemValue: 'item1' }, + { itemName: 'Item 2', itemValue: 'item2' }, + { itemName: 'Item 3', itemValue: 'item3' } + ]; + + pdfviewer.formDesignerModule.addFormField('DropDown', { + name: 'Country', + options, + bounds: { X: 560, Y: 320, Width: 150, Height: 24 } + } as DropdownFieldSettings); +}; +``` + +## Signature field + +### Add Signature field + +1) Select Signature field in the Form Designer toolbar. +2) Place the field where the signer should sign. +3) Configure indicator text, thickness, tooltip, and required state. + +![Signature field added from UI](../../images/ui-signature.png) + +### Add Signature field Programmatically + +To add a Signature field programmatically, call addFormField with type 'SignatureField' and pass a `SignatureFieldSettings` object. The example below adds the field when the document loads. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + pdfviewer.formDesignerModule.addFormField('SignatureField', { + name: 'Sign', + bounds: { X: 57, Y: 923, Width: 200, Height: 43 } + } as SignatureFieldSettings); +}; +``` + +## Initial field + +### Add Initial field + +1) Select Initial field in the Form Designer toolbar. +2) Place the field where initials are required. +3) Configure indicator text, tooltip, and required state. + +![Initial field added from UI](../../images/ui-initial.png) + +### Add Initial field Programmatically + +To add an Initial field programmatically, call addFormField with type 'InitialField' and pass an `InitialFieldSettings` object. The example below adds the field when the document loads. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + pdfviewer.formDesignerModule.addFormField('InitialField', { + name: 'Initial', + bounds: { X: 148, Y: 466, Width: 200, Height: 43 } + } as InitialFieldSettings); +}; +``` + +## setFormFieldMode programmatically + +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. + +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +pdfviewer.appendTo('#PdfViewer'); + +document.getElementById('addPasswordField').addEventListener('click', function () { + pdfviewer.formDesignerModule.setFormFieldMode("Password"); + //In setFormFieldModule-You can pass the required field to be added like Textbox, Checkbox etc., +}); +``` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See Also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Edit form fields](./edit-formfields) +- [Style form fields](./style-formfields) +- [Remove form fields](./remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Form Fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md new file mode 100644 index 000000000..11e778591 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md @@ -0,0 +1,419 @@ +--- +layout: post +title: Edit form fields in the TypeScript PDF Viewer | Syncfusion +description: Learn how to edit PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Edit form fields in TypeScript PDF Viewer + +The PDF Viewer component allows user to edit PDF form fields using the Form Designer UI and update them programmatically. + +The PDF Viewer supports editing these field types: + +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field + +## Edit with the UI + +- Select a form field and Right-click to open the Properties panel from the context menu to change its settings. + +![Edit FormFields](../../images/formFields_properties.png) + +- Drag to move; use resize handles to resize. +- Use the toolbar to toggle field mode and add new fields. + +## Textbox + +### Edit Textbox + +1) Right-click the textbox → Properties. +2) Change value, font, size, colors, border thickness, alignment, max length, multiline. + +![Textbox edited from UI](../../images/ui-textbox-edit.png) + +### Edit Textbox programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the textbox, and applies value, typography, colors, alignment, and border thickness updates. + +```html + +``` + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FontStyle, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +(document.getElementById('editTextbox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name (Here field name is FIrst Name) + const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly + if (field) { + // Update textbox field styling and value + pdfviewer.formDesignerModule.updateFormField(field, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + fontStyle: FontStyle.None, + color: 'black', + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + alignment: 'Left', + maxLength: 50 + } as TextFieldSettings); + } +}); +``` + +## Password + +### Edit Password + +1) Right-click the password field → Properties. +2) Change tooltip, required, max length, font, and appearance. + +![Password edited from UI](../../images/ui-password-edit.png) + +### Edit Password programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the password field, and applies tooltip, validation flags, typography, colors, alignment, max length, and border thickness updates. + +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +(document.getElementById('editPasswordBox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the password field by name (Here field name is Password) + const field = fields.find((f: any) => f.name === 'Password'); + if (field) { + // Update password field properties + pdfviewer.formDesignerModule.updateFormField(field, { + tooltip: 'Enter your password', + isReadOnly: false, + isRequired: true, + isPrint: true, + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + maxLength: 20, + thickness: 1 + } as PasswordFieldSettings); + } +}); +``` + +## CheckBox + +### Edit CheckBox + +1) Right-click the checkbox → Properties. +2) Toggle checked state, change border/background colors and thickness. + +![CheckBox edited from UI](../../images/ui-checkbox-edit.png) + +### Edit CheckBox programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the checkbox field, and applies checked state, tooltip, colors, and border thickness updates. + +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +(document.getElementById('editCheckbox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the checkbox field by name (Here field name is Subscribe) + const cb = fields.find((f: any) => f.name === 'Subscribe'); + if (cb) { + // Update checkbox field properties and state + pdfviewer.formDesignerModule.updateFormField(cb, { + isChecked: true, + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + tooltip: 'Subscribe to newsletter' + } as CheckBoxFieldSettings); + } +}); +``` + +## RadioButton + +### Edit RadioButton + +1) Right-click a radio button → Properties. +2) Set selected state, colors, and thickness. Buttons with the same Name form a group; only one can be selected. + +![RadioButton edited from UI](../../images/ui-radiobutton-edit.png) + +### Edit RadioButton programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the radio button group, and applies selection state and border appearance updates. + +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +(document.getElementById('editRadio') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Filter the radio button group by name (Here group name is Gender) + const genderRadios = fields.filter((f: any) => f.name === 'Gender'); + if (genderRadios[1]) { + // Update radio button selection and appearance + pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false } as RadioButtonFieldSettings); + pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings); + } +}); +``` + +## ListBox + +### Edit ListBox + +1) Right-click the list box → Properties. +2) Add/remove items, set selection, and adjust fonts and colors. + +![ListBox edited from UI](../../images/ui-listbox-edit.png) + +### Edit ListBox programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the list box, and applies options, selection, typography, colors, and border appearance updates. + +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +(document.getElementById('editListBox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the listbox field by name (Here field name is States) + const lb = fields.find((f: any) => f.name === 'States'); + if (lb) { + // Update listbox options, selection, and appearance + pdfviewer.formDesignerModule.updateFormField(lb, { + options: [ + { itemName: 'Alabama', itemValue: 'AL' }, + { itemName: 'Alaska', itemValue: 'AK' }, + { itemName: 'Arizona', itemValue: 'AZ' } + ], + value: 'AZ', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white' + } as unknown as TextFieldSettings); + } +}); +``` + +## DropDown + +### Edit DropDown + +1) Right-click the dropdown → Properties. +2) Add/remove items, set default value, and adjust appearance. + +![DropDown edited from UI](../../images/ui-dropdown-edit.png) + +### Edit DropDown programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the dropdown, and applies items, value, typography, colors, and border appearance updates. + +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +(document.getElementById('editDropDown') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the dropdown field by name (Here field name is Country) + const dd = fields.find((f: any) => f.name === 'Country'); + if (dd) { + // Update dropdown items, value, and appearance + pdfviewer.formDesignerModule.updateFormField(dd, { + options: [ + { itemName: 'USA', itemValue: 'US' }, + { itemName: 'Canada', itemValue: 'CA' }, + { itemName: 'Mexico', itemValue: 'MX' } + ], + value: 'US', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white' + } as DropdownFieldSettings); + } +}); +``` + +## Signature field + +### Edit Signature field + +1) Right-click the signature field → Properties. +2) Change tooltip, thickness, indicator text, required/visibility states. + +![Signature field edited from UI](../../images/ui-signature-edit.png) + +### Edit Signature field programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the signature field, and applies tooltip, required/print flags, colors, and border thickness updates. + +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +(document.getElementById('editSignature') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the signature field by name (Here field name is Sign) + const sig = fields.find((f: any) => f.name === 'Sign'); + if (sig) { + // Update signature field properties + pdfviewer.formDesignerModule.updateFormField(sig, { + tooltip: 'Please sign here', + thickness: 3, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + } as SignatureFieldSettings); + } +}); +``` + +## Initial field + +### Edit Initial field + +1) Right-click the initial field → Properties. +2) Change tooltip, indicator text, thickness, and required/visibility states. + +![Initial field edited from UI](../../images/ui-initial-edit.png) + +### Edit Initial field programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the initial field, and applies tooltip, required/print flags, colors, and border thickness updates. + +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +(document.getElementById('editInitial') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the initial field by name (Here field name is Initial) + const init = fields.find((f: any) => f.name === 'Initial'); + if (init) { + // Update initial field properties + pdfviewer.formDesignerModule.updateFormField(init, { + tooltip: 'Add your initials', + thickness: 2, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + } as InitialFieldSettings); + } +}); +``` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Create form fields](./create-formfields) +- [Remove form Fields](./remove-formfields) +- [Style form fields](./style-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md new file mode 100644 index 000000000..388659e91 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md @@ -0,0 +1,104 @@ +--- +layout: post +title: Remove form fields in the TypeScript PDF Viewer component | Syncfusion +description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Remove form fields in TypeScript PDF Viewer control + +The PDF Viewer component allows users to remove PDF form fields using the Form Designer UI and programmatically. + +## Remove form fields using the UI + +You can remove designed form fields directly from the Form Designer toolbar. + +Steps: + +1) Select the target form field on the page. +2) Click the Delete Form Field icon on the Form Designer toolbar. +3) Alternatively, press the `Delete key` after selecting one or more fields. + +![Form Designer toolbar with Delete icon](../../images/ui-del-formfields.png) + +## Remove form fields programmatically + +Use the `deleteFormField` method to remove form fields programmatically. Retrieve the target field from the `formFieldCollections` property (by object or ID) and pass it to `deleteFormField`. + +The following example adds three fields on document load (Textbox, Password, and Signature) and shows two ways to remove them using buttons. + +```html + + +
    +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, +TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, +TextSelection, Annotation, FormDesigner, FormFields); + +const pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' +}); + +// Optional server-backed +// pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; + +pdfviewer.appendTo('#PdfViewer'); + +// Add form fields on document load +pdfviewer.documentLoad = () => { + pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'First Name', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 } + } as TextFieldSettings); + + pdfviewer.formDesignerModule.addFormField('Password', { + name: 'Password', + bounds: { X: 338, Y: 229, Width: 150, Height: 24 } + } as TextFieldSettings); + + pdfviewer.formDesignerModule.addFormField('SignatureField', { + name: 'Sign Here', + bounds: { X: 146, Y: 280, Width: 200, Height: 43 } + } as SignatureFieldSettings); +}; + +// Delete all added form fields on button click +(document.getElementById('deleteAllFields') as HTMLButtonElement).addEventListener('click', () => { + const fields = [...pdfviewer.formFieldCollections]; // clone to avoid mutation issues + fields.forEach(field => pdfviewer.formDesignerModule.deleteFormField(field)); +}); + +// Delete by ID on button click (example uses the first field's ID) +(document.getElementById('deleteById') as HTMLButtonElement).addEventListener('click', () => { + if (pdfviewer.formFieldCollections.length > 0) { + const id = pdfviewer.formFieldCollections[0].id; + if (id) { + pdfviewer.formDesignerModule.deleteFormField(id); + } + } +}); +``` + +N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: +`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Create form fields](./create-formfields) +- [Edit form fields](./edit-formfields) +- [Style form fields](./style-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/style-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/style-formfields.md new file mode 100644 index 000000000..8899c1edc --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/style-formfields.md @@ -0,0 +1,548 @@ +--- +layout: post +title: Style form fields in the TypeScript PDF Viewer | Syncfusion +description: Learn how to configure typography, colors, borders, alignment, and other style settings for PDF form fields using the UI and programmatically. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Style form fields in TypeScript PDF Viewer + +The PDF Viewer component allows users to style and customize the appearance of PDF form fields using the Form Designer UI and programmatically. User can also set the default settings applied when fields are added from the Form Designer toolbar. + +Supported field types: + +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field + +## Textbox + +### Style Textbox + +Use the Properties panel to adjust the value, font family/size/style, text color, border and background colors, border thickness, text alignment, and maximum length. + +![Textbox style from UI](../../images/ui-textbox-style.png) + +### Style Textbox programmatically + +Use `updateFormField` to modify a textbox’s appearance and behavior on a button click. The example below finds the field by name (or falls back to the first field) and updates value, typography, colors, alignment, and border thickness. + +```html + +``` + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FontStyle, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +// Update textbox styling on button click +(document.getElementById('updateTextboxStyle') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name + const tb = fields.find((f: any) => f.name === 'First Name') || fields[0]; + if (tb) { + // Update textbox field styling + pdfviewer.formDesignerModule.updateFormField(tb, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + fontStyle: FontStyle.None, + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + thickness: 2 + } as TextFieldSettings); + } +}); +``` + +### Default Textbox settings + +The PDF Viewer exposes a default settings APIs for form fields. Use the [TextFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#textfieldsettings) to preconfigure TextBox properties applied when adding fields from the Form Designer toolbar. + +```ts +// Apply as defaults for Textbox added from toolbar +pdfviewer.textFieldSettings = { + name: 'Textbox', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'Textbox', + thickness: 4, + value: 'Textbox', + fontFamily: 'Courier', + fontSize: 10, + fontStyle: 'None', + color: 'black', + borderColor: 'black', + backgroundColor: 'White', + alignment: 'Left', + maxLength: 0, + isMultiline: false +}; +``` + +## Password + +### Style Password + +Use the Properties panel to configure the tooltip, font family and size, masked text color, border and background colors, text alignment, maximum length, and border thickness. + +![Password style from UI](../../images/ui-password-style.png) + +### Style Password programmatically + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +// Retrieve form fields collection and find the password field by name +const pw = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Password'); +if (pw) { + // Update password field styling + pdfviewer.formDesignerModule.updateFormField(pw, { + tooltip: 'Enter password', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + maxLength: 20, + thickness: 1 + } as PasswordFieldSettings); +} +``` + +### Default Password settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [PasswordFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#passwordfieldsettings) to preconfigure Password properties applied when adding fields from the Form Designer toolbar. + +```ts +pdfviewer.passwordFieldSettings = { + name: 'Password', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'Password', + thickness: 4, + value: 'Password', + fontFamily: 'Courier', + fontSize: 10, + fontStyle: 'None', + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + maxLength: 0 +}; +``` + +## CheckBox + +### Style CheckBox + +Use the Properties panel to toggle the checked state and customize border and background colors, and border thickness. + +![CheckBox style from UI](../../images/ui-checkbox-style.png) + +### Style CheckBox programmatically + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +// Retrieve form fields collection and find the checkbox field by name +const cb = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Subscribe'); +if (cb) { + // Update checkbox field styling + pdfviewer.formDesignerModule.updateFormField(cb, { + isChecked: true, + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + tooltip: 'Subscribe' + } as CheckBoxFieldSettings); +} +``` + +### Default CheckBox settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [CheckBoxFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#checkboxfieldsettings) to preconfigure CheckBox properties applied when adding fields from the Form Designer toolbar. + +```ts +pdfviewer.checkBoxFieldSettings = { + name: 'CheckBox', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'CheckBox', + thickness: 4, + isChecked: true, + backgroundColor: 'white', + borderColor: 'black' +}; +``` + +## RadioButton + +### Style RadioButton + +Use the Properties panel to set the selected state, border and background colors, and border thickness. Radio buttons with the same name are grouped automatically. + +![RadioButton style from UI](../../images/ui-radiobutton-style.png) + +### Style RadioButton programmatically + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +// Retrieve all radio buttons by group name +const radios = pdfviewer.formFieldCollections.filter((f: any) => f.name === 'Gender'); +if (radios.length > 1) { + // Deselect first option + pdfviewer.formDesignerModule.updateFormField(radios[0], { isSelected: false } as RadioButtonFieldSettings); + // Select second option and style + pdfviewer.formDesignerModule.updateFormField(radios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings); +} +``` + +### Default RadioButton settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [RadioButtonFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings) to preconfigure RadioButton properties applied when adding fields from the Form Designer toolbar. + +```ts +pdfviewer.radioButtonFieldSettings = { + name: 'RadioButton', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'RadioButton', + thickness: 4, + isSelected: true, + backgroundColor: 'white', + borderColor: 'black', + value: 'RadioButton' +}; +``` + +## ListBox + +### Style ListBox + +Use the Properties panel to add or remove items, set the selected value, and adjust typography and colors. + +![ListBox style from UI](../../images/ui-listbox-style.png) + +### Style ListBox programmatically + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +// Retrieve form fields collection and find the list box field by name +const lb = pdfviewer.formFieldCollections.find((f: any) => f.name === 'States'); +if (lb) { + // Update list box items, value, and styling + pdfviewer.formDesignerModule.updateFormField(lb, { + options: [ + { itemName: 'Item 1', itemValue: 'item1' }, + { itemName: 'Item 2', itemValue: 'item2' }, + { itemName: 'Item 3', itemValue: 'item3' } + ], + value: 'item2', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white' + } as unknown as TextFieldSettings); +} +``` + +### Default ListBox settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [listBoxFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#listboxfieldsettings) to preconfigure ListBox properties applied when adding fields from the Form Designer toolbar. + +```ts +const customOptions = [ + { itemName: 'item1', itemValue: 'item1' }, + { itemName: 'item2', itemValue: 'item2' }, + { itemName: 'item3', itemValue: 'item3' } +]; + +pdfviewer.listBoxFieldSettings = { + name: 'ListBox', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'ListBox', + thickness: 4, + value: 'ListBox', + fontFamily: 'Courier', + fontSize: 10, + fontStyle: 'None', + color: 'black', + borderColor: 'black', + backgroundColor: 'White', + alignment: 'Left', + options: customOptions +}; +``` + +## DropDown + +### Style DropDown + +Use the Properties panel to add or remove items, set the default value, and adjust typography and colors. + +![DropDown style from UI](../../images/ui-dropdown-style.png) + +### Style DropDown programmatically + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +// Retrieve form fields collection and find the dropdown field by name +const dd = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Country'); +if (dd) { + // Update dropdown items, value, and styling + pdfviewer.formDesignerModule.updateFormField(dd, { + options: [ + { itemName: 'USA', itemValue: 'US' }, + { itemName: 'Canada', itemValue: 'CA' }, + { itemName: 'Mexico', itemValue: 'MX' } + ], + value: 'US', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white' + } as DropdownFieldSettings); +} +``` + +### Default DropDown settings + +The PDF Viewer exposes default settings APIs for form fields. DropDown uses [DropDownFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#DropDownfieldsettings) to preconfigure properties applied when adding fields from the Form Designer toolbar. + +```ts +const ddOptions = [ + { itemName: 'item1', itemValue: 'item1' }, + { itemName: 'item2', itemValue: 'item2' }, + { itemName: 'item3', itemValue: 'item3' } +]; + +// DropDown uses listBoxFieldSettings for defaults +pdfviewer.DropdownFieldSettings = { + name: 'DropDown', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'DropDown', + thickness: 4, + value: 'DropDown', + fontFamily: 'Courier', + fontSize: 10, + fontStyle: 'None', + color: 'black', + borderColor: 'black', + backgroundColor: 'White', + alignment: 'Left', + options: ddOptions +}; +``` + +## Signature field + +### Style Signature field + +Use the Properties panel to configure the tooltip, indicator text, dialog display modes, border thickness, required setting, and colors. + +![Signature style from UI](../../images/ui-signature-style.png) + +### Style Signature field programmatically + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +// Retrieve form fields collection and find the signature field by name +const sig = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Sign'); +if (sig) { + // Update signature field settings + pdfviewer.formDesignerModule.updateFormField(sig, { + tooltip: 'Please sign here', + thickness: 3, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + } as unknown as SignatureFieldSettings); +} +``` + +### Default Signature field settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [SignatureFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#signaturefieldsettings) to preconfigure Signature properties applied when adding fields from the Form Designer toolbar. + +```ts +pdfviewer.signatureFieldSettings = { + name: 'Signature', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'Signature', + thickness: 4, + signatureDialogSettings: { + displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text, + hideSaveSignature: false + }, + signatureIndicatorSettings: { + opacity: 1, + backgroundColor: '#237ba2', + height: 50, + fontSize: 15, + text: 'Signature Field', + color: 'white' + } +}; +``` + +## Initial field + +### Style Initial field + +Use the Properties panel to configure the tooltip, indicator text, dialog display modes, border thickness, and colors. + +![Initial style from UI](../../images/ui-initial-style.png) + +### Style Initial field programmatically + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +const pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +// Retrieve form fields collection and find the initial field by name +const init = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Initial'); +if (init) { + // Update initial field settings + pdfviewer.formDesignerModule.updateFormField(init, { + tooltip: 'Add your initials', + thickness: 2, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + } as unknown as InitialFieldSettings); +} +``` + +### Default Initial field settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [InitialFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#initialfieldsettings) to preconfigure Initial properties applied when adding fields from the Form Designer toolbar. + +```ts +pdfviewer.initialFieldSettings = { + name: 'Initial', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'Initial', + thickness: 4, + initialIndicatorSettings: { + opacity: 1, + backgroundColor: '#237ba2', + height: 50, + fontSize: 15, + text: 'Initial Field', + color: 'white' + }, + initialDialogSettings: { + displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text, + hideSaveSignature: false + } +}; +``` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Create form fields](./create-formfields) +- [Edit form fields](./edit-formfields) +- [Remove form fields](./remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-programmatically.md deleted file mode 100644 index cb9a6291d..000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-programmatically.md +++ /dev/null @@ -1,1138 +0,0 @@ ---- -layout: post -title: Create form fields in the TypeScript PDF Viewer component | Syncfusion -description: Learn how to add, update, delete, save, print, validate, and import/export form fields in the Syncfusion TypeScript PDF Viewer component. -platform: document-processing -control: PDF Viewer -documentation: ug ---- - -# Create programmatically in TypeScript PDF Viewer control - -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 -- Signature field -- Initial field - -## Add a form field to PDF document programmatically - -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 ts tabtitle="index.ts" %} -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView, - TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, RadioButtonFieldSettings, - CheckBoxFieldSettings, InitialFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, Annotation, FormDesigner, FormFields ); - -let pdfviewer: PdfViewer = new PdfViewer({ - documentPath:'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = function (args) { - pdfviewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 }as TextFieldSettings }); - pdfviewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 }as TextFieldSettings}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'Last Name',bounds: { X: 530, Y: 229, Width: 150, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('RadioButton', {bounds: { X: 148, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false}as RadioButtonFieldSettings); - pdfviewer.formDesignerModule.addFormField('RadioButton', {bounds: { X: 292, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,}as RadioButtonFieldSettings); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Month',bounds: { X: 146, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Date',bounds: { X: 193, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Year',bounds: { X: 242, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('InitialField', {name: 'Agree',bounds: { X: 148, Y: 408, Width: 200, Height: 43 },} as InitialFieldSettings); - pdfviewer.formDesignerModule.addFormField('InitialField', {name: 'Do Not Agree',bounds: { X: 148, Y: 466, Width: 200, Height: 43 },} as InitialFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Text Message',bounds: { X: 56, Y: 664, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Email',bounds: { X: 242, Y: 664, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Appointment Reminder',bounds: { X: 56, Y: 740, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Request for Customerservice',bounds: { X: 56, Y: 778, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Information Billing',bounds: { X: 290, Y: 740, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'My Email',bounds: { X: 146, Y: 850, Width: 200, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'My Phone',bounds: { X: 482, Y: 850, Width: 200, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('SignatureField', {name: 'Sign',bounds: { X: 57, Y: 923, Width: 200, Height: 43 },}as SignatureFieldSettings); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Month',bounds: { X: 386, Y: 923, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Date',bounds: { X: 434, Y: 923, Width: 35, Height: 24 }as TextFieldSettings} ); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Year',bounds: { X: 482, Y: 923, Width: 35, Height: 24 }as TextFieldSettings,}); -} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - -
    Loading....
    -
    -
    -
    - - -{% endhighlight %} -{% endtabs %} - -N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: -`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` - -{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/addformfield-cs3/index.html" %} - -## Edit/Update form field programmatically - -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 ts tabtitle="index.ts" %} -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView, - TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, - RadioButtonFieldSettings, CheckBoxFieldSettings, InitialFieldSettings, SignatureFieldSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation, FormDesigner, FormFields); - -let pdfviewer: PdfViewer = new PdfViewer({ - documentPath:'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = function (args) { -pdfviewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 }as TextFieldSettings }); -pdfviewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 }as TextFieldSettings}); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'Last Name',bounds: { X: 530, Y: 229, Width: 150, Height: 24 }as TextFieldSettings,}); -pdfviewer.formDesignerModule.addFormField('RadioButton', {bounds: { X: 148, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false}as RadioButtonFieldSettings); -pdfviewer.formDesignerModule.addFormField('RadioButton', {bounds: { X: 292, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,}as RadioButtonFieldSettings); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Month',bounds: { X: 146, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Date',bounds: { X: 193, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Year',bounds: { X: 242, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); -pdfviewer.formDesignerModule.addFormField('InitialField', {name: 'Agree',bounds: { X: 148, Y: 408, Width: 200, Height: 43 },} as InitialFieldSettings); -pdfviewer.formDesignerModule.addFormField('InitialField', {name: 'Do Not Agree',bounds: { X: 148, Y: 466, Width: 200, Height: 43 },} as InitialFieldSettings); -pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Text Message',bounds: { X: 56, Y: 664, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); -pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Email',bounds: { X: 242, Y: 664, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); -pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Appointment Reminder',bounds: { X: 56, Y: 740, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); -pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Request for Customerservice',bounds: { X: 56, Y: 778, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); -pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Information Billing',bounds: { X: 290, Y: 740, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'My Email',bounds: { X: 146, Y: 850, Width: 200, Height: 24 }as TextFieldSettings,}); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'My Phone',bounds: { X: 482, Y: 850, Width: 200, Height: 24 }as TextFieldSettings,}); -pdfviewer.formDesignerModule.addFormField('SignatureField', {name: 'Sign',bounds: { X: 57, Y: 923, Width: 200, Height: 43 },}as SignatureFieldSettings); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Month',bounds: { X: 386, Y: 923, Width: 35, Height: 24 }as TextFieldSettings,}); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Date',bounds: { X: 434, Y: 923, Width: 35, Height: 24 }as TextFieldSettings} ); -pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Year',bounds: { X: 482, Y: 923, Width: 35, Height: 24 }as TextFieldSettings,}); -pdfviewer.formDesignerModule.updateFormField(pdfviewer.formFieldCollections[0], { backgroundColor: 'red' } as TextFieldSettings); -} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - -
    Loading....
    -
    -
    -
    - - -{% endhighlight %} -{% endtabs %} - -N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: -`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` - -{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/updateformfield-cs3/index.html" %} - -## Delete form field programmatically - -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 ts tabtitle="index.ts" %} -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView, - TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, - RadioButtonFieldSettings, CheckBoxFieldSettings, InitialFieldSettings, SignatureFieldSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation, FormDesigner, FormFields); - -let pdfviewer: PdfViewer = new PdfViewer({ - documentPath:'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = function (args) { - pdfviewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 }as TextFieldSettings }); - pdfviewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 }as TextFieldSettings}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'Last Name',bounds: { X: 530, Y: 229, Width: 150, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('RadioButton', {bounds: { X: 148, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false}as RadioButtonFieldSettings); - pdfviewer.formDesignerModule.addFormField('RadioButton', {bounds: { X: 292, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,}as RadioButtonFieldSettings); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Month',bounds: { X: 146, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Date',bounds: { X: 193, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Year',bounds: { X: 242, Y: 320, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('InitialField', {name: 'Agree',bounds: { X: 148, Y: 408, Width: 200, Height: 43 },} as InitialFieldSettings); - pdfviewer.formDesignerModule.addFormField('InitialField', {name: 'Do Not Agree',bounds: { X: 148, Y: 466, Width: 200, Height: 43 },} as InitialFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Text Message',bounds: { X: 56, Y: 664, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Email',bounds: { X: 242, Y: 664, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Appointment Reminder',bounds: { X: 56, Y: 740, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Request for Customerservice',bounds: { X: 56, Y: 778, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Information Billing',bounds: { X: 290, Y: 740, Width: 20, Height: 20 },isChecked: false,}as CheckBoxFieldSettings); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'My Email',bounds: { X: 146, Y: 850, Width: 200, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'My Phone',bounds: { X: 482, Y: 850, Width: 200, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('SignatureField', {name: 'Sign',bounds: { X: 57, Y: 923, Width: 200, Height: 43 },}as SignatureFieldSettings); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Month',bounds: { X: 386, Y: 923, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Date',bounds: { X: 434, Y: 923, Width: 35, Height: 24 }as TextFieldSettings} ); - pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Year',bounds: { X: 482, Y: 923, Width: 35, Height: 24 }as TextFieldSettings,}); - pdfviewer.formDesignerModule.deleteFormField(pdfviewer.formFieldCollections[0]); -} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - -
    Loading....
    -
    -
    -
    - - -{% endhighlight %} -{% endtabs %} - -N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: -`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` - -{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/deleteformfield-cs3/index.html" %} - -## Saving the form fields - -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. - -![Save form fields from the PDF Viewer](../images/saveformfield.gif) - -You can invoke the download action using the following code snippet. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.load('https://cdn.syncfusion.com/content/pdf/form-designer.pdf', null); -pdfviewer.download(); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.load('https://cdn.syncfusion.com/content/pdf/form-designer.pdf', null); -pdfviewer.download(); - - -{% endhighlight %} -{% endtabs %} - -## Printing the form fields - -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. - -![Print the PDF with form fields](../images/printformfield.gif) - -You can invoke the print action using the following code snippet: - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.load('https://cdn.syncfusion.com/content/pdf/form-designer.pdf', null); -pdfviewer.print.print(); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; - - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.load('https://cdn.syncfusion.com/content/pdf/form-designer.pdf', null); -pdfviewer.print.print(); - -{% endhighlight %} -{% endtabs %} - -## setFormFieldMode programmatically - -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. - -``` - - -``` - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('addPasswordField').addEventListener('click', function () { - pdfviewer.formDesignerModule.setFormFieldMode("Password"); -}); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('addPasswordField').addEventListener('click', function () { - pdfviewer.formDesignerModule.setFormFieldMode("Password"); -}); -{% endhighlight %} -{% endtabs %} - -## Open the existing PDF document - -Open a PDF that already contains form fields by clicking the Open icon on the toolbar. See the following GIF for reference. - -![Open a PDF with existing form fields](../images/openexistingpdf.gif) - -## Validate 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 ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView, -TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation, FormDesigner, FormFields); - -let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' }); -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.enableFormFieldsValidation = true; -viewer.validateFormFields= function (args) { -var nonfilledFormFields = args.nonFillableFields; -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView, -TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation, FormDesigner, FormFields); - -let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' }); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.enableFormFieldsValidation = true; -viewer.validateFormFields= function (args) { -var nonfilledFormFields = args.nonFillableFields; -} - -{% endhighlight %} -{% endtabs %} - -## Export and import form fields - -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 - -### Export and import as FDF - -Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters: - -* 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 example exports and imports form field data as FDF. - -```ts - - - - -
    - -// Event triggers on Export FDF button click. -document.getElementById('exportFdf').addEventListener('click', ()=> { - // Data must be the desired path for the exported document. - viewer.exportFormFields('Data', FormFieldDataFormat.Fdf); -}); - -// Event triggers on Import FDF button click. -document.getElementById('importFdf').addEventListener('click', ()=> { - // The file for importing the form field should be placed in the desired location, and the path should be provided correctly - viewer.importFormFields('File', FormFieldDataFormat.Fdf); -}); - -``` - -### Export and import as XFDF - -The following example exports and imports form field data as XFDF. - -```ts - - - - -
    - -// Event triggers on Export XFDF button click. -document.getElementById('exportXfdf').addEventListener('click', ()=> { - // Data must be the desired path for the exported document. - viewer.exportFormFields('Data', FormFieldDataFormat.Xfdf); -}); - -// Event triggers on Import XFDF button click. -document.getElementById('importXfdf').addEventListener('click', ()=> { - // The file for importing the form field should be placed in the desired location, and the path should be provided correctly - viewer.importFormFields('File', FormFieldDataFormat.Xfdf); -}); - -``` - -### Export and import as JSON - -The following example exports and imports form field data as JSON. - -```ts - - - - -
    - -// Event triggers on Export JSON button click. -document.getElementById('exportJson').addEventListener('click', ()=> { - // Data must be the desired path for the exported document. - viewer.exportFormFields('Data', FormFieldDataFormat.Json); -}); - -// Event triggers on Import JSON button click. -document.getElementById('importJson').addEventListener('click', ()=> { - // The file for importing the form field should be placed in the desired location, and the path should be provided correctly - viewer.importFormFields('File', FormFieldDataFormat.Json); -}); - -``` - -### Export and import as 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. - -```ts - - - - -
    - -let exportedData; - -// Event triggers on Export Object button click. -document.getElementById('exportDataAsObject').addEventListener('click', ()=> { - // Export the form field data to an FDF object. - viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(value => { - exportedData = value; - }); - - // // Export the form field data to an XFDF object. - // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(value =>{ - // exportedData = value; - // }) - - // // Export the form field data to an JSON object. - // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(value =>{ - // exportedData = value; - // }) -}); - -// Event triggers on Import Data button click. -document.getElementById('importData').addEventListener('click', ()=> { - // Import the form field data from the FDF object into the current PDF document. - viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf); - - //// Import the form field data from the XFDF object into the current PDF document. - //viewer.importFormFields (exportedData, FormFieldDataFormat.Xfdf); - - //// Import the form field data from the FDF object into the current PDF document. - //viewer.importFormFields (exportedData, FormFieldDataFormat.Json); -}); -``` -## Form field properties - -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 -- Signature field -- Initial field - -### Signature and initial fields settings - -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. - -```ts - -document.getElementById('updateProperties').addEventListener('click',function() { - var formField = viewer.retrieveFormFields(); - viewer.formDesignerModule.updateFormField(formField[0], { - name: 'Initial', - isReadOnly: true, - visibility: 'visible', - isRequired: false, - isPrint: true, - tooltip: 'Initial', - thickness: 4 - }); -}); - -``` - -The following code shows how to configure default properties for a signature field added from the Form Designer toolbar. - -```ts - -// Properties to customize the signature field settings -viewer.signatureFieldSettings = { - // Set the name of the form field element. - name: 'Signature', - // Specify whether the signature field is in read-only or read-write mode. - isReadOnly: false, - // Set the visibility of the form field. - visibility: 'visible', - // Specify whether the field is mandatory or not. - isRequired: false, - // Specify whether to print the signature field. - isPrint: true, - // Set the text to be displayed as a tooltip. - tooltip: 'Signature', - // Set the thickness of the Signature field. To hide the borders, set the value to 0 (zero). - thickness: 4, - // Specify the properties of the signature Dialog Settings in the signature field. - signatureDialogSettings: { - displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text, - hideSaveSignature: false, - }, - // Specify the properties of the signature indicator in the signature field. - signatureIndicatorSettings: { - opacity: 1, - backgroundColor: '#237ba2', - height: 50, - fontSize: 15, - text: 'Signature Field', - color: 'white' - }, -}; - -``` - -![Signature field settings in the PDF Viewer](../images/SignatureField.png) - -The following code shows how to configure default properties for an initial field added from the Form Designer toolbar. - -```ts - -// Properties to customize the initial field settings -viewer.initialFieldSettings = { - // Set the name of the form field element. - name: 'Initial', - // Specify whether the initial field is in read-only or read-write mode. - isReadOnly: false, - // Set the visibility of the form field. - visibility: 'visible', - // Specify whether the field is mandatory or not. - isRequired: false, - // Specify whether to print the initial field. - isPrint: true, - // Set the text to be displayed as a tooltip. - tooltip: 'Initial', - // Set the thickness of the initial field. To hide the borders, set the value to 0 (zero). - thickness: 4, - // Specifies the properties of the initial indicator in the initial field. - initialIndicatorSettings: { - opacity: 1, - backgroundColor: '#237ba2', - height: 50, - fontSize: 15, - text: 'Initial Field', - color: 'white' - }, - // Specify the properties of the initial Dialog Settings in the intial field. - initialDialogSettings: { - displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text, - hideSaveSignature: false - } -}; - -``` - -![Initial field settings in the PDF Viewer](../images/InitialField.png) - -### Textbox field settings - -Using the `updateFormField` method, the form fields can be updated programmatically. - -The following example updates Textbox field properties on a button click. - -```html - - -``` - -```ts - -document.getElementById('updateProperties').addEventListener('click',function() { - var formField = viewer.retrieveFormFields(); - viewer.formDesignerModule.updateFormField(formField[0], { - name: 'Textbox', - isReadOnly: true, - visibility: 'visible', - isRequired: false, - isPrint: true, - tooltip: 'Textbox', - thickness: 4, - value:'Textbox', - fontFamily: 'Courier', - fontSize: 10, - fontStyle: 'None', - color: 'black', - borderColor: 'black', - backgroundColor: 'white', - alignment: 'Left', - maxLength: 0, - isMultiline: false, - bounds: { X: 146, Y: 229, Width: 150, Height: 24 } - }); -}); - - -``` - -The following code shows how to configure default properties for a Textbox field added from the Form Designer toolbar. - -```ts - -// Properties to customize the Textbox field settings -viewer.textFieldSettings = { - // Set the name of the form field element. - name: 'Textbox', - // Specify whether the Textbox field is in read-only or read-write mode. - isReadOnly: false, - // Set the visibility of the form field. - visibility: 'visible', - // Specify whether the field is mandatory or not. - isRequired: false, - // Specify whether to print the Textbox field. - isPrint: true, - // Set the text to be displayed as a tooltip. - tooltip: 'Textbox', - // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero). - thickness: 4, - // Set the value of the form field element. - value:'Textbox', - // Set the font family of the textbox field. - fontFamily: 'Courier', - // Set the font size of the textbox field. - fontSize: 10, - // Specify the font style - fontStyle: 'None', - // Set the font color of the textbox field. - color: 'black', - // Set the border color of the textbox field. - borderColor: 'black', - // Set the background color of the textbox field. - backgroundColor: 'White', - // Set the alignment of the text. - alignment: 'Left', - // Set the maximum character length. - maxLength: 0, - // Allows multiline input in the text field. FALSE, by default. - isMultiline: false -}; - -``` - -![Textbox field settings in the PDF Viewer](../images/Textbox.png) - -### Password field settings - -Using the `updateFormField` method, the form fields can be updated programmatically. - -The following example updates Password field properties on a button click. - -```html - - -``` - -```ts - -document.getElementById('updateProperties').addEventListener('click',function() { - var formField = viewer.retrieveFormFields(); - viewer.formDesignerModule.updateFormField(formField[0], { - name: 'Password', - isReadOnly: true, - visibility: 'visible', - isRequired: false, - isPrint: true, - tooltip: 'Password', - thickness: 4, - value:'Password', - fontFamily: 'Courier', - fontSize: 10, - fontStyle: 'None', - color: 'black', - borderColor: 'black', - backgroundColor: 'white', - alignment: 'Left', - maxLength: 0, - bounds: { X: 148, Y: 229, Width: 150, Height: 24 } - }); -}); - - -``` - -The following code shows how to configure default properties for a Password field added from the Form Designer toolbar. - -```ts - -// Properties to customize the Password field settings -viewer.passwordFieldSettings = { - // Set the name of the form field element. - name: 'Password', - // Specify whether the Password field is in read-only or read-write mode. - isReadOnly: false, - // Set the visibility of the form field. - visibility: 'visible', - // Specify whether the field is mandatory or not. - isRequired: false, - // Specify whether to print the Password field. - isPrint: true, - // Set the text to be displayed as a tooltip. - tooltip: 'Password', - // Set the thickness of the Password field. To hide the borders, set the value to 0 (zero). - thickness: 4, - // Set the value of the form field element. - value:'Password', - // Set the font family of the Password field. - fontFamily: 'Courier', - // Set the font size of the Password field. - fontSize: 10, - // Specify the font style - fontStyle: 'None', - // Set the font color of the Password field. - color: 'black', - // Set the border color of the Password field. - borderColor: 'black', - // Set the background color of the Password field. - backgroundColor: 'white', - // Set the alignment of the text. - alignment: 'Left', - // Set the maximum character length. - maxLength: 0, -}; - -``` - -![Password field settings in the PDF Viewer](../images/Password.png) - -### CheckBox field settings - -Using the `updateFormField` method, the form fields can be updated programmatically. - -The following example updates CheckBox field properties on a button click. - -```html - - -``` - -```ts - -document.getElementById('updateProperties').addEventListener('click',function() { - var formField = viewer.retrieveFormFields(); - viewer.formDesignerModule.updateFormField(formField[0], { - name: 'CheckBox', - isReadOnly: true, - visibility: 'visible', - isRequired: false, - isPrint: true, - tooltip: 'CheckBox', - thickness: 4, - isChecked: true, - backgroundColor: 'white', - borderColor: 'black', - value: 'CheckBox', - }); -}); - - -``` - -The following code shows how to configure default properties for a CheckBox field added from the Form Designer toolbar. - -```ts - -// Properties to customize the CheckBox field settings -viewer.checkBoxFieldSettings = { - // Set the name of the form field element. - name: 'CheckBox', - // Specify whether the CheckBox field is in read-only or read-write mode. - isReadOnly: false, - // Set the visibility of the form field. - visibility: 'visible', - // Specify whether the field is mandatory or not. - isRequired: false, - // Specify whether to print the CheckBox field. - isPrint: true, - // Set the text to be displayed as a tooltip. - tooltip: 'CheckBox', - // Set the thickness of the CheckBox field. To hide the borders, set the value to 0 (zero). - thickness: 4, - // Specifies whether the check box is in checked state or not. - isChecked: true, - // Set the background color of the check box in hexadecimal string format. - backgroundColor: 'white', - // Set the border color of the check box field. - borderColor: 'black', - // Set the value of -}; - -``` - -![CheckBox field settings in the PDF Viewer](../images/Checkbox.png) - -### RadioButton field settings - -Using the `updateFormField` method, the form fields can be updated programmatically. - -The following example updates RadioButton field properties on a button click. - -```html - - -``` - -```ts - -document.getElementById('updateProperties').addEventListener('click',function() { - var formField = viewer.retrieveFormFields(); - viewer.formDesignerModule.updateFormField(formField[0], { - name: 'RadioButton', - isReadOnly: true, - visibility: 'visible', - isRequired: false, - isPrint: true, - tooltip: 'RadioButton', - thickness: 4, - isSelected: true, - backgroundColor: 'white', - borderColor: 'black', - value: 'RadioButton' - }); -}); - - -``` - -The following code shows how to configure default properties for a RadioButton field added from the Form Designer toolbar. - -```ts - -// Properties to customize the RadioButton field settings -viewer.radioButtonFieldSettings = { - // Set the name of the form field element. - name: 'RadioButton', - // Specify whether the RadioButton field is in read-only or read-write mode. - isReadOnly: false, - // Set the visibility of the form field. - visibility: 'visible', - // Specify whether the field is mandatory or not. - isRequired: false, - // Specify whether to print the RadioButton field. - isPrint: true, - // Set the text to be displayed as a tooltip. - tooltip: 'RadioButton', - // Set the thickness of the RadioButton field. To hide the borders, set the value to 0 (zero). - thickness: 4, - // Specifies whether the radio button is in checked state or not. - isSelected: true, - // Set the background color of the radio button in hexadecimal string format. - backgroundColor: 'white', - // Set the border color of the radio button field. - borderColor: 'black', - // Set the value of the form field element. - value: 'RadioButton' -}; - -``` - -![RadioButton field settings in the PDF Viewer](../images/Radiobutton.png) - -### ListBox field settings - -Using the `updateFormField` method, the form fields can be updated programmatically. - -The following example updates ListBox field properties on a button click. - -```html - - -``` - -```ts - -document.getElementById('updateProperties').addEventListener('click',function() { - var formField = viewer.retrieveFormFields(); - var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}] - viewer.formDesignerModule.updateFormField(formField[0], { - name: 'ListBox', - isReadOnly: false, - visibility: 'visible', - isRequired: false, - isPrint: true, - tooltip: 'ListBox', - thickness: 4, - fontFamily: 'Courier', - fontSize: 10, - fontStyle: 'None', - color: 'black', - borderColor: 'black', - backgroundColor: 'white', - alignment: 'Left', - options: customOptions, - }); -}); - - -``` - -The following code shows how to configure default properties for a ListBox field added from the Form Designer toolbar. - -```ts - -// Properties to customize the Listbox field settings -viewer.listBoxFieldSettings = { - var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}] - // Set the name of the form field element. - name: 'ListBox', - // Specify whether the ListBox field is in read-only or read-write mode. - isReadOnly: false, - // Set the visibility of the form field. - visibility: 'visible', - // Specify whether the field is mandatory or not. - isRequired: false, - // Specify whether to print the ListBox field. - isPrint: true, - // Set the text to be displayed as a tooltip. - tooltip: 'ListBox', - // Set the thickness of the ListBox field. To hide the borders, set the value to 0 (zero). - thickness: 4, - // Set the value of the form field element. - value:'ListBox', - // Set the font family of the ListBox field. - fontFamily: 'Courier', - // Set the font size of the ListBox field. - fontSize: 10, - // Specify the font style - fontStyle: 'None', - // Set the font color of the ListBox field. - color: 'black', - // Set the border color of the ListBox field. - borderColor: 'black', - // Set the background color of the ListBox field. - backgroundColor: 'White', - // Set the alignment of the text. - alignment: 'Left', - // Set the listbox items. - options: customOptions -}; - -``` - -![ListBox field settings in the PDF Viewer](../images/Listbox.png) - -### DropDown field settings - -Using the `updateFormField` method, the form fields can be updated programmatically. - -The following example updates DropDown field properties on a button click. - -```html - - -``` - -```ts - -document.getElementById('updateProperties').addEventListener('click',function() { - var formField = viewer.retrieveFormFields(); - var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}] - viewer.formDesignerModule.updateFormField(formField[0], { - name: 'DropDown', - isReadOnly: false, - visibility: 'visible', - isRequired: false, - isPrint: true, - tooltip: 'DropDown', - thickness: 4, - fontFamily: 'Courier', - fontSize: 10, - fontStyle: 'None', - color: 'black', - borderColor: 'black', - backgroundColor: 'white', - alignment: 'Left', - options: customOptions, - }); -}); - - -``` - -The following code shows how to configure default properties for a DropDown field added from the Form Designer toolbar. - -```ts - -// Properties to customize the Dropdown field settings -viewer.listBoxFieldSettings = { - var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}] - // Set the name of the form field element. - name: 'DropDown', - // Specify whether the DropDown field is in read-only or read-write mode. - isReadOnly: false, - // Set the visibility of the form field. - visibility: 'visible', - // Specify whether the field is mandatory or not. - isRequired: false, - // Specify whether to print the DropDown field. - isPrint: true, - // Set the text to be displayed as a tooltip. - tooltip: 'DropDown', - // Set the thickness of the DropDown field. To hide the borders, set the value to 0 (zero). - thickness: 4, - // Set the value of the form field element. - value:'DropDown', - // Set the font family of the DropDown field. - fontFamily: 'Courier', - // Set the font size of the DropDown field. - fontSize: 10, - // Specify the font style - fontStyle: 'None', - // Set the font color of the DropDown field. - color: 'black', - // Set the border color of the DropDown field. - borderColor: 'black', - // Set the background color of the DropDown field. - backgroundColor: 'White', - // Set the alignment of the text. - alignment: 'Left', - // Set the DropDown items. - options: customOptions -}; - -``` - -![DropDown field settings in the PDF Viewer](../images/Dropdown.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md deleted file mode 100644 index df46c4910..000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -layout: post -title: Design form fields in the TypeScript PDF Viewer component | Syncfusion -description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion TypeScript PDF Viewer component. -platform: document-processing -control: PDF Viewer -documentation: ug ---- - -# Create with user interface interaction for TypeScript - -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 -- Signature field -- Initial field - -## Enable or Disable form designer toolbar - -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. - -```ts -import { PdfViewer } from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.enableFormDesignerToolbar= true; - -``` - -## Add the form field dynamically - -Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference. - -![Add a form field using the toolbar](../images/addformfield.gif) - -## Drag the form field - -Drag the selected form field to reposition it within the PDF document. See the following GIF for reference. - -![Drag a selected form field in the PDF Viewer](../images/dragformfield.gif) - -## Resize the form field - -Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference. - -![Resize a selected form field in the PDF Viewer](../images/resizeformfield.gif) - -## Edit or Update the form field dynamically - -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. - -![Form field general properties dialog](../images/generalproperties.png) - -![Form field appearance properties dialog](../images/appearanceproperties.png) - -![DropDown field properties dialog](../images/dropdownproperties.png) - -## Clipboard operation with form field - -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. - -![Clipboard options for a form field in the context menu](../images/clipboardformfield.png) - -## Undo and Redo - -Undo and redo actions are supported for runtime changes made to form fields. Use the following code to perform undo and redo operations. - -```ts -import { PdfViewer } from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.undo(); -pdfviewer.redo(); - -``` \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/custom-data.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/custom-data.md new file mode 100644 index 000000000..2e4f472c3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/custom-data.md @@ -0,0 +1,106 @@ +--- +layout: post +title: Add custom data to form fields in TypeScript Pdf Viewer | Syncfusion +description: Learn how to attach, update, and read custom Data on PDF form fields using the Form Designer UI and APIs in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Add custom data to form fields + +You can associate arbitrary metadata with any form field using the customData property. This is useful for storing business IDs, validation hints, tags, or any app-specific information alongside the field. The data stays with the field object during the viewer session and can be accessed whenever you query or update fields. + +N> customData is a free-form object. You control both its shape and how it is used in your application. + +## Add custom data when creating fields (programmatically) + +Pass a customData object in the second parameter of addFormField. You can include any serializable values. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, + TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields); + +const viewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' +}); +viewer.appendTo('#pdfViewer'); + +viewer.documentLoad = () => { + const meta = { businessId: 'C-1024', tags: ['profile', 'kiosk'], requiredRole: 'admin' }; + viewer.formDesignerModule.addFormField('Textbox', { + name: 'Email', + bounds: { X: 146, Y: 229, Width: 200, Height: 24 } as TextFieldSettings, + // Attach any custom metadata your app needs + customData: meta + } as any); +}; +``` + +N> To configure the server-backed PDF Viewer, set: +`viewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` + +## Set default custom data for UI-created fields + +When users add fields via the Form Designer toolbar, you can predefine default customData using the per-field settings objects. + +```ts +// Example: default custom data for all new Textbox fields added from the toolbar +viewer.textFieldSettings = { + name: 'Textbox', + customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' } +} as any; +``` + +You can do the same for other field types using passwordFieldSettings, checkBoxFieldSettings, radioButtonFieldSettings, listBoxFieldSettings, dropDownFieldSettings, signatureFieldSettings, and initialFieldSettings. + +## Update or replace custom data on existing fields + +Use updateFormField to set or modify the customData of any existing field (retrieved by object or ID). + +```ts +const fields = viewer.retrieveFormFields(); +const target = fields[0]; +viewer.formDesignerModule.updateFormField(target, { + customData: { group: 'profile', flags: ['pii', 'masked'], updatedAt: Date.now() } +} as any); +``` + +Tip: You can merge new values with existing ones in your app code before calling updateFormField. + +## Read custom data + +You can read customData from any field at any time. Typical entry points: +- After document load +- On your own UI actions (save, validate, route, etc.) + +```ts +viewer.documentLoad = () => { + const fields = viewer.retrieveFormFields(); + fields.forEach((f: any) => { + console.log('Field', f.name, 'customData:', f.customData); + }); +}; +``` + +## Notes and best practices + +- Keep customData small and serializable (plain objects, arrays, numbers, strings, booleans). +- Treat customData as application metadata. Use it to drive business rules, validation, or routing in your app. +- When cloning or copying fields in your UI, also copy or adjust customData as needed. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Form constrain](./form-constrain) +- [Form validation](./form-validation) +- [Form fields API](./formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md new file mode 100644 index 000000000..ac25f2b1d --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md @@ -0,0 +1,233 @@ +--- +layout: post +title: Form constraints in the TypeScript PDF Viewer component | Syncfusion +description: Learn how to configure form field constraints such as isReadOnly, isRequired, and isPrint in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Form constraints in TypeScript PDF Viewer + +The PDF Viewer components provides support to control user interaction and output behavior of form fields using the following constraints: + +- isReadOnly: Prevents users from editing a field. +- isRequired: Marks a field as mandatory and participates in validation. +- isPrint: Includes the field appearance when printing or exporting with print. + +You can set these properties when you create fields, update them later programmatically, or configure default settings so fields created from the Form Designer toolbar inherit the values. + +## isReadOnly + +Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code. + +- Creation +```ts +pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'EmployeeId', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 }, + isReadOnly: true, + value: 'EMP-0001' +} as TextFieldSettings); +``` + +- Update existing field +```ts +const field = pdfviewer.formFieldCollections.find(f => f.name === 'EmployeeId'); +if (field) { + pdfviewer.formDesignerModule.updateFormField(field, { isReadOnly: false } as TextFieldSettings); +} +``` + +- Default for new Textbox fields +```ts +pdfviewer.textFieldSettings = { isReadOnly: true }; +``` + +## isRequired + +Use `isRequired` to mark fields as mandatory so they participate in validation during print/download. Turn on validation with enableFormFieldsValidation and handle validateFormFields to block actions if required fields are empty. + +- Creation +```ts +pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'Email', + bounds: { X: 146, Y: 260, Width: 220, Height: 24 }, + isRequired: true, + tooltip: 'Email is required' +} as TextFieldSettings); +``` + +- Validation wiring +```ts +pdfviewer.enableFormFieldsValidation = true; +pdfviewer.validateFormFields = (args: any) => { + //validateFormFields event triggers when fields are empty. + alert("Please fill all required fields. Missing: "+args.formField[0].name); +}; +``` + +- Default for new Textbox fields +```ts +pdfviewer.textFieldSettings = { isRequired: true }; +``` + +## isPrint + +Use `isPrint` to control whether a field’s appearance is included when printing the PDF from the viewer. + +- Creation (do not print a signature field) +```ts +pdfviewer.formDesignerModule.addFormField('SignatureField', { + name: 'ApplicantSign', + bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, + isPrint: false +} as SignatureFieldSettings); +``` + +- Update existing field +```ts +const sign = pdfviewer.formFieldCollections.find(f => f.name === 'ApplicantSign'); +if (sign) { + pdfviewer.formDesignerModule.updateFormField(sign, { isPrint: true } as SignatureFieldSettings); +} +``` + +- Default for new signature fields +```ts +pdfviewer.signatureFieldSettings = { isPrint: false }; +``` + +N> Printing can be invoked programmatically using pdfviewer.print.print(); fields with isPrint: false will not appear in the print output. + +## Set constraints when creating a field + +Use `addFormField` to create fields and pass the constraint properties in the settings object. The example below adds a Textbox and a Signature field with different constraint combinations. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, + TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, + TextSelection, Annotation, FormDesigner, FormFields); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' +}); +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + // Read-only Textbox that is printed but not required + pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'EmployeeId', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 }, + isReadOnly: true, + isRequired: false, + isPrint: true, + value: 'EMP-0001' + } as TextFieldSettings); + + // Required Signature field that is not included in print + pdfviewer.formDesignerModule.addFormField('SignatureField', { + name: 'ApplicantSign', + bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, + isReadOnly: false, + isRequired: true, + isPrint: false, + tooltip: 'Sign to accept the terms' + } as SignatureFieldSettings); +}; +``` + +N> To configure the server-backed PDF Viewer, add the following serviceUrl in index.ts: +`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` + +## Update constraints programmatically + +Use `updateFormField` to change constraint flags of an existing field. The snippet below toggles isReadOnly, sets a field as required, and controls whether the field should appear when printing. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, + TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, + TextSelection, Annotation, FormDesigner, FormFields); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' +}); +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + // Add a sample textbox + pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'Email', + bounds: { X: 146, Y: 260, Width: 220, Height: 24 } + } as TextFieldSettings); + + // Retrieve it and update constraint flags + const field = pdfviewer.formFieldCollections.find(f => f.name === 'Email'); + if (field) { + pdfviewer.formDesignerModule.updateFormField(field, { + isReadOnly: false, + isRequired: true, + isPrint: true, + tooltip: 'Enter a valid email' + } as TextFieldSettings); + } +}; +``` + +## Configure default constraints for newly added fields + +Set default settings so all fields created from the Form Designer toolbar inherit the constraint flags. + +The example below configures defaults for Textbox and Signature fields. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, FormDesigner, FormFields); + +let pdfviewer: PdfViewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' }); +pdfviewer.appendTo('#PdfViewer'); + +// Textbox fields will be editable, required, and included in print by default +pdfviewer.textFieldSettings = { + isReadOnly: false, + isRequired: true, + isPrint: true, + tooltip: 'Required field' +}; + +// Signature fields will be optional and hidden when printing +pdfviewer.signatureFieldSettings = { + isReadOnly: false, + isRequired: false, + isPrint: false, + tooltip: 'Sign if applicable' +}; +``` + +## Behavior notes + +- isReadOnly only blocks user edits in the UI. You can still update the field programmatically. +- isRequired participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details. +- isPrint controls field appearance in the print output. It does not affect download/export unless printing is triggered. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Add custom data to form fields](./custom-data) +- [Form validation](./form-validation) +- [Form fields API](./formfields-api) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md index c4ec104bb..1a53dcecc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md @@ -14,23 +14,23 @@ The PDF Viewer control provides the support to different Form Field events. The | Form Field events | Description | |---|---| -| [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs/) | Event trigger when a form field is added.| -| [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs/) | Events trigger when the form field is selected.| -| [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs/) | Events trigger when the form field is double-clicked.| -| [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) | Events trigger when focus out from the form fields.| -| [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) | Events trigger when the mouse cursor leaves the form field.| -| [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs/) | Events trigger when the mouse cursor is over a form field.| -| [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs/) | Events trigger when a form field is moved.| -| [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) | Events trigger when a property of form field is changed.| -| [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs/) | Events trigger when a form field is removed.| -| [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs/) | Events trigger when a form field is resized.| -| [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs/) | Events trigger when a form field is selected.| -| [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs/) | Events trigger when a form field is unselected.| -| [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) | Events trigger when validation is failed.| +| [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs) | Event trigger when a form field is added.| +| [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs) | Events trigger when the form field is selected.| +| [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs) | Events trigger when the form field is double-clicked.| +| [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs) | Events trigger when focus out from the form fields.| +| [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs) | Events trigger when the mouse cursor leaves the form field.| +| [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs) | Events trigger when the mouse cursor is over a form field.| +| [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs) | Events trigger when a form field is moved.| +| [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) | Events trigger when a property of form field is changed.| +| [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs) | Events trigger when a form field is removed.| +| [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs) | Events trigger when a form field is resized.| +| [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs) | Events trigger when a form field is selected.| +| [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs) | Events trigger when a form field is unselected.| +| [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs) | Events trigger when validation is failed.| ## formFieldAdd event -The [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs/) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition. +The [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -43,7 +43,7 @@ The [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfvi ## formFieldClick event -The [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs/) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event. +The [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -56,7 +56,7 @@ The [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdf ## formFieldDoubleClick event -The [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs/) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event. +The [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -69,7 +69,7 @@ The [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/a ## formFieldFocusOut event -The [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event. +The [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -82,7 +82,7 @@ The [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/ ## formFieldMouseLeave event -The [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event. +The [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -95,7 +95,7 @@ The [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/ap ## formFieldMouseOver event -The [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs/) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event. +The [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -108,7 +108,7 @@ The [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api ## formFieldMove event -The [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs/) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event. +The [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -121,7 +121,7 @@ The [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfv ## formFieldPropertiesChange event -The [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed. +The [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -134,7 +134,7 @@ The [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentat ## formFieldRemove event -The [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs/) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed. +The [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -147,7 +147,7 @@ The [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pd ## formFieldResize event -The [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs/) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized. +The [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -160,7 +160,7 @@ The [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pd ## formFieldSelect event -The [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs/) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected. +The [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -173,7 +173,7 @@ The [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pd ## formFieldUnselect event -The [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs/) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected. +The [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -186,7 +186,7 @@ The [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/ ## validateFormFields event -The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete. +The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -195,4 +195,16 @@ The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api {% highlight html tabtitle="index.html" %} {% include code-snippet/pdfviewer/javascript-es6/formfieldvalidationevent-cs2/index.html %} {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Add custom data to form fields](./custom-data) +- [Form Constrain](./form-constrain) +- [Form validation](./form-validation) +- [Form fields API](./formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md new file mode 100644 index 000000000..58e17880e --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md @@ -0,0 +1,114 @@ +--- +layout: post +title: Form filling in TypeScript PDF Viewer Control | Syncfusion +description: Learn to view, fill, export, and import PDF form fields in Syncfusion TS PDF Viewer, including disabling interaction and handling signatures. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Form filling in TypeScript 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 + +![Form filling in TypeScript PDF Viewer](../images/form-filling.png) + +## Disabling form fields + +The PDF Viewer provides an option to disable interaction with form fields using `enableFormDesigner` API. Use the following configuration to disable form fields in the viewer. + + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +pdfviewer.enableFormDesigner = false; //To disable Form Desinger +pdfviewer.appendTo('#PdfViewer'); +``` + +## Access interactive form fields + +You can access the collection of all interactive form fields in the loaded document using the `formFieldCollection` property. Fetch the collection after the document is loaded. + +Use the following code-snippet to access interactive form fields collection: +```html + +``` +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; + +pdfviewer.appendTo('#PdfViewer'); + +// Access the form fields collection via button click +document.getElementById('formFieldCollection')?.addEventListener('click',function() { + const fields = pdfviewer.formFieldCollection; // Gets all form fields + console.log(fields)//Log the formField Collection +}); + +``` + +## 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. + +![Signature field in TypeScript PDF Viewer](../images/form-filling-signature.png) + +* Draw the signature in the signature panel. + +![Signature panel in TypeScript PDF Viewer](../images/form-filling-signature-dialog.png) + +* Select **CREATE**. The drawn signature is added to the signature field. + +![Signature added in TypeScript PDF Viewer](../images/form-filling-signature-signed.png) + +## Delete a signature from a signature field + +Delete a signature placed in a signature field by using the Delete option in the annotation toolbar. + +![Deleting a signature in TypeScript PDF Viewer](../images/form-filling-signature-del.png) + +## 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](./import-export-formfields/export-formfields). + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Add custom data to form fields](./custom-data) +- [Form Constrain](./form-constrain) +- [Form validation](./form-validation) +- [Form fields API](./formfields-api) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-validation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-validation.md new file mode 100644 index 000000000..87beb8ee2 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-validation.md @@ -0,0 +1,92 @@ +--- +layout: post +title: Form validation in the TypeScript PDF Viewer component | Syncfusion +description: Learn how to enable built-in form field validation and validate missing required fields in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Validate form fields in TypeScript PDF Viewer + +The PDF Viewer Component can validate form fields during print, download or submit form. Use the [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property to turn on validation and handle the [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/validateformfieldsargs) event to review which required fields are not filled. + +When validation is enabled and the user attempts to print, download or submit form, the event fires with a list of non-filled fields in args.nonFillableFields. You can cancel the operation, show a message, or focus the first invalid field. + +## Enable validation + +Set `enableFormFieldsValidation` to true and wire the validateFormFields event. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, + TextSelection, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, + TextSelection, Annotation, FormDesigner, FormFields); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' +}); + +pdfviewer.appendTo('#PdfViewer'); +pdfviewer.enableFormFieldsValidation = true; + +pdfviewer.validateFormFields = (args: any) => { + alert("Please fill all required fields. Missing: "+args.formField[0].name); + console.log(args.nonFillableFields) +}; +``` + +## Mark a field as required and validate + +The snippet below creates a required Textbox and demonstrates validation blocking print until the field is filled. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, FormDesigner, FormFields, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, FormDesigner, FormFields); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' +}); +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + // Add a required Textbox + pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'Email', + bounds: { X: 146, Y: 260, Width: 220, Height: 24 }, + isRequired: true, + tooltip: 'Email is required' + } as TextFieldSettings); +}; + +pdfviewer.enableFormFieldsValidation = true; +pdfviewer.validateFormFields = (args: any) => { + alert("Please fill all required fields. Missing: "+args.formField[0].name); + console.log(args.nonFillableFields) +}; +``` + +## Tips + +- Use isRequired on individual fields to include them in the validation check. +- The event only fires when a print or download action is invoked. +- To perform custom checks (e.g., regex for email), iterate over pdfviewer.retrieveFormFields() and apply your own logic before triggering print or download. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Add custom data to form fields](./custom-data) +- [Form Constrain](./form-constrain) +- [Form fields API](./formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/formfields-api.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/formfields-api.md new file mode 100644 index 000000000..dfa7e79ce --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/formfields-api.md @@ -0,0 +1,421 @@ +--- +layout: post +title: Form Fields API in TypeScript PDF Viewer | Syncfusion +description: Learn How to use Form Fields API to enable, update, retrieve and clear in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Form Fields API in TypeScript PDF Viewer + +The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available: + +| API | Description | +|---|---| +| [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) | Updates the value for one or more form fields.| +| [updateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) | Updates the properties of one or more form fields.| +| [retrieveFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields) | Retrieves all form fields or by specific criteria.| +| [resetFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#resetformfields) | Resets the specified or all form fields to their default values.| +| [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) | Imports values and states for form fields from a JSON object or file stream.| +| [focusFormField](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#focusformfield) | Sets focus to a form field by name or ID.| +| [exportFormFieldsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) | Exports form fields as a JSON object.| +| [exportFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) | Exports form fields as a downloadable file.| +| [clearFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#clearformfields) | Clears values of specified or all form fields without removing them.| +| [isFormFieldDocument](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformfielddocument) | Indicates whether the loaded document contains form fields.| +| [isFormDesignerToolbarVisible](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) | Gets whether the Form Designer toolbar is currently visible.| +| [formFieldCollections](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#formfieldcollections) | Gets the collection of current form fields with their properties.| +| [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) | Enables or disables form field validation.| +| [enableFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfields) | Enables or disables interaction with form fields.| +| [enableFormDesignerToolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformdesignertoolbar) | Shows or hides the Form Designer toolbar.| + +## updateFormFieldsValue + +Updates the value of one or more form fields programmatically. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('updateFormFields'); +if (btn) { + btn.onclick = () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name (Here field name is FIrst Name) + const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly + if (field) { + // give value to be updated in teh for + field.value='John Doe'; + field.tooltip='First' + pdfviewer.updateFormFieldsValue(field); + } + }; +} +{% endhighlight %} +{% endtabs %} + +## updateFormFields + +Updates form field properties such as bounds, color, font, isReadOnly, required, and more. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('updateFormFields'); +if (btn) { + btn.onclick = () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name (Here field name is FIrst Name) + const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly + if (field) { + // Update textbox field styling and value + pdfviewer.formDesignerModule.updateFormField(field, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + color: 'black', + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + alignment: 'Left', + maxLength: 50 + } as TextFieldSettings); + } + }; +} +{% endhighlight %} +{% endtabs %} + +## retrieveFormFields + +Retrieves all form fields and their properties or filters by type/name. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('retrieveFormFields'); +if (btn) { + btn.onclick = () => { + const fields = pdfviewer.retrieveFormFields(); + console.log(fields); + }; +} +{% endhighlight %} +{% endtabs %} + +## resetFormFields + +Resets specified form fields or all fields to their default values. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('resetFormFields'); +if (btn) { + btn.onclick = () => { + pdfviewer.resetFormFields(); + }; +} +{% endhighlight %} +{% endtabs %} + +## importFormFields + +Imports form field data from an object or file into the current document. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('importFormFields'); +if (btn) { + btn.onclick = () => { + // The file for importing should be accessible at the given path or as a file stream depending on your integration + pdfviewer.importFormFields('File', FormFieldDataFormat.Json); + }; +} +{% endhighlight %} +{% endtabs %} + +## focusFormField + +Moves focus to a form field by name or ID. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('focusFormField'); +if (btn) { + btn.onclick = () => { + pdfviewer.focusFormField('FirstName'); + }; +} +{% endhighlight %} +{% endtabs %} + +## exportFormFieldsAsObject + +Exports current form field values and states as a JSON object. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('exportFormFieldsAsObject'); +if (btn) { + let exportedData: Object|undefined; + btn.onclick = () => { + pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => { + exportedData = data; // Save or send to server + console.log('Exported object:', exportedData); + }); + }; +} +{% endhighlight %} +{% endtabs %} + +## exportFormFields + +Exports form field data to a file for download. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FormFieldDataFormat} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('exportFormFields'); +if (btn) { + btn.onclick = () => { + pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json); + }; +} +{% endhighlight %} +{% endtabs %} + +## clearFormFields + +Clears values of specified or all fields without removing the fields themselves. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf'; +pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; +pdfviewer.appendTo('#PdfViewer'); + +const btn = document.getElementById('clearFormFields'); +if (btn) { + btn.onclick = () => { + let field=pdfviewer.retrieveFormFields(); + pdfviewer.clearFormFields(field[0]); + }; +} +{% endhighlight %} +{% endtabs %} + +## isFormFieldDocument + +Returns true if the loaded document contains one or more form fields. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +pdfviewer.appendTo('#PdfViewer'); + +const element = document.getElementById('checkFormFieldDocument'); +if (element) { + element.onclick = () => { + console.log(pdfviewer.isFormFieldDocument); + } +} +{% endhighlight %} +{% endtabs %} + +## isFormDesignerToolbarVisible + +Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially +and get the form designer Toolbar Visible status. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +pdfviewer.appendTo('#PdfViewer'); + +// Open the Form Designer toolbar and read its visibility state +pdfviewer.enableFormDesignerToolbar(true); +console.log(pdfviewer.isFormDesignerToolbarVisible); +{% endhighlight %} +{% endtabs %} + +## formFieldCollections + +Gets the current collection of form fields with their properties from the viewer instance. + +```html + +``` +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +pdfviewer.appendTo('#PdfViewer'); + +const element = document.getElementById('formfieldcollection'); +if (element) { + element.onclick = () => { + console.log(pdfviewer.formFieldCollections); + } +} +{% endhighlight %} +{% endtabs %} + +## enableFormFieldsValidation + +Enables or disables built-in validation for required and constrained fields. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +pdfviewer.enableFormFieldsValidation = true; // enable form fields validation +pdfviewer.appendTo('#PdfViewer'); +{% endhighlight %} +{% endtabs %} + +## enableFormFields + +Enables or disables user interaction with form fields globally. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +pdfviewer.enableFormFields = false; // Disable interaction with all fields +pdfviewer.appendTo('#PdfViewer'); +{% endhighlight %} +{% endtabs %} + +## enableFormDesignerToolbar + +Shows or hides the Form Designer toolbar at runtime. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +pdfviewer.appendTo('#PdfViewer'); + +// Show or hide the Form Designer toolbar at runtime +pdfviewer.enableFormDesignerToolbar(true); // show +// pdfviewer.enableFormDesignerToolbar(false); // hide +{% endhighlight %} +{% endtabs %} + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Add custom data to form fields](./custom-data) +- [Form Constrain](./form-constrain) +- [Form fields Validation](./form-validation) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/group-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/group-formfields.md new file mode 100644 index 000000000..4730922d4 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/group-formfields.md @@ -0,0 +1,121 @@ +--- +layout: post +title: Group form fields in the TypeScript PDF Viewer component | Syncfusion +description: Learn how to group PDF form fields in the Syncfusion TypeScript PDF Viewer by assigning the same name to multiple widgets. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Group form fields in TypeScript PDF Viewer + +In PDF forms, multiple widgets can represent the same logical form field. The Syncfusion PDF Viewer supports grouping form fields by assigning the same Name to multiple widgets. Grouped widgets mirror their values and states based on the field type. + +Key behavior when fields share the same Name: + +- Textbox and Password: Text entered in one widget appears in all widgets with the same name. +- CheckBox: Checking one widget checks all widgets with the same name (mirrored state). +- RadioButton: Widgets with the same name are grouped; only one radio button in the group can be selected at a time. +- ListBox and DropDown: The selected item is shared across widgets with the same name. +- Signature field and Initial field: The applied signature/initial is mirrored across widgets with the same name. + +N> Grouping is driven solely by the Name property. Bounds determine placement; name determines grouping. + +## Group with the user interface + +Use the Form Designer toolbar and set the same Name for multiple widgets to group them. + +Quick steps: + +1. Enable the Form Designer toolbar. +2. Draw the desired fields (e.g., two Textbox widgets or multiple RadioButton widgets). +3. Right‑click a field > Properties, and set the same Name on each widget you want to group. +4. Apply and test: editing one grouped widget reflects in the others. + +Textboxes and Password fields (shared value) +- Give both widgets the same Name to mirror the typed value across them. + +![Grouping textboxes with the same name](../images/groupTextFileds.png) + +Radio buttons (exclusive choice within a group) +- Add radio buttons that share the same Name to create one group; only one can be selected at a time. + +![Grouping radio buttons with the same name](../images/groupRadiobutton.png) + +## Group programmatically + +Assign the same name when adding fields via code. The following example shows: + +- Two Textbox widgets named EmployeeId that mirror values. +- A RadioButton group named Gender with exclusive selection. +- Two CheckBox widgets named Subscribe that mirror checked state. + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, + TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, + RadioButtonFieldSettings, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, Annotation, FormDesigner, FormFields); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' +}); +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = () => { + // Textbox group: same name => mirrored value + pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'EmployeeId', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 } + } as TextFieldSettings); + + pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'EmployeeId', // same name groups the two widgets + bounds: { X: 338, Y: 229, Width: 150, Height: 24 } + } as TextFieldSettings); + + // Radio button group: same name => exclusive selection across the group + pdfviewer.formDesignerModule.addFormField('RadioButton', { + name: 'Gender', + bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, + isSelected: false + } as RadioButtonFieldSettings); + + pdfviewer.formDesignerModule.addFormField('RadioButton', { + name: 'Gender', // grouped with the first + bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, + isSelected: false + } as RadioButtonFieldSettings); + + // CheckBox group: same name => mirrored checked state + pdfviewer.formDesignerModule.addFormField('CheckBox', { + name: 'Subscribe', + bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, + isChecked: false + } as CheckBoxFieldSettings); + + pdfviewer.formDesignerModule.addFormField('CheckBox', { + name: 'Subscribe', // grouped with the first + bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, + isChecked: false + } as CheckBoxFieldSettings); +}; +``` + +N> To configure the server-backed PDF Viewer, add the following serviceUrl in the index.ts file: +`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Add custom data to form fields](./custom-data) +- [Form Constrain](./form-constrain) +- [Form fields Validation](./form-validation) +- [Form fields API](./formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md new file mode 100644 index 000000000..2250de7dd --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md @@ -0,0 +1,156 @@ +--- +layout: post +title: Export form data in the TypeScript PDF Viewer component | Syncfusion +description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Export form data from PDF + +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 + +## Export as FDF + +Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters: + +* 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 example exports and imports form field data as FDF. + +```html + +``` +```ts +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); + +const viewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +viewer.appendTo('#pdfViewer'); + +document.getElementById('exportFdf')!.addEventListener('click', () => { + // Data must be the desired path or file name for the exported document. + viewer.exportFormFields('ExportedData', FormFieldDataFormat.Fdf); +}); +``` + +## Export as XFDF + +The following example exports form field data as XFDF. + +```html + +``` + +```ts +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); + +const viewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +viewer.appendTo('#pdfViewer'); + +document.getElementById('exportXfdf')!.addEventListener('click', () => { + // Data must be the desired path or file name for the exported document. + viewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf); +}); +``` + +## Export as JSON + +The following example exports form field data as JSON. + +```html + +``` + +```ts +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); + +const viewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +viewer.appendTo('#pdfViewer'); + +document.getElementById('exportJson')!.addEventListener('click', () => { + // Data must be the desired path or file name for the exported document. + viewer.exportFormFields('FormData', FormFieldDataFormat.Json); +}); +``` + +## Export as Object + +Export the form data to a JavaScript object for custom persistence (database, API, or client storage). +The following example exports and imports form field data as Object. + +```html + +``` + +```ts +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); + +const viewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +viewer.appendTo('#pdfViewer'); + +let exportedData: object | undefined; +document.getElementById('exportObj')!.addEventListener('click', () => { + viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => { + exportedData = data; // Save or send to server + console.log('Exported object:', exportedData); + }); + + // Alternative formats: + // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...) + // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...) +}); +``` + +## Common use cases + +- Persist user-entered data to your server without modifying the original PDF. +- Export as JSON for easy integration with REST APIs. +- Export as FDF/XFDF for interoperability with other PDF tools. +- Export as object to combine with your app state and store securely. +- Automate exports after validation using validateFormFields. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Import form fields](./import-formfields) +- [Import Export Events](./import-export-events) +- [Create form fields](../Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields) +- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-export-events.md new file mode 100644 index 000000000..2196e74fa --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-export-events.md @@ -0,0 +1,70 @@ +--- +layout: post +title: Import/Export events in the TypeScript PDF Viewer | Syncfusion +description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Import/Export events + +Import/Export events let you track and customize the full lifecycle of form field data flowing into and out of the PDF Viewer. + +Use them to validate inputs, show progress UI, log audit trails, or block operations based on your business rules. Each event exposes typed event-args (ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, ExportFailureEventArgs) describing the operation context. + +Use these events to monitor and customize form field import/export operations. + +## Import events +- [importStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts. +- [importSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importsuccess): Triggers when form fields are successfully imported. +- [importFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing form fields fails. + +## Handle import events +```ts +viewer.importStart = (args: any) => { + console.log('Import started', args); +}; +viewer.importSuccess = (args: any) => { + console.log('Import success', args); +}; +viewer.importFailed = (args: any) => { + console.error('Import failed', args); +}; +``` + +## Export events +- [exportStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts. +- [exportSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportsuccess): Triggers when form fields are successfully exported. +- [exportFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting form fields fails. + +## Handle export events +```ts +viewer.exportStart = (args: any) => { + console.log('Export started', args); +}; +viewer.exportSuccess = (args: any) => { + console.log('Export success', args); +}; +viewer.exportFailed = (args: any) => { + console.error('Export failed', args); +}; +``` + +Notes: +- importStart/importSuccess/importFailed cover the lifecycle of form field imports. +- exportStart/exportSuccess/exportFailed cover the lifecycle of form field exports. + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Import form fields](./import-formfields) +- [Import Export Events](./import-export-events) +- [Create form fields](../Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields) +- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md new file mode 100644 index 000000000..2f20c84c0 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md @@ -0,0 +1,156 @@ +--- +layout: post +title: Import form data in the TypeScript PDF Viewer component | Syncfusion +description: Learn how to import PDF form field data (FDF, XFDF, JSON, and from an object) using the Syncfusion TypeScript PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Import form data into PDF + +The PDF Viewer provides APIs to import interactive form field values into the currently loaded PDF. You can import from the following formats: + +- FDF +- XFDF +- JSON + +Supported API: +- importFormFields(sourceOrObject, format) + +Note: When using the server-backed viewer, set serviceUrl before importing. + +## Import as FDF + +```html + +
    +``` +```ts +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); + +const viewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +viewer.appendTo('#pdfViewer'); + +document.getElementById('importFdf')!.addEventListener('click', () => { + // The file for importing should be accessible at the given path or as a file stream depending on your integration + viewer.importFormFields('File', FormFieldDataFormat.Fdf); +}); +``` + +## Import as XFDF + +```html + +
    +``` +```ts +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); + +const viewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +viewer.appendTo('#pdfViewer'); + +document.getElementById('importXfdf')!.addEventListener('click', () => { + // The file for importing should be accessible at the given path or as a file stream depending on your integration + viewer.importFormFields('File', FormFieldDataFormat.Xfdf); +}); +``` + +## Import as JSON + +```html + +
    +``` +```ts +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); + +const viewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +viewer.appendTo('#pdfViewer'); + +document.getElementById('importJson')!.addEventListener('click', () => { + // The file for importing should be accessible at the given path or as a file stream depending on your integration + viewer.importFormFields('File', FormFieldDataFormat.Json); +}); +``` + +## Import as Object + +Import data previously exported with exportFormFieldsAsObject. Useful for client-side roundtrips without writing a file. + +```html + + +
    +``` +```ts +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); + +const viewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed + resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" +}); +viewer.appendTo('#pdfViewer'); + +let exportedData: object | undefined; + +document.getElementById('exportDataAsObject')!.addEventListener('click', () => { + viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(value => { + exportedData = value; + }); +}); + +document.getElementById('importData')!.addEventListener('click', () => { + if (exportedData) { + // Import the previously exported object data + viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf); + } + // Alternatives: + // viewer.importFormFields(exportedData, FormFieldDataFormat.Xfdf); + // viewer.importFormFields(exportedData, FormFieldDataFormat.Json); +}); +``` + +## Common use cases + +- Pre-fill application forms from your database using JSON. +- Migrate data from other PDF tools using FDF/XFDF. +- Restore user progress stored locally or on the server using object import. +- Combine with validation to block print/download until required fields are filled. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Export form fields](./export-formfields) +- [Import Export Events](./import-export-events) +- [Create form fields](../Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields) +- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md new file mode 100644 index 000000000..4866709a1 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Overview of Forms in TypeScript PDF Viewer Control | Syncfusion +description: Learn what the Form Designer in Syncfusion TypeScript PDF Viewer offers, supported field types, and how the topics are organized. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Overview of Forms in TypeScript PDF Viewer + +Syncfusion TypeScript PDF Viewer provides a complete forms experience. Design new forms or enhance existing PDFs, fill and validate fields, import or export data, and capture signatures — all via an intuitive UI and rich APIs. + +## Form Designer + +Create and customize interactive fields directly on the PDF page. +- Add fields: textbox, checkbox, radio button, dropdown, list box, signature, and initials +- Edit quickly: move, resize, align, distribute, copy/paste, undo/redo +- Configure properties: name, value, font, color, border, alignment, required/read-only/visibility, tab order +- Manage fields: select, group/ungroup, reorder, or delete +- Save and print: persist designed fields in the PDF and print with appearances +- Tailor the UI: show/hide or customize the Form Designer toolbar, and handle events for add/edit/select/move/resize + +## Form Fields + +Work with the runtime form fields present in a PDF (AcroForm). +- Parse and render existing fields +- Fill fields and validate input (required, read-only, print visibility) +- Import/Export form data as JSON, XFDF, FDF, or as a plain object +- Control interaction: toggle read-only, show/hide, and manage printing behavior + +## Supported form field types + +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field + +## Typical workflows + +- Design → Save → Fill: create or modify fields, save them into the PDF, then fill and validate +- Fill → Export/Import: complete forms and export data to JSON/XFDF/FDF, or import data to prefill +- Customize → Integrate: wire up events and business rules; tailor the designer toolbar for your app + +## See also + +- [Form filling](./form-filling) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Style form fields](./Create-edit-Style-del-formFields/style-formfields) +- [Group form fields](./group-formfields) +- [Form constraints](./form-constrain) +- [Form validation](./form-validation) +- [Form Fields API](./formfields-api) +- [Custom data on form fields](./custom-data) +- [Import form data](./import-export-formfields/import-formfields) +- [Export form data](./import-export-formfields/export-formfields) +- [Import/Export events](./import-export-formfields/import-export-events) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-filling.md deleted file mode 100644 index a6384128f..000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-filling.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -layout: post -title: Form filling in TypeScript PDF Viewer | Syncfusion -description: Learn to view, fill, export, and import PDF form fields in Syncfusion TS PDF Viewer, including disabling interaction and handling signatures. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Form filling in TypeScript 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 - -![Form filling in TypeScript PDF Viewer](./images/form-filling.png) - -## 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 ts tabtitle="index.ts" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"; -pdfviewer.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. - -![Signature field in TypeScript PDF Viewer](./images/form-filling-signature.png) - -* Draw the signature in the signature panel. - -![Signature panel in TypeScript PDF Viewer](./images/form-filling-signature-dialog.png) - -* Select **CREATE**. The drawn signature is added to the signature field. - -![Signature added in TypeScript PDF Viewer](./images/form-filling-signature-signed.png) - -## Delete a signature from a signature field - -Delete a signature placed in a signature field by using the Delete option in the annotation toolbar. - -![Deleting a signature in TypeScript PDF Viewer](./images/form-filling-signature-del.png) - -## 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-es6/form-designer/create-programmatically#export-and-import-form-fields). - -## See also - -* [Handwritten signature in TypeScript PDF Viewer](./annotations/signature-annotation) -* [Form Designer events](./form-designer/form-field-events) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md index ed5e332c4..57b48e59e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md @@ -62,4 +62,5 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts) * [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts) * [How to unload the PDF document from the viewer?](./how-to/unload-document) +* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/load-document-after-resources-loaded.md new file mode 100644 index 000000000..961514520 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/load-document-after-resources-loaded.md @@ -0,0 +1,66 @@ +--- +layout: post +title: Load document after resources Loaded JS(ES6) PDF Viewer | Syncfusion +description: Learn how to load a PDF only after assets are ready in the Syncfusion JavaScript (ES6) PDF Viewer (Standalone) using the resourcesLoaded event. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Load a PDF only after PDFium resources are ready + +In Standalone mode, the JavaScript (ES6) PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in resourceUrl. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready. + +## When does resourcesLoaded trigger? + +The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64). + +## How to Load Document after resourcesLoaded + +- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path). +- Listen to resourcesLoaded and call load inside the handler. + +```ts +import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; + +// Inject required modules +PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); + +const viewer: PdfViewer = new PdfViewer({ + resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib", + resourcesLoaded: onResourcesLoaded +}); +viewer.appendTo('#PdfViewer'); + // Sample sources to demonstrate both URL and Base64 loading + const documentUrl = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + const base64 ='data:application/pdf;base64,JVBERi0xLjMNCiX...';// supply your Base64 here when needed + + // Called when PDFium runtime assets have finished loading + function onResourcesLoaded() { + // Choose ONE of the following load options: + + // 1) Load by URL + viewer.load(documentUrl, ''); + + // 2) Load by Base64 (uncomment if you want to load Base64) + // if (base64) { + // viewer.load(base64, ''); + // } + } +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to) + +## Notes and best practices + +- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire. +- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks. +- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event. + +## See also + +- [Events in JavaScript PDF Viewer](../event#resourcesloaded) +- [Open PDF files](../open-pdf-files) +- [Save PDF files](../save-pdf-files) +- [Getting started](../getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formFields_properties.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formFields_properties.png new file mode 100644 index 000000000..d4535afa7 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formFields_properties.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupRadiobutton.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupRadiobutton.png new file mode 100644 index 000000000..82fc6ae48 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupRadiobutton.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupTextFileds.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupTextFileds.png new file mode 100644 index 000000000..2fd8e1b2f Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupTextFileds.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png new file mode 100644 index 000000000..41130691e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-style.png new file mode 100644 index 000000000..011c687fc Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-style.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox.png new file mode 100644 index 000000000..f9eb2003b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-del-formfields.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-del-formfields.png new file mode 100644 index 000000000..f8b3b2ff9 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-del-formfields.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-edit.png new file mode 100644 index 000000000..04b248ba5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-edit.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-style.png new file mode 100644 index 000000000..430321898 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-style.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown.png new file mode 100644 index 000000000..965cc22f9 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-edit.png new file mode 100644 index 000000000..87691cee0 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-edit.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-style.png new file mode 100644 index 000000000..7cd25ad64 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-style.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial.png new file mode 100644 index 000000000..302cd3b86 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-edit.png new file mode 100644 index 000000000..0c330076e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-edit.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-style.png new file mode 100644 index 000000000..a71cc3dde Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-style.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox.png new file mode 100644 index 000000000..45b7e47ff Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-edit.png new file mode 100644 index 000000000..e9eee2579 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-edit.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-style.png new file mode 100644 index 000000000..174897616 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-style.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password.png new file mode 100644 index 000000000..e98120ec4 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-edit.png new file mode 100644 index 000000000..d0d6f78f4 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-edit.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-style.png new file mode 100644 index 000000000..f323829b8 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-style.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton.png new file mode 100644 index 000000000..b24775cec Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-edit.png new file mode 100644 index 000000000..b5f1fdb11 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-edit.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-style.png new file mode 100644 index 000000000..8e7e4affd Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-style.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature.png new file mode 100644 index 000000000..ca2c5ad12 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-edit.png new file mode 100644 index 000000000..7e7fcd9ed Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-edit.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-style.png new file mode 100644 index 000000000..578ea19a7 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-style.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox.png new file mode 100644 index 000000000..3a70e27be Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/extract-pages.md new file mode 100644 index 000000000..a4c6c3dd3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/extract-pages.md @@ -0,0 +1,116 @@ +--- +layout: post +title: Extract Pages in TypeScript PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion TypeScript PDF Viewer control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Extract pages in TypeScript PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI, and also control extraction programmatically. +The Extract Pages tool is available by default in Organize Pages. + +## Extract Pages in Organize Pages + +- Open the Organize Pages panel in the PDF Viewer toolbar. +- Locate and click the Extract Pages option. + +![Extract Pages](../images/extract-page.png) + +When selected, a secondary toolbar dedicated to extraction is displayed. + +![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png) + +## Extract pages using the UI + +You can extract by typing page numbers/ranges or by selecting thumbnails. + +1. Click Extract Pages in the Organize Pages panel. +2. In the input box, enter the pages to extract. Supported formats include: + - Single pages: 1,3,5 + - Ranges: 2-6 + - Combinations: 1,4,7-9 +3. Alternatively, select the page thumbnails you want instead of typing values. +4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool. + +![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png) + + N> Page numbers are 1-based (first page is 1). You can start anywhere—enter single pages or ranges like 2-3, 5, or 7-9. Invalid or out-of-range entries are ignored. + +## Extraction options (checkboxes) + +Two options appear in the secondary toolbar: + +- **Delete Pages After Extracting:** + - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file. + - Example: If you enter 1,2 and extract, a PDF containing pages 1 and 2 is downloaded, and pages 1 and 2 are removed from the currently loaded document in the viewer. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. + - Example: If you select pages 3, 5, and 6, three separate PDFs are downloaded (3.pdf, 5.pdf, and 6.pdf). If you enter a range (e.g., 2-4), pages 2, 3, and 4 are each downloaded as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable Extract Pages + +Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`. + +Use the following code snippet to enable or disable the Extract Pages option: + +```ts +// Enable the Extract Pages Tool +viewer.pageOrganizerSettings = { canExtractPages: true }; +``` + +```ts +// Disable the Extract Pages Tool +viewer.pageOrganizerSettings = { canExtractPages: false }; +``` + +Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`. + +Use the following code snippet to remove the Extract Pages option: +```ts +// Remove the Extract Pages option entirely from the UI (redacted example as provided) +viewer.pageOrganizerSettings = { showExtractPagesOption: false } +``` + +### Extract pages and load the result programmatically + +You can extract pages programmatically using the `extractPages` method. +The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents. + +```html + +``` + +```ts +document.getElementById('extractPage').addEventListener('click', function () { + // Extract pages 1 and 2 + var array = viewer.extractPages("1,2"); + + // Load the extracted pages back into the viewer + viewer.load(array); + + // Inspect the result if needed + console.log(array); +}); +``` + +[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to) + +## See also + +- [Overview](../overview) +- [UI interactions](../ui-interactions) +- [Programmatic support](../programmatic-support) +- [Toolbar](../toolbar) +- [Events](../events) +- [Mobile view](../mobile-view) diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md new file mode 100644 index 000000000..c10795c98 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md @@ -0,0 +1,202 @@ +--- +layout: post +title: Redaction in mobile view in React PDF Viewer | Syncfusion +description: Learn how to apply redactions in mobile view using the Syncfusion React PDF Viewer with a complete toolbar setup and redaction workflow. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Redaction in Mobile View in React PdfViewer Component + +The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the React PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. + +![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) + +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. + +## Adding Redaction in Mobile View + +To enable redaction functionality in your React application, configure the PDF Viewer with the following setup: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // includes RedactionEditTool + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + return (
    +
    + + + +
    +
    ); + +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +## Understanding Mobile Redaction Toolbar Tools + +When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. + +### Redaction Annotation Tool + +The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: + +Function: Creates visual redaction annotations that mark content for permanent removal +Usage: +Touch and drag to draw rectangular redaction overlays on any content area. + +Process: +- Selected content appears with a customizable overlay (default black) +- Annotations remain editable until explicitly applied +- Can be repositioned or deleted before final application + +![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png) + +### Page Redaction Tool + +The Page Redaction tool enables batch redaction of entire pages based on specific patterns. + +![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) + +Function: Redacts complete pages or page ranges with a single action +Options Available: +- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) +- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) +- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) +- Current Page: Redacts only the currently displayed page + +Usage: +Select desired pattern → Review affected pages in the viewer → Confirm redaction scope + +![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png) + +### Redaction Properties Tool + +The Redaction Properties tool allows customization of redaction appearance before application. + +![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) + +Function: Customize the visual appearance of redaction overlays and text replacement +Customizable Properties: +- Fill Color: Change the redaction overlay color (default: black) +- Outline Color: Set outline color for redaction boxes (optional) +- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") +- Text Color: Change overlay text color for better visibility +- Text Font: Select font family for overlay text +- Text Alignment: Position overlay text within redaction boxes +- Text Size: Adjust overlay text size relative to redaction area + +![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png) + +## Enabling Redaction Mode in Mobile View + +Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. + +![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png) + +Step 2: From the redaction toolbar, select your desired redaction tool: +- First Tool (Redaction Annotation): For selective content redaction +- Second Tool (Page Redaction): For page-wide or pattern-based redaction +- Third Tool (Redaction Properties): For appearance customization + +Step 3: Configure your redaction parameters using the selected tool interface. + +## Applying Different Redaction Types in Mobile View + +### Selective Content Redaction +1. Select Redaction Annotation tool (first button) +2. Choose Content: Tap and drag over text or draw rectangular areas +3. Preview: Check redaction overlays for accuracy +4. Apply: Tap "Apply Redactions" button + +### Page-Wide Redaction +1. Select Page Redaction tool (second button) +2. Choose Pattern: Select odd pages, even pages, or custom range +3. Review: Verify affected pages in the viewer +4. Apply: Confirm page redaction scope and apply + +### Custom Appearance Redaction +1. Select Redaction Properties tool (third button) +2. Customize: Adjust colors, overlay text, and formatting +3. Preview: See changes applied to existing annotations +4. Apply: Use customized appearance for final redaction + +## Applying Redactions in Mobile View + +N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. + +Once you have configured redactions using any combination of tools. + +Step 1: Review all redaction marks and configurations. + +![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png) + +Step 2: Tap the Apply Redactions button in the redaction toolbar + +![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png) + +Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone + +![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png) + +The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). + +![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png) + +## Removing Redaction Annotations + +To remove existing redaction annotations before they are applied: + +- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode +- Step 2: Tap on any existing redaction annotation you wish to remove +- Step 3: Select Delete from the context menu that appears + +Alternative: Tap redaction annotation → Use delete button in annotation properties panel + +![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) + +N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. + +## See Also + +* [Redaction Overview](./overview) +* [UI Interaction](./ui-interaction) +* [Programmatic Support in Redaction](./programmatic-support) +* [Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md new file mode 100644 index 000000000..50cff678f --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md @@ -0,0 +1,133 @@ +--- +layout: post +title: Redaction annotation in React PDF Viewer | Syncfusion +description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion React PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Redaction in React PdfViewer + +Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion React PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // includes RedactionEditTool + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + return (
    +
    + + + +
    +
    ); + +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +N> Prerequisites: Add the PdfViewer control to your React application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) + +## Add Redaction Annotations + +You can mark specific content for redaction using the toolbar or through code. + +Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. + +![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) + +## Delete Redaction Annotations + +Redaction annotations can be removed easily: + +- Click the **Delete** button on the toolbar, or +- Select the annotation and press the **Delete** key. + +![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) + +## Redact Entire Pages + +The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. + +![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) + +## Apply Redaction + +Once annotations are added, you can permanently apply them to the document. This action cannot be undone. + +Use the **Apply Redaction** button on the toolbar or call the API method: + +- The button is disabled until at least one redaction annotation exists. +- It becomes active when redaction annotations are present. + +![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) + +N> After redaction is applied, the original content cannot be recovered. + +## Comment Support + +Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction. + +Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments). + +## Import and Export Redaction Annotations + +You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions. + +For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation). + +## See also + +* [Redaction UI interactions](./ui-interaction) +* [Redaction Programmatic support](./programmatic-support) +* [Redaction Toolbar](./toolbar) +* [Redaction Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md new file mode 100644 index 000000000..5e0db5078 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md @@ -0,0 +1,711 @@ +--- +layout: post +title: Redaction Programmatic support in React PDF Viewer | Syncfusion +description: Learn how to add, delete, update, and apply redaction annotations programmatically in the Syncfusion React PDF Viewer. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Programmatic support for redaction in React PdfViewer + +The Syncfusion React PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // includes RedactionEditTool + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + return (
    +
    + + + +
    +
    ); + +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +## Add redaction annotations programmatically + +You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import './index.css'; +import { + PdfViewerComponent, + LinkAnnotation, + BookmarkView, + Magnification, + ThumbnailView, + Toolbar, + Navigation, + Annotation, + TextSearch, + TextSelection, + Print, + FormFields, + FormDesigner, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = React.useRef(null); + + const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + const addRedaction = () => { + if (!viewerRef.current) return; + const viewer = viewerRef.current; + viewer.annotation.addAnnotation('Redaction', { + bound: { x: 200, y: 480, width: 150, height: 75 }, + pageNumber: 1, + markerFillColor: '#0000FF', + markerBorderColor: 'white', + fillColor: 'red', + overlayText: 'Confidential', + fontColor: 'yellow', + fontFamily: 'Times New Roman', + fontSize: 8, + beforeRedactionsApplied: false + }); + }; + + const onAnnotationAdd = (args) => { + console.log('Annotation added:', args); + }; + + return ( +
    +
    + +
    + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +## Delete redaction annotations programmatically + +Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + Annotation, + TextSearch, + FormFields, + FormDesigner, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = React.useRef(null); + + const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + const deleteAnnotationById = () => { + if (!viewerRef.current) return; + const id = (viewerRef.current).annotationCollection?.[0]?.annotationId; + if (id) { + viewerRef.current.annotationModule.deleteAnnotationById(id); + } + }; + + return ( +
    +
    + +
    + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + + +Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key. + +## Update redaction annotation properties programmatically + +You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + Annotation, + TextSearch, + FormFields, + FormDesigner, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = React.useRef(null); + + const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + const editRedactAnnotation = () => { + if (!viewerRef.current) return; + const collection = viewerRef.current.annotationCollection || []; + for (let i = 0; i < collection.length; i++) { + if (collection[i].subject === 'Redaction') { + collection[i].overlayText = 'EditedAnnotation'; + collection[i].markerFillColor = '#22FF00'; + collection[i].markerBorderColor = '#000000'; + collection[i].isRepeat = true; + collection[i].fillColor = '#F8F8F8'; + collection[i].fontColor = '#333333'; + collection[i].fontSize = 14; + collection[i].fontFamily = 'Symbol'; + collection[i].textAlign = 'Right'; + collection[i].beforeRedactionsApplied = false; + viewerRef.current.annotation.editAnnotation(collection[i]); + } + } + }; + + return ( +
    +
    + +
    + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +## Add page redactions programmatically + +Entire pages can be marked for redaction using the `addPageRedactions` method: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + Annotation, + TextSearch, + FormFields, + FormDesigner, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = React.useRef(null); + + const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + const addPageRedactions = () => { + if (!viewerRef.current) return; + viewerRef.current.annotation.addPageRedactions([1, 3, 5, 7]); + }; + + return ( +
    +
    + +
    + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +## Apply redaction programmatically + +Once annotations are added, you can permanently apply them to the document using the `redact` method: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + Annotation, + TextSearch, + FormFields, + FormDesigner, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = React.useRef(null); + + const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + const applyRedaction = () => { + if (!viewerRef.current) return; + viewerRef.current.annotation.redact(); + }; + + return ( +
    +
    + +
    + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. + +## Configure default redaction annotation properties + +You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + Annotation, + TextSearch, + FormFields, + FormDesigner, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = React.useRef(null); + + const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + React.useEffect(() => { + if (!viewerRef.current) return; + viewerRef.current.redactionSettings = { + overlayText: 'Confidential', + markerFillColor: '#FF0000', + markerBorderColor: '#000000', + isRepeat: false, + fillColor: '#F8F8F8', + fontColor: '#333333', + fontSize: 14, + fontFamily: 'Symbol', + textAlign: 'Right' + }; + }, []); + + return ( +
    + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## Redaction property panel + +The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. + +![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) + +## See also + +* [Overview of Redaction](./overview) +* [Redaction UI interactions](./ui-interaction) +* [Redaction Toolbar](./toolbar) +* [Reaction in Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/adding-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/adding-redaction-annotation.png new file mode 100644 index 000000000..b25b31126 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/adding-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/applied-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/applied-redaction-annot.png new file mode 100644 index 000000000..f6a6a2831 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/applied-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-button-mv.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-button-mv.png new file mode 100644 index 000000000..bd02a6bc3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-button-mv.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png new file mode 100644 index 000000000..0dea706e6 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-dialog.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-dialog.png new file mode 100644 index 000000000..0692de34e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-dialog.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png new file mode 100644 index 000000000..8e061a883 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/moving-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/moving-redaction-annotation.png new file mode 100644 index 000000000..f7715e2d1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/moving-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-annot.png new file mode 100644 index 000000000..bf4804998 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png new file mode 100644 index 000000000..69658a826 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-panel.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-panel.png new file mode 100644 index 000000000..be68305ae Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/page-redaction-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-button-icon.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-button-icon.png new file mode 100644 index 000000000..954df393d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-button-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-page-icon.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-page-icon.png new file mode 100644 index 000000000..0c9dbed27 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-page-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-text-context-menu.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-text-context-menu.png new file mode 100644 index 000000000..a88985b39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redact-text-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-annot.png new file mode 100644 index 000000000..5e9cde040 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-delete-context-menu.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-delete-context-menu.png new file mode 100644 index 000000000..cd8f38b82 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-delete-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-delete-icon.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-delete-icon.png new file mode 100644 index 000000000..4026f8c49 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-delete-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-icon-toolbar.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-icon-toolbar.png new file mode 100644 index 000000000..6de03e8cc Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-icon-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-mobile-view.png new file mode 100644 index 000000000..2d9539200 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-mobile-view.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-properties-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-properties-annot.png new file mode 100644 index 000000000..079e65e59 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-properties-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png new file mode 100644 index 000000000..5a56fb1d5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-property-panel-icon.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-property-panel-icon.png new file mode 100644 index 000000000..3cc44eb64 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-property-panel-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png new file mode 100644 index 000000000..08d9a3a6a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/resizing-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/resizing-redaction-annotation.png new file mode 100644 index 000000000..846e301da Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/resizing-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png new file mode 100644 index 000000000..a78383509 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/show-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/show-redaction-toolbar.png new file mode 100644 index 000000000..94d75eb3b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/show-redaction-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md new file mode 100644 index 000000000..4cfd7e47f --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md @@ -0,0 +1,170 @@ +--- +layout: post +title: Search text and redact in React PDF Viewer | Syncfusion +description: Learn how to find text and add redaction annotations programmatically in the Syncfusion React PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Search text and redact in React PdfViewer + +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. + +N> Prerequisites: Add the PdfViewer control to your React application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +## Steps to add Redaction annotations on search Text Bounds + +**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample. + + +**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + Annotation, + TextSearch, + FormFields, + FormDesigner, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = React.useRef(null); + + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + const px = (pt) => (pt * 96) / 72; // points -> pixels + + const searchTextAndRedact = async () => { + if (!viewerRef.current) return; + const term = 'syncfusion'; + const results = await viewerRef.current.textSearchModule.findTextAsync(term, false); + if (!results || results.length === 0) { + console.warn('No matches found.'); + return; + } + + for (const pageResult of results) { + if (!pageResult?.bounds?.length) continue; + const pageNumber = (pageResult.pageIndex ?? -1) + 1; // 1-based + if (pageNumber < 1) continue; + + for (const bound of pageResult.bounds) { + viewerRef.current.annotation.addAnnotation('Redaction', { + bound: { + x: px(bound.x), + y: px(bound.y), + width: px(bound.width), + height: px(bound.height) + }, + pageNumber, + overlayText: 'Confidential', + fillColor: '#00FF40FF', + fontColor: '#333333', + fontSize: 12, + fontFamily: 'Arial', + markerFillColor: '#FF0000', + markerBorderColor: '#000000' + }); + } + } + }; + + const applyRedaction = () => { + if (!viewerRef.current) return; + viewerRef.current.annotation.redact(); + }; + + return ( +
    +
    + + +
    + + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## Notes +- Ensure the PDF is fully loaded before triggering extraction and search. +- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates. +- Customize overlay text, colors, and typography as needed. +- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [UI interactions](./ui-interaction) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md new file mode 100644 index 000000000..e1fdc7a06 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md @@ -0,0 +1,196 @@ +--- +layout: post +title: Customize the redaction toolbar in React PDF Viewer | Syncfusion +description: Learn how to customize the redaction toolbar in the Syncfusion React PDF Viewer by showing or hiding default items. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction toolbar customization in React + +The redaction toolbar in the Syncfusion React PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // includes RedactionEditTool + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // Redaction entry in the primary toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + return (
    +
    + + + +
    +
    ); + +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +Refer to the following image for the toolbar view: + +![Enable redaction toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +## Show or hide the redaction toolbar + +You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. + +### Display the redaction toolbar using the toolbar icon + +When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. + +![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +### Display the redaction toolbar programmatically + +You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. + +The following example demonstrates toggling the redaction toolbar programmatically: + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + Annotation, + TextSearch, + FormFields, + FormDesigner, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = React.useRef(null); + + const toolbarSettings = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + const showRedactionToolbar = () => { + if (!viewerRef.current) return; + viewerRef.current.toolbar.showRedactionToolbar(true); + }; + + const hideRedactionToolbar = () => { + if (!viewerRef.current) return; + viewerRef.current.toolbar.showRedactionToolbar(false); + }; + + return ( +
    +
    + + +
    + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +Refer to the following image for details: + +![Programmatically show the Redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) + +## See also + +* [Adding the redaction annotation in PDF viewer](../redaction/overview) +* [UI interactions](./ui-interaction) +* [Programmatic support](./programmatic-support) +* [Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md new file mode 100644 index 000000000..f0ddd480e --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Redaction UI interactions in React PDF Viewer | Syncfusion +description: Learn about UI interactions in Redaction annotations of the Syncfusion React PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction UI interactions in React PdfViewer + +## Add redaction annotations from the toolbar + +Use the redaction tool in the toolbar to draw over content that should be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties. + +![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) + +#### Redaction annotations are interactive + +* **Movable** – Drag and reposition the annotation within the same page. +![Moving a redaction annotation](redaction-annotations-images/moving-redaction-annotation.png) + +* **Resizable** – Resize the annotation to cover the required area. +![Resizing a redaction annotation](redaction-annotations-images/resizing-redaction-annotation.png) + +N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see the [Toolbar customization](../toolbar). + +## Add redaction annotations using the context menu + +In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. + +![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) + +## Update redaction properties + +After adding a redaction annotation, you can update its properties through the property panel or programmatically. + +### Update using the property panel + +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. + +The property panel can be opened in two ways: + +* By clicking the **redaction property panel** icon in the toolbar. +![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) + +* By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. +![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) + +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + +## Delete redaction annotations + +Delete redaction annotations using any of the following: + +* **Right-click and select Delete** from the context menu. + +![Context menu showing Delete for a redaction](redaction-annotations-images/redaction-delete-context-menu.png) + +* **Click the Delete button** on the toolbar. +![Toolbar delete icon for redaction](redaction-annotations-images/redaction-delete-icon.png) + +* **Press the Delete key** after selecting the annotation. + +## Redact pages using the UI + +Entire pages can be marked for redaction using the **Redact Pages** option in the toolbar. Clicking the icon opens a dialog with options: + +* **Current Page** – Redacts the page currently in view. +* **Odd Pages Only** – Redacts all odd‑numbered pages. +* **Even Pages Only** – Redacts all even‑numbered pages. +* **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. + +After choosing the range, click **Save** to apply redaction marks to the selected pages. + +![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) + +## Apply redaction from the toolbar + +The **Apply Redaction** button permanently removes all marked content from the document. + +* The button is disabled when no redaction annotations exist. +* It automatically enables once at least one annotation is present. + +![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) + +N> Redaction is permanent. Once applied, the original content cannot be restored. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/shape-annotation.md index 73c961aa4..120f01c6e 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/annotation/shape-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/shape-annotation.md @@ -110,7 +110,7 @@ root.render(); ## Add a shape annotation to the PDF document programmatically -The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#annotation) method. +The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#annotation) method. Here is an example showing how to add shape annotations programmatically using addAnnotation(): @@ -621,4 +621,6 @@ root.render(); {% endraw %} {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +N> In both [Arrow](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#linesettings) annotations Settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled. diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md index dba935c59..68ba16283 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md @@ -62,4 +62,4 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts) * [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts) * [How to unload the PDF document from the viewer?](./how-to/unload-document) - +* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md new file mode 100644 index 000000000..780cf9095 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md @@ -0,0 +1,115 @@ +--- +layout: post +title: Load document after resources Loaded React PDF Viewer | Syncfusion +description: Learn how to load a PDF only after assets are ready in the Syncfusion React PDF Viewer (Standalone) using the resourcesLoaded event. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Load a PDF only after PDFium resources are ready + +In Standalone mode, the React PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in resourceUrl. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready. + +## When does resourcesLoaded trigger? + +The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64). + +## How to Load Document after resourcesLoaded + +- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path). +- Listen to resourcesLoaded and call load inside the handler. + +```js +//index.js +import React, { useRef, useCallback } from 'react'; +import { createRoot } from 'react-dom/client'; +import './index.css'; + +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + ThumbnailView, + BookmarkView, + TextSelection, + Annotation, + FormDesigner, + FormFields, + PageOrganizer, + Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + + const onResourcesLoaded = useCallback(() => { + // Choose ONE of the following load options: + + // 1) Load by URL (recommended for your case) + viewerRef.current?.load( + 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + '' + ); + + // 2) Load by Base64 (uncomment if needed) + // supply your Base64 string + // const base64 ='data:application/pdf;base64,JVBERi0xLjMNCiXi48...'; + + // if (base64) { + // viewerRef.current?.load(base64, ''); + // } + }, []); + + return ( +
    + + + +
    + ); +} + +// Mount (make sure you have
    in index.html) +const container = document.getElementById('sample'); +const root = createRoot(container); +root.render(); +``` + +[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to) + +## Notes and best practices + +- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire. +- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks. +- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event. + +## See also + +- [Events in React PDF Viewer](../events#resourcesloaded) +- [Open PDF files](../open-pdf-files) +- [Save PDF files](../save-pdf-files) +- [Getting started](../getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md new file mode 100644 index 000000000..4fab3cd57 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md @@ -0,0 +1,184 @@ +--- +layout: post +title: Extract Pages in React PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Extract pages in React PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI. +The Extract Pages tool is available by default in Organize Pages. + +## Extract Pages in Organize Pages + +- Open the Organize Pages panel in the PDF Viewer toolbar. +- Locate and click the Extract Pages option. + +![Extract Pages](../images/extract-page.png) + +When selected, a secondary toolbar dedicated to extraction is displayed. + +![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png) + +## Extract pages using the UI + +You can extract by typing page numbers/ranges or by selecting thumbnails. + +1. Click Extract Pages in the Organize Pages panel. +2. In the input box, enter the pages to extract. Supported formats include: + - Single pages: 1,3,5 + - Ranges: 2-6 + - Combinations: 1,4,7-9 +3. Alternatively, select the page thumbnails you want instead of typing values. +4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool. + +![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png) + + N> Page numbers are 1-based (first page is 1). You can start anywhere—enter single pages or ranges like 2-3, 5, or 7-9. Invalid or out-of-range entries are ignored. + +## Extraction options (checkboxes) + +Two options appear in the secondary toolbar: + +- **Delete Pages After Extracting:** + - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file. + - Example: If you enter 1,2 and extract, a PDF containing pages 1 and 2 is downloaded, and pages 1 and 2 are removed from the currently loaded document in the viewer. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. + - Example: If you select pages 3, 5, and 6, three separate PDFs are downloaded (3.pdf, 5.pdf, and 6.pdf). If you enter a range (e.g., 2-4), pages 2, 3, and 4 are each downloaded as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable Extract Pages + +Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`. + +Use the following code snippet to enable or disable the Extract Pages option: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, PageOrganizer} from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // Enable Extract Pages Tool + const pageOrganizerSettings = { canExtractPages: true}; + return (
    +
    + + + +
    +
    ); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`. + +Use the following code snippet to remove the Extract Pages option: + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, PageOrganizer} from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // Enable Extract Pages Tool + const pageOrganizerSettings = { showExtractPagesOption: false}; + return (
    +
    + + + +
    +
    ); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Extract pages and load the result programmatically + +You can extract pages programmatically using the `extractPages` method. +The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, PageOrganizer} from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // Enable Extract Pages Tool + const pageOrganizerSettings = { canExtractPages: true}; + return (
    +
    + + + + +
    +
    ); +} +function extractPage(){ +// Get the PDF viewer instance + var viewer = document.getElementById('container').ej2_instances[0]; + //Extract Pages 1,2 + const array = viewer.extractPages('1,2'); + //Load in viewer + viewer.load(array,''); + + //print base64 to ensure + console.log(array); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to) + +## See also + +- [Overview](../overview) +- [UI interactions](../ui-interactions) +- [Programmatic support](../programmatic-support) +- [Toolbar](../toolbar) +- [Events](../events) +- [Mobile view](../mobile-view) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/mobile-view.md new file mode 100644 index 000000000..defa21701 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/mobile-view.md @@ -0,0 +1,237 @@ +--- +layout: post +title: Redaction in mobile view in Vue PDF Viewer | Syncfusion +description: Learn how to apply redactions in mobile view using the Syncfusion Vue PDF Viewer with a complete toolbar setup and redaction workflow. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Redaction in Mobile View in Vue PdfViewer Component + +The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the Vue PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. + +![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) + +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. + +## Adding Redaction in Mobile View + +To enable redaction functionality in your Vue application, configure the PDF Viewer with the following setup: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## Understanding Mobile Redaction Toolbar Tools + +When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. + +### Redaction Annotation Tool + +The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: + +Function: Creates visual redaction annotations that mark content for permanent removal +Usage: +Touch and drag to draw rectangular redaction overlays on any content area. + +Process: +- Selected content appears with a customizable overlay (default black) +- Annotations remain editable until explicitly applied +- Can be repositioned or deleted before final application + +![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png) + +### Page Redaction Tool + +The Page Redaction tool enables batch redaction of entire pages based on specific patterns. + +![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) + +Function: Redacts complete pages or page ranges with a single action +Options Available: +- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) +- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) +- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) +- Current Page: Redacts only the currently displayed page + +Usage: +Select desired pattern → Review affected pages in the viewer → Confirm redaction scope + +![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png) + +### Redaction Properties Tool + +The Redaction Properties tool allows customization of redaction appearance before application. + +![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) + +Function: Customize the visual appearance of redaction overlays and text replacement +Customizable Properties: +- Fill Color: Change the redaction overlay color (default: black) +- Outline Color: Set outline color for redaction boxes (optional) +- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") +- Text Color: Change overlay text color for better visibility +- Text Font: Select font family for overlay text +- Text Alignment: Position overlay text within redaction boxes +- Text Size: Adjust overlay text size relative to redaction area + +![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png) + +## Enabling Redaction Mode in Mobile View + +Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. + +![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png) + +Step 2: From the redaction toolbar, select your desired redaction tool: +- First Tool (Redaction Annotation): For selective content redaction +- Second Tool (Page Redaction): For page-wide or pattern-based redaction +- Third Tool (Redaction Properties): For appearance customization + +Step 3: Configure your redaction parameters using the selected tool interface. + +## Applying Different Redaction Types in Mobile View + +### Selective Content Redaction +1. Select Redaction Annotation tool (first button) +2. Choose Content: Tap and drag over text or draw rectangular areas +3. Preview: Check redaction overlays for accuracy +4. Apply: Tap "Apply Redactions" button + +### Page-Wide Redaction +1. Select Page Redaction tool (second button) +2. Choose Pattern: Select odd pages, even pages, or custom range +3. Review: Verify affected pages in the viewer +4. Apply: Confirm page redaction scope and apply + +### Custom Appearance Redaction +1. Select Redaction Properties tool (third button) +2. Customize: Adjust colors, overlay text, and formatting +3. Preview: See changes applied to existing annotations +4. Apply: Use customized appearance for final redaction + +## Applying Redactions in Mobile View + +N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. + +Once you have configured redactions using any combination of tools. + +Step 1: Review all redaction marks and configurations. + +![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png) + +Step 2: Tap the Apply Redactions button in the redaction toolbar + +![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png) + +Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone + +![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png) + +The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). + +![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png) + +## Removing Redaction Annotations + +To remove existing redaction annotations before they are applied: + +- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode +- Step 2: Tap on any existing redaction annotation you wish to remove +- Step 3: Select Delete from the context menu that appears + +Alternative: Tap redaction annotation → Use delete button in annotation properties panel + +![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png) + +N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. + +## See Also + +* [Redaction Overview](./overview) +* [UI Interaction](./ui-interaction) +* [Programmatic Support in Redaction](./programmatic-support) +* [Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md new file mode 100644 index 000000000..288120519 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md @@ -0,0 +1,165 @@ +--- +layout: post +title: Redaction annotation in Vue PDF Viewer | Syncfusion +description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion Vue PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Redaction in Vue PdfViewer + +Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion Vue PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + +N> Prerequisites: Add the PdfViewer control to your Vue application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) + +## Add Redaction Annotations + +You can mark specific content for redaction using the toolbar or through code. + +Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. + +![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) + +## Delete Redaction Annotations + +Redaction annotations can be removed easily: + +- Click the **Delete** button on the toolbar, or +- Select the annotation and press the **Delete** key. + +![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) + +## Redact Entire Pages + +The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. + +![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) + +## Apply Redaction + +Once annotations are added, you can permanently apply them to the document. This action cannot be undone. + +Use the **Apply Redaction** button on the toolbar or call the API method: + +- The button is disabled until at least one redaction annotation exists. +- It becomes active when redaction annotations are present. + +![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) + +N> After redaction is applied, the original content cannot be recovered. + +## Comment Support + +Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction. + +Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments). + +## Import and Export Redaction Annotations + +You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions. + +For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation). + +## See also + +* [Redaction UI interactions](./ui-interaction) +* [Redaction Programmatic support](./programmatic-support) +* [Redaction Toolbar](./toolbar) +* [Redaction Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md new file mode 100644 index 000000000..ce7852ed7 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md @@ -0,0 +1,740 @@ +--- +layout: post +title: Redaction Programmatic support in Vue PDF Viewer | Syncfusion +description: Learn how to add, delete, update, and apply redaction annotations programmatically in the Syncfusion Vue PDF Viewer. +platform: document-processing +control: PdfViewer +documentation: ug +--- + +# Programmatic support for redaction in Vue PdfViewer + +The Syncfusion Vue PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + +## Add redaction annotations programmatically + +You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added. + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + +{% endhighlight %} +{% endtabs %} + +## Delete redaction annotations programmatically + +Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + + +Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key. + +## Update redaction annotation properties programmatically + +You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + +## Add page redactions programmatically + +Entire pages can be marked for redaction using the `addPageRedactions` method: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + +## Apply redaction programmatically + +Once annotations are added, you can permanently apply them to the document using the `redact` method: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. + +## Configure default redaction annotation properties + +You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) + +## Redaction property panel + +The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. + +![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) + +## See also + +* [Overview of Redaction](./overview) +* [Redaction UI interactions](./ui-interaction) +* [Redaction Toolbar](./toolbar) +* [Reaction in Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/adding-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/adding-redaction-annotation.png new file mode 100644 index 000000000..b25b31126 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/adding-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/after-redaction-fill-color.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/after-redaction-fill-color.png new file mode 100644 index 000000000..f855a867a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/after-redaction-fill-color.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/applied-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/applied-redaction-annot.png new file mode 100644 index 000000000..f6a6a2831 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/applied-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-button-mv.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-button-mv.png new file mode 100644 index 000000000..bd02a6bc3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-button-mv.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png new file mode 100644 index 000000000..0dea706e6 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-dialog-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-dialog.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-dialog.png new file mode 100644 index 000000000..0692de34e Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/apply-redaction-dialog.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png new file mode 100644 index 000000000..8e061a883 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/delete-redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/moving-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/moving-redaction-annotation.png new file mode 100644 index 000000000..f7715e2d1 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/moving-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-annot.png new file mode 100644 index 000000000..bf4804998 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png new file mode 100644 index 000000000..69658a826 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-panel.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-panel.png new file mode 100644 index 000000000..be68305ae Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/page-redaction-panel.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-button-icon.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-button-icon.png new file mode 100644 index 000000000..954df393d Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-button-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-page-icon.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-page-icon.png new file mode 100644 index 000000000..0c9dbed27 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-page-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-text-context-menu.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-text-context-menu.png new file mode 100644 index 000000000..a88985b39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redact-text-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-annot.png new file mode 100644 index 000000000..5e9cde040 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-appearance.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-appearance.png new file mode 100644 index 000000000..506dd4f87 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-annotation-appearance.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-delete-context-menu.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-delete-context-menu.png new file mode 100644 index 000000000..cd8f38b82 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-delete-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-delete-icon.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-delete-icon.png new file mode 100644 index 000000000..4026f8c49 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-delete-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-icon-toolbar.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-icon-toolbar.png new file mode 100644 index 000000000..6de03e8cc Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-icon-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-mobile-view.png new file mode 100644 index 000000000..2d9539200 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-mobile-view.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-overalytext.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-overalytext.png new file mode 100644 index 000000000..b9d833921 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-overalytext.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-properties-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-properties-annot.png new file mode 100644 index 000000000..079e65e59 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-properties-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png new file mode 100644 index 000000000..5a56fb1d5 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-properties-dialog-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-property-panel-icon.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-property-panel-icon.png new file mode 100644 index 000000000..3cc44eb64 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-property-panel-icon.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png new file mode 100644 index 000000000..08d9a3a6a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/redaction-property-panel-via-context-menu.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/resizing-redaction-annotation.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/resizing-redaction-annotation.png new file mode 100644 index 000000000..846e301da Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/resizing-redaction-annotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png new file mode 100644 index 000000000..a78383509 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/review-redaction-annotation-mv-annot.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/show-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/show-redaction-toolbar.png new file mode 100644 index 000000000..94d75eb3b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/redaction-annotations-images/show-redaction-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/search-redact.md new file mode 100644 index 000000000..1a8b6884c --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/search-redact.md @@ -0,0 +1,173 @@ +--- +layout: post +title: Search text and redact in Vue PDF Viewer | Syncfusion +description: Learn how to find text and add redaction annotations programmatically in the Syncfusion Vue PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Search text and redact in Vue PdfViewer + +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. + +N> Prerequisites: Add the PdfViewer control to your Vue application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. + +## Steps to add Redaction annotations on search Text Bounds + +**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/Vue/getting-started) to create a simple PDF Viewer sample. + + +**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) + +## Notes +- Ensure the PDF is fully loaded before triggering extraction and search. +- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates. +- Customize overlay text, colors, and typography as needed. +- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [UI interactions](./ui-interaction) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/toolbar.md new file mode 100644 index 000000000..008242e72 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/toolbar.md @@ -0,0 +1,231 @@ +--- +layout: post +title: Customize the redaction toolbar in Vue PDF Viewer | Syncfusion +description: Learn how to customize the redaction toolbar in the Syncfusion Vue PDF Viewer by showing or hiding default items. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction toolbar customization in Vue + +The redaction toolbar in the Syncfusion Vue PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. + +## Enable the redaction toolbar + +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. + +The following example shows how to enable the redaction toolbar: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + +Refer to the following image for the toolbar view: + +![Enable redaction toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +## Show or hide the redaction toolbar + +You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. + +### Display the redaction toolbar using the toolbar icon + +When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. + +![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) + +### Display the redaction toolbar programmatically + +You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. + +The following example demonstrates toggling the redaction toolbar programmatically: + +{% tabs %} +{% highlight html tabtitle="App.vue" %} + + +{% endhighlight %} +{% endtabs %} + +[View Sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) + +Refer to the following image for details: + +![Programmatically show the Redaction toolbar](../redaction/redaction-annotations-images/show-redaction-toolbar.png) + +## See also + +* [Adding the redaction annotation in PDF viewer](../redaction/overview) +* [UI interactions](./ui-interaction) +* [Programmatic support](./programmatic-support) +* [Mobile view](./mobile-view) +* [Search Text and Redact](./search-redact) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md new file mode 100644 index 000000000..c50de00d7 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Redaction UI interactions in Vue PDF Viewer | Syncfusion +description: Learn about UI interactions in Redaction annotations of the Syncfusion Vue PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Redaction UI interactions in Vue PdfViewer + +## Add redaction annotations from the toolbar + +Use the redaction tool in the toolbar to draw over content that should be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties. + +![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png) + +#### Redaction annotations are interactive + +* **Movable** – Drag and reposition the annotation within the same page. +![Moving a redaction annotation](redaction-annotations-images/moving-redaction-annotation.png) + +* **Resizable** – Resize the annotation to cover the required area. +![Resizing a redaction annotation](redaction-annotations-images/resizing-redaction-annotation.png) + +N> The redaction tool is hidden by default. Customize the toolbar to include it. For instructions, see the [Toolbar customization](../toolbar). + +## Add redaction annotations using the context menu + +In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. + +![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) + +## Update redaction properties + +After adding a redaction annotation, you can update its properties through the property panel or programmatically. + +### Update using the property panel + +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. + +The property panel can be opened in two ways: + +* By clicking the **redaction property panel** icon in the toolbar. +![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) + +* By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. +![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png) + +#### General tab + +Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover. + +* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area. +* Overlay Text – Enter the text to display. +* Repeat Overlay Text – Tile the text to cover the whole region. + +![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png) + +* Font options – Choose family, size, color, and alignment for the overlay text. +* Fill Color – Select the color that will fill the region after redaction is applied. + +![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) + +Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. + +#### Appearance tab + +Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output. + +* Fill Color – Sets the annotation’s fill while you review and move/resize it. +* Outline Color – Optional border for the annotation. +* Fill Opacity – Controls how transparent the annotation appears during review. + +Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings. + +![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png) + +### What changes after applying redaction? + +When you click Apply Redaction: + +* The selected content is permanently removed from the page. +* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. +* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. +* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. + +## Delete redaction annotations + +Delete redaction annotations using any of the following: + +* **Right-click and select Delete** from the context menu. + +![Context menu showing Delete for a redaction](redaction-annotations-images/redaction-delete-context-menu.png) + +* **Click the Delete button** on the toolbar. +![Toolbar delete icon for redaction](redaction-annotations-images/redaction-delete-icon.png) + +* **Press the Delete key** after selecting the annotation. + +## Redact pages using the UI + +Entire pages can be marked for redaction using the **Redact Pages** option in the toolbar. Clicking the icon opens a dialog with options: + +* **Current Page** – Redacts the page currently in view. +* **Odd Pages Only** – Redacts all odd‑numbered pages. +* **Even Pages Only** – Redacts all even‑numbered pages. +* **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. + +After choosing the range, click **Save** to apply redaction marks to the selected pages. + +![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) + +## Apply redaction from the toolbar + +The **Apply Redaction** button permanently removes all marked content from the document. + +* The button is disabled when no redaction annotations exist. +* It automatically enables once at least one annotation is present. + +![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) + +A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. + +![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) + +N> Redaction is permanent. Once applied, the original content cannot be restored. + +## See also + +* [Overview of Redaction](./overview) +* [Programmatic Support in Redaction](./programmatic-support) +* [Redaction in Mobile View](./mobile-view) +* [Redaction Toolbar](./toolbar) +* [Search Text and Redact](./search-redact) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md index 957b20749..02324b590 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md @@ -61,3 +61,4 @@ The frequently asked questions in Essential® PDF Viewer are liste * [How to convert pixel to point in server side?](./how-to/convert-pixel-to-point-in-server-side) * [Why is the web service not listening?](./how-to/webservice-not-listening) * [How to select annotation?](./how-to/select-annotation) +* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to/load-document-after-resources-loaded.md new file mode 100644 index 000000000..f2c518064 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to/load-document-after-resources-loaded.md @@ -0,0 +1,111 @@ +--- +layout: post +title: Load document after resources Loaded Vue PDF Viewer | Syncfusion +description: Learn how to load a PDF only after assets are ready in the Syncfusion Vue PDF Viewer (Standalone) using the resourcesLoaded event. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Load a PDF only after PDFium resources are ready + +In Standalone mode, the Vue PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in resourceUrl. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready. + +## When does resourcesLoaded trigger? + +The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64). + +## How to Load Document after resourcesLoaded + +- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path). +- Listen to resourcesLoaded and call load inside the handler. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to) + +## Notes and best practices + +- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire. +- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks. +- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event. + +## See also + +- [Events in Vue PDF Viewer](../event#resourcesloaded) +- [Open PDF files](../open-pdf-files) +- [Save PDF files](../save-pdf-files) +- [Getting started](../getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/vue/organize-pages/extract-pages.md new file mode 100644 index 000000000..dc28eb51e --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/organize-pages/extract-pages.md @@ -0,0 +1,214 @@ +--- +layout: post +title: Extract Pages in Vue PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Extract pages in Vue PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI. +The Extract Pages tool is available by default in Organize Pages. + +## Extract Pages in Organize Pages + +- Open the Organize Pages panel in the PDF Viewer toolbar. +- Locate and click the Extract Pages option. + +![Extract Pages](../images/extract-page.png) + +When selected, a secondary toolbar dedicated to extraction is displayed. + +![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png) + +## Extract pages using the UI + +You can extract by typing page numbers/ranges or by selecting thumbnails. + +1. Click Extract Pages in the Organize Pages panel. +2. In the input box, enter the pages to extract. Supported formats include: + - Single pages: 1,3,5 + - Ranges: 2-6 + - Combinations: 1,4,7-9 +3. Alternatively, select the page thumbnails you want instead of typing values. +4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool. + +![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png) + + N> Page numbers are 1-based (first page is 1). You can start anywhere—enter single pages or ranges like 2-3, 5, or 7-9. Invalid or out-of-range entries are ignored. + +## Extraction options (checkboxes) + +Two options appear in the secondary toolbar: + +- **Delete Pages After Extracting:** + - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file. + - Example: If you enter 1,2 and extract, a PDF containing pages 1 and 2 is downloaded, and pages 1 and 2 are removed from the currently loaded document in the viewer. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. + - Example: If you select pages 3, 5, and 6, three separate PDFs are downloaded (3.pdf, 5.pdf, and 6.pdf). If you enter a range (e.g., 2-4), pages 2, 3, and 4 are each downloaded as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable Extract Pages + +Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`. + +Use the following code snippet to enable or disable the Extract Pages option: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + +{% endhighlight %} +{% endtabs %} + +Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`. + +Use the following code snippet to remove the Extract Pages option: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + +{% endhighlight %} +{% endtabs %} + +### Extract pages and load the result programmatically + +You can extract pages programmatically using the `extractPages` method. +The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to) + +## See also + +- [Overview](../overview) +- [UI interactions](../ui-interactions) +- [Programmatic support](../programmatic-support) +- [Toolbar](../toolbar) +- [Events](../events) +- [Mobile view](../mobile-view) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS-Elastic-Beanstalk.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS-Elastic-Beanstalk.md index 779899074..d054c2e43 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS-Elastic-Beanstalk.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS-Elastic-Beanstalk.md @@ -19,10 +19,10 @@ Step 1: Create a new ASP.NET Core Web application (Model-View-Controller) projec Step 2: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1) +* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) -![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1 NuGet Paackage](AWS_images/Elastic_Beanstalk_Images/Nuget-Package-PPTXtoPDF.png) +![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1 NuGet Paackage](AWS_images/Elastic_Beanstalk_Images/Nuget-Package-PPTXtoPDF.png) N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS-Lambda.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS-Lambda.md index e730a924d..3cb40cdd2 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS-Lambda.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS-Lambda.md @@ -21,11 +21,11 @@ Step 2: Select Blueprint as Empty Function and click **Finish**. Step 3: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1) +* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) -![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1 Nuget Package](AWS_Images/Lambda_Images/SkiaSharp-Nuget-Package-PPTXtoPDF.png) +![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1 Nuget Package](AWS_Images/Lambda_Images/SkiaSharp-Nuget-Package-PPTXtoPDF.png) N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS.md index f6a239a43..9247d727c 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-AWS.md @@ -30,12 +30,12 @@ NuGet package name
    {{'[AWS Lambda](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-image/net/convert-powerpoint-to-image-in-aws-lambda)' | markdownify}}
    {{'[Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core)' | markdownify}}
    -{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)' | markdownify}}
    +{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)' | markdownify}}
    {{'[AWS Elastic Beanstalk](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-image/net/convert-powerpoint-to-image-in-aws-elastic-beanstalk)' | markdownify}}
    {{'[Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core)' | markdownify}}
    -{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)' | markdownify}}
    +{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)' | markdownify}}
    diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Azure-App-Service-Linux.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Azure-App-Service-Linux.md index 0a8441c0b..95d2d067f 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Azure-App-Service-Linux.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Azure-App-Service-Linux.md @@ -24,14 +24,14 @@ Step 3: Click **Create** button. Step 4: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) -![Install SkiaSharp.NativeAssets.Linux v3.116.1 Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_PowerPoint_Presentation_to_PDF.png) +![Install SkiaSharp.NativeAssets.Linux v3.119.1 Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_PowerPoint_Presentation_to_PDF.png) -![Install HarfBuzzSharp.NativeAssets.Linux v8.3.0.1 Nuget Package](Azure-Images/App-Service-Linux/HarfBuzz_PowerPoint_Presentation_to_PDF.png) +![Install HarfBuzzSharp.NativeAssets.Linux v8.3.1.2 Nuget Package](Azure-Images/App-Service-Linux/HarfBuzz_PowerPoint_Presentation_to_PDF.png) N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Azure.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Azure.md index ab9686112..016458926 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Azure.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Azure.md @@ -32,7 +32,7 @@ NuGet packages required
    {{'[App Service (Linux)](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-image/net/convert-powerpoint-to-image-in-azure-app-service-linux)' | markdownify}}
    {{'[Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core)' | markdownify}}
    -{{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)' | markdownify}}
    {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)' |markdownify}}
    +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)' | markdownify}}
    {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)' |markdownify}}
    {{'[Azure Functions v1](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-image/net/convert-powerpoint-to-image-in-azure-functions-v1)' | markdownify}} diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Blazor.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Blazor.md index 7ef2fe79f..6002c9ad6 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Blazor.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Blazor.md @@ -736,11 +736,11 @@ Select "Blazor WebAssembly Standalone App" from the template and click the Next Step 2: Install the following **Nuget packages** in the application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.Views.Blazor v3.116.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.116.1) +* [SkiaSharp.Views.Blazor v3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) -![Install SkiaSharp.Views.Blazor v3.116.1 Nuget Package](Workingwith-Blazor/NuGet_package_PPTXtoPDF.png) +![Install SkiaSharp.Views.Blazor v3.119.1 Nuget Package](Workingwith-Blazor/NuGet_package_PPTXtoPDF.png) N> 1. If deploying the application in a Linux environment, refer to the [documentation](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-image/net/nuget-packages-required-for-pptxtoimage-conversion#additional-nuget-packages-required-for-linux) for the required additional NuGet packages. N> 2. Starting with v16.2.0.x, if Syncfusion® assemblies are referenced from trial setup or from the NuGet feed, the "Syncfusion.Licensing" assembly reference must also be added and a license key included in projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in an application to use Syncfusion components. @@ -915,10 +915,10 @@ Step 1: Create a new C# Blazor WASM Standalone app project. * Select the project location, type the project name and press enter. * Then choose **Create project**. -Step 2: To **convert a PowerPoint to Image in Blazor WASM Standalone app**, install [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) and [SkiaSharp.Views.Blazor v3.116.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.116.1) to the Blazor project. +Step 2: To **convert a PowerPoint to Image in Blazor WASM Standalone app**, install [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) and [SkiaSharp.Views.Blazor v3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) to the Blazor project. * Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code. * Ensure you're in the project root directory where your .csproj file is located. -* Run the command `dotnet add package Syncfusion.PresentationRenderer.Net.Core` and `dotnet add package SkiaSharp.Views.Blazor --version 3.116.1` to install the NuGet package. +* Run the command `dotnet add package Syncfusion.PresentationRenderer.Net.Core` and `dotnet add package SkiaSharp.Views.Blazor --version 3.119.1` to install the NuGet package. ![Add Syncfusion.PresentationRenderer.Net.Core NuGet package](Workingwith-Blazor/Command-to-add-NuGet-package-for-WASM.png) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Google-App-Engine.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Google-App-Engine.md index e7a1c5f8f..d40eb8a9f 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Google-App-Engine.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Google-App-Engine.md @@ -47,8 +47,8 @@ Step 3: Click the **Create** button. Step 4: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) ![Install SkiaSharp.NativeAssets.Linux Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_PowerPoint_Presentation_to_PDF.png) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Google-Cloud-Platform.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Google-Cloud-Platform.md index 65a61462d..acae9989f 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Google-Cloud-Platform.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Google-Cloud-Platform.md @@ -28,5 +28,5 @@ NuGet package name
    {{'[App Engine](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-image/net/convert-powerpoint-to-image-in-google-app-engine)' | markdownify}}
    {{'[Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core)' | markdownify}}
    -{{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)' | markdownify}}
    {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)' |markdownify}}
    +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)' | markdownify}}
    {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)' |markdownify}}
    diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Linux.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Linux.md index 0a1238e9a..4249196df 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Linux.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Convert-PowerPoint-to-Image-in-Linux.md @@ -36,15 +36,15 @@ dotnet new console Step 2: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/) by execute the following command. * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) {% tabs %} {% highlight KCONFIG %} dotnet add package Syncfusion.PresentationRenderer.Net.Core -v 22.1.38 -s https://www.nuget.org/ -dotnet add package SkiaSharp.NativeAssets.Linux -v 3.116.1 -s https://www.nuget.org/ -dotnet add package HarfBuzzSharp.NativeAssets.Linux -v 8.3.0.1 -s https://www.nuget.org/ +dotnet add package SkiaSharp.NativeAssets.Linux -v 3.119.1 -s https://www.nuget.org/ +dotnet add package HarfBuzzSharp.NativeAssets.Linux -v 8.3.1.2 -s https://www.nuget.org/ {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md index 888e6e13d..5c35a0921 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Fallback-Fonts-in-PPTXtoImage-Conversion.md @@ -103,6 +103,45 @@ using (FileStream fileStreamInput = new FileStream("Template.pptx", FileMode.Ope You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PowerPoint-Examples/tree/master/PPTX-to-Image-conversion/Fallback-fonts-based-on-scripttype). +## Fallback Symbols based on script type + +The following code example demonstrates how a user can add fallback fonts for Symbols and Emojis, which Presentation considers internally when converting a PowerPoint presentation to an Image. + +{% tabs %} + +{% highlight C# tabtitle="C# [Cross-platform]" %} +//Load the PowerPoint presentation into stream. +using (FileStream fileStreamInput = new FileStream("Template.pptx", FileMode.Open, FileAccess.Read)) +{ + //Open the existing PowerPoint presentation with loaded stream. + using (IPresentation pptxDoc = Presentation.Open(fileStreamInput)) + { + //Adds fallback font for basic symbols like bullet characters. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings"); + //Adds fallback font for mathematics symbols. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS"); + //Adds fallback font for emojis. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS"); + //Initialize the PresentationRenderer to perform image conversion. + pptxDoc.PresentationRenderer = new PresentationRenderer(); + //Convert PowerPoint slide to image as stream. + using (Stream stream = pptxDoc.Slides[0].ConvertToImage(ExportImageFormat.Jpeg)) + { + //Reset the stream position. + stream.Position = 0; + //Create the output image file stream. + using (FileStream fileStreamOutput = File.Create("Output.jpg")) + { + //Copy the converted image stream into created output stream. + stream.CopyTo(fileStreamOutput); + } + } + } +} +{% endhighlight %} + +{% endtabs %} + ## Fallback fonts for range of Unicode text Users can set fallback fonts for specific Unicode range of text to be used in Presentation to Image conversion. @@ -307,6 +346,215 @@ Korean Malgun Gothic, Batang + + Tamil + 0x0B80 - 0x0BFF + Latha, Nirmala UI, Arial Unicode MS + + + Bengali + 0x0980 - 0x09FF + Vrinda, Arial Unicode MS, Nikosh, Siyam Rupali, Nirmala UI + + + Gujarati + 0x0A80 - 0x0AFF + Shruti, Nirmala UI, Arial Unicode MS + + + Telugu + 0x0C00 - 0x0C7F + Gautami, Nirmala UI, Arial Unicode MS + + + Malayalam + 0x0D00 - 0x0D7F + Kartika, Nirmala UI, Arial Unicode MS + + + Kannada + 0x0C80 - 0x0CFF + Tunga, Nirmala UI, Arial Unicode MS + + + Ethiopic + 0x1200 - 0x137F
    + 0x1380 - 0x139F + Nyala, Ebrima + + + Khmer + 0x1780 - 0x17FF
    + 0x19E0 - 0x19FF + MoolBoran, DaunPenh, Leelawadee, Leelawadee UI + + + Gurmukhi + 0x0A00 - 0x0A7F + Raavi, Nirmala UI, Arial Unicode MS + + + Canadian + 0x1400 - 0x167F + Euphemia, Gadugi + + + Cherokee + 0x13A0 - 0x13FF
    + 0xAB70 - 0xABBF + Plantagenet Cherokee, Gadugi, Arial Unicode MS + + + Yi + 0xA000 - 0xA48F
    + 0xA490 - 0xA4CF + Microsoft Yi Baiti, Arial Unicode MS + + + Tibetan + 0x0F00 - 0x0FFF + Microsoft Himalaya, Nirmala UI, Arial Unicode MS + + + Thaana + 0x0780 - 0x07BF + MV Boli, Nirmala UI, Arial Unicode MS + + + Syriac + 0x0700 - 0x074F + Estrangelo Edessa, Segoe UI Historic, Arial Unicode MS + + + Odia + 0x0B00 - 0x0B7F + Kalinga, Nirmala UI, Arial Unicode MS + + + Lao + 0x0E80 - 0x0EFF + DokChampa, Lao UI, Leelawadee UI, Arial Unicode MS + + + Sinhala + 0x0D80 - 0x0DFF + Iskoola Pota, Nirmala UI, Arial Unicode MS + + + Mongolian + 0x1800 - 0x18AF + Mongolian Baiti, Microsoft YaHei, Arial Unicode MS + + + Vietnamese + 0x00C0 - 0x00FF
    + 0x0102 - 0x0103
    + 0x0110 - 0x0111
    + 0x0128 - 0x0129
    + 0x0168 - 0x0169
    + 0x01A0 - 0x01A1
    + 0x01AF - 0x01B0
    + 0x0300 - 0x036F + Times New Roman, Arial, Tahoma, Arial Unicode MS + + + Georgian + 0x10A0 - 0x10FF
    + 0x2D00 - 0x2D2F + Sylfaen, Arial Unicode MS + + + Armenian + 0x0530 - 0x058F
    + 0xFB13 - 0xFB17 + Arial, Sylfaen, Arial Unicode MS + + + Buginese + 0x1A00 - 0x1A1F + Leelawadee UI, Segoe UI Symbol + + + Bopomofo + 0x3100 - 0x312F
    + 0x31A0 - 0x31BF + Microsoft JhengHei, PMingLiU, SimSun, Arial Unicode MS + + + Javanese + 0xA980 - 0xA9DF + Javanese Text, Segoe UI Symbol + + + Lisu + 0xA4D0 - 0xA4FF + Segoe UI Symbol, Arial Unicode MS + + + Burmese + 0x1000 - 0x109F
    + 0xAA60 - 0xAA7F + Myanmar Text, Noto Sans Myanmar, Padauk + + + NKo + 0x07C0 - 0x07FF + Ebrima, Arial Unicode MS + + + OlChiki + 0x1C50 - 0x1C7F + Nirmala UI, Arial Unicode MS + + + Osmanya + 0x10480 - 0x104AF + Ebrima, Noto Sans Osmanya + + + PhagsPa + 0xA840 - 0xA87F + Phagspa, Microsoft PhagsPa, Noto Sans PhagsPa, Arial Unicode MS + + + SoraSompeng + 0x110D0 - 0x110FF + Nirmala UI, Arial Unicode MS + + + TaiLe + 0x1950 - 0x197F + Microsoft Tai Le, Arial Unicode MS + + + NewTaiLue + 0x1980 - 0x19DF + Microsoft New Tai Lue, Arial Unicode MS + + + Tifinagh + 0x2D30 - 0x2D7F + Ebrima, Arial Unicode MS + + + Symbols + 0x2000 - 0x27BF
    + 0x2300 - 0x23FF
    + 0xF000 - 0xF104 + Segoe UI Symbol, Arial Unicode MS, Wingdings + + + Mathematics + 0x2200 - 0x2AFF
    + 0x1D400 - 0x1D7FF + Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS + + + Emoji + 0x1F300 - 0x1FAFF
    + 0xFE0F - 0xFE0F + Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS + N> The .NET PowerPoint Library (Presentation) uses System.Drawing functionalities for PowerPoint to image conversion conversion in .NET Framework applications. And System.Drawing itself uses a fallback font to preserve the Unicode text while drawing the text in the image. So, these Fallback fonts APIs are **not supported in .NET Framework**. diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/NuGet-Packages-Required-for-PPTXtoImage-Conversion.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/NuGet-Packages-Required-for-PPTXtoImage-Conversion.md index 572bf8160..ff927ac2f 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/NuGet-Packages-Required-for-PPTXtoImage-Conversion.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/NuGet-Packages-Required-for-PPTXtoImage-Conversion.md @@ -5,7 +5,7 @@ platform: document-processing control: PowerPoint documentation: UG --- -# NuGet Packages Required +# NuGet Packages Required for PPTX to Image Conversion ## Converting PowerPoint Presentation to image @@ -127,8 +127,8 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)'| markdownify }}
    - {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
    + {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }}
      @@ -140,7 +140,7 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)'| markdownify }}
        diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Workingwith-Blazor/Command-to-add-NuGet-package-for-SkiaSharp.png b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Workingwith-Blazor/Command-to-add-NuGet-package-for-SkiaSharp.png index ccf4beb36..701a2b887 100644 Binary files a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Workingwith-Blazor/Command-to-add-NuGet-package-for-SkiaSharp.png and b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-Image/NET/Workingwith-Blazor/Command-to-add-NuGet-package-for-SkiaSharp.png differ diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS-Elastic-Beanstalk.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS-Elastic-Beanstalk.md index 1b0cb9f9a..5379dee3f 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS-Elastic-Beanstalk.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS-Elastic-Beanstalk.md @@ -19,10 +19,10 @@ Step 1: Create a new ASP.NET Core Web application (Model-View-Controller) projec Step 2: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1) +* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1) ![Install Syncfusion.PresentationRenderer.Net.Core NuGet Paackage](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) -![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1 NuGet Paackage](AWS_images/Elastic_Beanstalk_Images/Nuget-Package-PPTXtoPDF.png) +![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1 NuGet Paackage](AWS_images/Elastic_Beanstalk_Images/Nuget-Package-PPTXtoPDF.png) N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS-Lambda.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS-Lambda.md index b4bf9dca5..ec0ba6140 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS-Lambda.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS-Lambda.md @@ -21,11 +21,11 @@ Step 2: Select Blueprint as Empty Function and click **Finish**. Step 3: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1) +* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) -![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1 Nuget Package](AWS_Images/Lambda_Images/SkiaSharp-Nuget-Package-PPTXtoPDF.png) +![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1 Nuget Package](AWS_Images/Lambda_Images/SkiaSharp-Nuget-Package-PPTXtoPDF.png) N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS.md index 0d784eb7e..7925e220c 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-AWS.md @@ -30,12 +30,12 @@ NuGet package name
        {{'[AWS Lambda](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-pdf/net/convert-powerpoint-to-pdf-in-aws-lambda)' | markdownify}}
        {{'[Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core)' | markdownify}}
        -{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)' | markdownify}}
        +{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)' | markdownify}}
        {{'[AWS Elastic Beanstalk](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-pdf/net/convert-powerpoint-to-pdf-in-aws-elastic-beanstalk)' | markdownify}}
        {{'[Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core)' | markdownify}}
        -{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)' | markdownify}}
        +{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)' | markdownify}}
        diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Azure-App-Service-Linux.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Azure-App-Service-Linux.md index 36b500823..41b7a3eda 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Azure-App-Service-Linux.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Azure-App-Service-Linux.md @@ -24,14 +24,14 @@ Step 3: Click **Create** button. Step 4: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) -![Install SkiaSharp.NativeAssets.Linux v3.116.1 Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_PowerPoint_Presentation_to_PDF.png) +![Install SkiaSharp.NativeAssets.Linux v3.119.1 Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_PowerPoint_Presentation_to_PDF.png) -![Install HarfBuzzSharp.NativeAssets.Linux v8.3.0.1 Nuget Package](Azure-Images/App-Service-Linux/HarfBuzz_PowerPoint_Presentation_to_PDF.png) +![Install HarfBuzzSharp.NativeAssets.Linux v8.3.1.2 Nuget Package](Azure-Images/App-Service-Linux/HarfBuzz_PowerPoint_Presentation_to_PDF.png) N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Azure.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Azure.md index 941752664..cfec22f5c 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Azure.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Azure.md @@ -32,7 +32,7 @@ NuGet packages required
        {{'[App Service (Linux)](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-pdf/net/convert-powerpoint-to-pdf-in-azure-app-service-linux)' | markdownify}}
        {{'[Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core)' | markdownify}}
        -{{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)' | markdownify}}
        {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)' |markdownify}}
        +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)' | markdownify}}
        {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)' |markdownify}}
        {{'[Azure Functions v1](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-pdf/net/convert-powerpoint-to-pdf-in-azure-functions-v1)' | markdownify}} diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Blazor.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Blazor.md index 2f75661df..1bb8068ae 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Blazor.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Blazor.md @@ -737,11 +737,11 @@ Select "Blazor WebAssembly Standalone App" from the template and click the Next Step 2: Install the following **Nuget packages** in the application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.Views.Blazor v3.116.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.116.1) +* [SkiaSharp.Views.Blazor v3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) -![Install SkiaSharp.Views.Blazor v3.116.1 Nuget Package](Workingwith-Blazor/NuGet_package_PPTXtoPDF.png) +![Install SkiaSharp.Views.Blazor v3.119.1 Nuget Package](Workingwith-Blazor/NuGet_package_PPTXtoPDF.png) N> 1. If you're deploying the application in a Linux environment, refer to the [documentation](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-pdf/net/nuget-packages-required-for-pptxtopdf-conversion#additional-nuget-packages-required-for-linux) for the required additional NuGet packages. N> 2. Starting with v16.2.0.x, if Syncfusion® assemblies are referenced from trial setup or from the NuGet feed, the "Syncfusion.Licensing" assembly reference must also be added and a license key included in projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in an application to use Syncfusion components. @@ -920,10 +920,10 @@ Step 1: Create a new C# Blazor WASM Standalone app project. * Select the project location, type the project name and press enter. * Then choose **Create project**. -Step 2: To **convert a PowerPoint to PDF in Blazor WASM Standalone app**, install [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) and [SkiaSharp.Views.Blazor v3.116.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.116.1) to the Blazor project. +Step 2: To **convert a PowerPoint to PDF in Blazor WASM Standalone app**, install [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) and [SkiaSharp.Views.Blazor v3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) to the Blazor project. * Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code. * Ensure you're in the project root directory where your .csproj file is located. -* Run the command `dotnet add package Syncfusion.PresentationRenderer.Net.Core` and `dotnet add package SkiaSharp.Views.Blazor --version 3.116.1` to install the NuGet package. +* Run the command `dotnet add package Syncfusion.PresentationRenderer.Net.Core` and `dotnet add package SkiaSharp.Views.Blazor --version 3.119.1` to install the NuGet package. ![Add Syncfusion.PresentationRenderer.Net.Core NuGet package](Workingwith-Blazor/Command-to-add-NuGet-package-for-WASM.png) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Google-App-Engine.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Google-App-Engine.md index b498fbad6..1e69e0f89 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Google-App-Engine.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Google-App-Engine.md @@ -47,8 +47,8 @@ Step 3: Click the **Create** button. Step 4: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install Syncfusion.PresentationRenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Nuget_Package_PowerPoint_Presentation_to_PDF.png) ![Install SkiaSharp.NativeAssets.Linux Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_PowerPoint_Presentation_to_PDF.png) diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Google-Cloud-Platform.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Google-Cloud-Platform.md index 6211fb5e3..358bc688a 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Google-Cloud-Platform.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Google-Cloud-Platform.md @@ -28,5 +28,5 @@ NuGet package name
        {{'[App Engine](https://help.syncfusion.com/document-processing/powerpoint/conversions/powerpoint-to-pdf/net/convert-powerpoint-to-pdf-in-google-app-engine)' | markdownify}}
        {{'[Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core)' | markdownify}}
        -{{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)' | markdownify}}
        {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)' |markdownify}}
        +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)' | markdownify}}
        {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)' |markdownify}}
        diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Linux.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Linux.md index 6e54c90b6..4aa9e4f91 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Linux.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Convert-PowerPoint-to-PDF-in-Linux.md @@ -36,15 +36,15 @@ dotnet new console Step 2: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/) by execute the following command. * [Syncfusion.PresentationRenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.PresentationRenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) {% tabs %} {% highlight KCONFIG %} dotnet add package Syncfusion.PresentationRenderer.Net.Core -v 22.1.38 -s https://www.nuget.org/ -dotnet add package SkiaSharp.NativeAssets.Linux -v 3.116.1 -s https://www.nuget.org/ -dotnet add package HarfBuzzSharp.NativeAssets.Linux -v 8.3.0.1 -s https://www.nuget.org/ +dotnet add package SkiaSharp.NativeAssets.Linux -v 3.119.1 -s https://www.nuget.org/ +dotnet add package HarfBuzzSharp.NativeAssets.Linux -v 8.3.1.2 -s https://www.nuget.org/ {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Fallback-Fonts-in-PPTXtoPDF-Conversion.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Fallback-Fonts-in-PPTXtoPDF-Conversion.md index ad697da46..5471b1d75 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Fallback-Fonts-in-PPTXtoPDF-Conversion.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Fallback-Fonts-in-PPTXtoPDF-Conversion.md @@ -210,6 +210,94 @@ pptxDoc.Close() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PowerPoint-Examples/tree/master/PPTX-to-PDF-conversion/Fallback-fonts-based-on-scripttype). +## Fallback Symbols based on script type + +The following code example demonstrates how a user can add fallback fonts for Symbols and Emojis, which Presentation considers internally when converting a PowerPoint presentation to PDF. + +{% tabs %} + +{% highlight C# tabtitle="C# [Cross-platform]" %} +//Load the PowerPoint presentation into stream. +using (FileStream fileStreamInput = new FileStream("Template.pptx", FileMode.Open, FileAccess.Read)) +{ + //Open the existing PowerPoint presentation with loaded stream. + using (IPresentation pptxDoc = Presentation.Open(fileStreamInput)) + { + //Adds fallback font for basic symbols like bullet characters. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings"); + //Adds fallback font for mathematics symbols. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS"); + //Adds fallback font for emojis. + pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS"); + //Create the MemoryStream to save the converted PDF. + using (MemoryStream pdfStream = new MemoryStream()) + { + //Convert the PowerPoint document to PDF document. + using (PdfDocument pdfDocument = PresentationToPdfConverter.Convert(pptxDoc)) + { + //Save the converted PDF document to MemoryStream. + pdfDocument.Save(pdfStream); + pdfStream.Position = 0; + } + //Create the output PDF file stream. + using (FileStream fileStreamOutput = File.Create("Output.pdf")) + { + //Copy the converted PDF stream into created output PDF stream. + pdfStream.CopyTo(fileStreamOutput); + } + } + } +} +{% endhighlight %} + +{% highlight C# tabtitle="C# [Windows-specific]" %} +//Opens a PowerPoint Presentation. +IPresentation pptxDoc = Presentation.Open("Sample.pptx"); +//Initialize the conversion settings. +PresentationToPdfConverterSettings pdfConverterSettings = new PresentationToPdfConverterSettings(); +//Enable the portable rendering. +pdfConverterSettings.EnablePortableRendering = true; +//Adds fallback font for basic symbols like bullet characters. +pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings"); +//Adds fallback font for mathematics symbols. +pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS"); +//Adds fallback font for emojis. +pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS"); +//Converts the PowerPoint Presentation into PDF document with Portable rendering option. +PdfDocument pdfDocument = PresentationToPdfConverter.Convert(pptxDoc); +//Saves the PDF document. +pdfDocument.Save("Sample.pdf"); +//Closes the PDF document. +pdfDocument.Close(true); +//Closes the Presentation. +pptxDoc.Close(); +{% endhighlight %} + +{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} +'Opens a PowerPoint Presentation. +Dim pptxDoc As IPresentation = Presentation.Open("Sample.pptx") +'Initialize the conversion settings. +Dim pdfConverterSettings As PresentationToPdfConverterSettings = new PresentationToPdfConverterSettings() +'Enable the portable rendering. +pdfConverterSettings.EnablePortableRendering = true +'Adds fallback font for basic symbols Like bullet characters. +pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings") +'Adds fallback font for mathematics symbols. +pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS") +'Adds fallback font for emojis. +pptxDoc.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS") +'Converts the PowerPoint Presentation into PDF document. +Dim pdfDocument As PdfDocument = PresentationToPdfConverter.Convert(pptxDoc) +'Saves the PDF document. +pdfDocument.Save("Sample.pdf") +'Closes the PDF document. +pdfDocument.Close(True) +'Closes the Presentation. +pptxDoc.Close() +{% endhighlight %} + +{% endtabs %} + ## Fallback fonts for range of Unicode text Users can set fallback fonts for specific Unicode range of text to be used in presentation to PDF conversion. @@ -533,4 +621,213 @@ Korean Malgun Gothic, Batang + + Tamil + 0x0B80 - 0x0BFF + Latha, Nirmala UI, Arial Unicode MS + + + Bengali + 0x0980 - 0x09FF + Vrinda, Arial Unicode MS, Nikosh, Siyam Rupali, Nirmala UI + + + Gujarati + 0x0A80 - 0x0AFF + Shruti, Nirmala UI, Arial Unicode MS + + + Telugu + 0x0C00 - 0x0C7F + Gautami, Nirmala UI, Arial Unicode MS + + + Malayalam + 0x0D00 - 0x0D7F + Kartika, Nirmala UI, Arial Unicode MS + + + Kannada + 0x0C80 - 0x0CFF + Tunga, Nirmala UI, Arial Unicode MS + + + Ethiopic + 0x1200 - 0x137F
        + 0x1380 - 0x139F + Nyala, Ebrima + + + Khmer + 0x1780 - 0x17FF
        + 0x19E0 - 0x19FF + MoolBoran, DaunPenh, Leelawadee, Leelawadee UI + + + Gurmukhi + 0x0A00 - 0x0A7F + Raavi, Nirmala UI, Arial Unicode MS + + + Canadian + 0x1400 - 0x167F + Euphemia, Gadugi + + + Cherokee + 0x13A0 - 0x13FF
        + 0xAB70 - 0xABBF + Plantagenet Cherokee, Gadugi, Arial Unicode MS + + + Yi + 0xA000 - 0xA48F
        + 0xA490 - 0xA4CF + Microsoft Yi Baiti, Arial Unicode MS + + + Tibetan + 0x0F00 - 0x0FFF + Microsoft Himalaya, Nirmala UI, Arial Unicode MS + + + Thaana + 0x0780 - 0x07BF + MV Boli, Nirmala UI, Arial Unicode MS + + + Syriac + 0x0700 - 0x074F + Estrangelo Edessa, Segoe UI Historic, Arial Unicode MS + + + Odia + 0x0B00 - 0x0B7F + Kalinga, Nirmala UI, Arial Unicode MS + + + Lao + 0x0E80 - 0x0EFF + DokChampa, Lao UI, Leelawadee UI, Arial Unicode MS + + + Sinhala + 0x0D80 - 0x0DFF + Iskoola Pota, Nirmala UI, Arial Unicode MS + + + Mongolian + 0x1800 - 0x18AF + Mongolian Baiti, Microsoft YaHei, Arial Unicode MS + + + Vietnamese + 0x00C0 - 0x00FF
        + 0x0102 - 0x0103
        + 0x0110 - 0x0111
        + 0x0128 - 0x0129
        + 0x0168 - 0x0169
        + 0x01A0 - 0x01A1
        + 0x01AF - 0x01B0
        + 0x0300 - 0x036F + Times New Roman, Arial, Tahoma, Arial Unicode MS + + + Georgian + 0x10A0 - 0x10FF
        + 0x2D00 - 0x2D2F + Sylfaen, Arial Unicode MS + + + Armenian + 0x0530 - 0x058F
        + 0xFB13 - 0xFB17 + Arial, Sylfaen, Arial Unicode MS + + + Buginese + 0x1A00 - 0x1A1F + Leelawadee UI, Segoe UI Symbol + + + Bopomofo + 0x3100 - 0x312F
        + 0x31A0 - 0x31BF + Microsoft JhengHei, PMingLiU, SimSun, Arial Unicode MS + + + Javanese + 0xA980 - 0xA9DF + Javanese Text, Segoe UI Symbol + + + Lisu + 0xA4D0 - 0xA4FF + Segoe UI Symbol, Arial Unicode MS + + + Burmese + 0x1000 - 0x109F
        + 0xAA60 - 0xAA7F + Myanmar Text, Noto Sans Myanmar, Padauk + + + NKo + 0x07C0 - 0x07FF + Ebrima, Arial Unicode MS + + + OlChiki + 0x1C50 - 0x1C7F + Nirmala UI, Arial Unicode MS + + + Osmanya + 0x10480 - 0x104AF + Ebrima, Noto Sans Osmanya + + + PhagsPa + 0xA840 - 0xA87F + Phagspa, Microsoft PhagsPa, Noto Sans PhagsPa, Arial Unicode MS + + + SoraSompeng + 0x110D0 - 0x110FF + Nirmala UI, Arial Unicode MS + + + TaiLe + 0x1950 - 0x197F + Microsoft Tai Le, Arial Unicode MS + + + NewTaiLue + 0x1980 - 0x19DF + Microsoft New Tai Lue, Arial Unicode MS + + + Tifinagh + 0x2D30 - 0x2D7F + Ebrima, Arial Unicode MS + + + Symbols + 0x2000 - 0x27BF
        + 0x2300 - 0x23FF
        + 0xF000 - 0xF104 + Segoe UI Symbol, Arial Unicode MS, Wingdings + + + Mathematics + 0x2200 - 0x2AFF
        + 0x1D400 - 0x1D7FF + Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS + + + Emoji + 0x1F300 - 0x1FAFF
        + 0xFE0F - 0xFE0F + Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS + \ No newline at end of file diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Nuget-Packages-Required-for-PPTXtoPDF-Conversion.md b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Nuget-Packages-Required-for-PPTXtoPDF-Conversion.md index b6c896839..563f28806 100644 --- a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Nuget-Packages-Required-for-PPTXtoPDF-Conversion.md +++ b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Nuget-Packages-Required-for-PPTXtoPDF-Conversion.md @@ -116,8 +116,8 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)'| markdownify }}
        - {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
        + {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }}
          @@ -129,7 +129,7 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)'| markdownify }}
            diff --git a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Workingwith-Blazor/Command-to-add-NuGet-package-for-SkiaSharp.png b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Workingwith-Blazor/Command-to-add-NuGet-package-for-SkiaSharp.png index ccf4beb36..701a2b887 100644 Binary files a/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Workingwith-Blazor/Command-to-add-NuGet-package-for-SkiaSharp.png and b/Document-Processing/PowerPoint/Conversions/PowerPoint-To-PDF/NET/Workingwith-Blazor/Command-to-add-NuGet-package-for-SkiaSharp.png differ diff --git a/Document-Processing/PowerPoint/PowerPoint-Library/NET/FAQ.md b/Document-Processing/PowerPoint/PowerPoint-Library/NET/FAQ.md index 015ea0cc2..a6e05be77 100644 --- a/Document-Processing/PowerPoint/PowerPoint-Library/NET/FAQ.md +++ b/Document-Processing/PowerPoint/PowerPoint-Library/NET/FAQ.md @@ -67,6 +67,15 @@ NuGet packages to install +From v32.1.19 + + +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
            +{{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }} + + + + From v28.2.3 diff --git a/Document-Processing/PowerPoint/PowerPoint-Library/NET/NuGet-Packages-Required.md b/Document-Processing/PowerPoint/PowerPoint-Library/NET/NuGet-Packages-Required.md index 2dca4df12..e6ea34332 100644 --- a/Document-Processing/PowerPoint/PowerPoint-Library/NET/NuGet-Packages-Required.md +++ b/Document-Processing/PowerPoint/PowerPoint-Library/NET/NuGet-Packages-Required.md @@ -5,7 +5,7 @@ platform: document-processing control: PowerPoint documentation: UG --- -# NuGet Packages Required +# NuGet Packages Required for PowerPoint Library To work with PowerPoint Presentations, install the following NuGet packages in your application: @@ -215,8 +215,8 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)'| markdownify }}
            - {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
            + {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }}
              @@ -228,7 +228,7 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)'| markdownify }}
                @@ -357,8 +357,8 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)'| markdownify }}
                - {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
                + {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }}
                  @@ -370,7 +370,7 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)'| markdownify }}
                    diff --git a/Document-Processing/Release-Notes/v31.2.12.md b/Document-Processing/Release-Notes/v31.2.12.md index 8a9443308..d289c0761 100644 --- a/Document-Processing/Release-Notes/v31.2.12.md +++ b/Document-Processing/Release-Notes/v31.2.12.md @@ -15,6 +15,7 @@ documentation: ug {% enddirectory %} + ## Test Results | Component Name | Platform | Test Cases | Passed | Failed | Remarks | diff --git a/Document-Processing/Release-Notes/v32.1.19.md b/Document-Processing/Release-Notes/v32.1.19.md new file mode 100644 index 000000000..40b7f4202 --- /dev/null +++ b/Document-Processing/Release-Notes/v32.1.19.md @@ -0,0 +1,41 @@ +--- +title : Essential Studio® for Document Processing Release Notes - v32.1.19 +description : Learn here about the controls in the Essential Studio® for Document Processing 2025 Volume 4 Main Release - Release Notes - v32.1.19 +platform : document-processing +documentation: ug +--- + +# Essential Studio® for Document Processing - v32.1.19 Release Notes + +{% include release-info.html date="December 16, 2025" version="v32.1.19" passed="225445" failed="0" %} + +{% directory path: _includes/release-notes/v32.1.19 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + + +| Component Name | Platform | Test Cases | Passed | Failed | Remarks | +|------------------------------|----------------------------------------------------------|----------------|---------|----------|---------------| +| Calculate | Windows Forms | 138 | 138 | 0 | All Passed | +| Calculate | WPF | 9 | 9 | 0 | All Passed | +| DOCX Editor(Document Editor) | Blazor | 1944 | 1944 | 0 | All Passed | +| DOCX Editor(Document Editor) | Web(Javascript, Angular, React, Vue, ASP.NET Core & MVC) | 5023 | 5023 | 0 | All Passed | +| Excel Library | .NET | 37836 | 37836 | 0 | All Passed | +| Metafile Renderer | .NET | 863 | 863 | 0 | All Passed | +| PDF Library | .NET | 13703 | 13703 | 0 | All Passed | +| Pdf Viewer | Web(Javascript, Angular, React, Vue, ASP.NET Core & MVC) | 19374 | 19374 | 0 | All Passed | +| PDF Viewer | .NETMAUI | 14684 | 14684 | 0 | All Passed | +| PdfViewer | WPF | 2998 | 2998 | 0 | All Passed | +| PdfViewer | Windows Forms | 207 | 207 | 0 | All Passed | +| PowerPoint Library | .NET | 54476 | 54476 | 0 | All Passed | +| SfPdfViewer2 | Blazor | 14134 | 14134 | 0 | All Passed | +| SfSpreadsheet | WPF | 2699 | 2699 | 0 | All Passed | +| Spreadsheet | Blazor | 2780 | 2780 | 0 | All Passed | +| Spreadsheet | Web(Javascript, Angular, React, Vue, ASP.NET Core & MVC) | 10411 | 10411 | 0 | All Passed | +| Word Library | .NET | 40087 | 40087 | 0 | All Passed | +| Word Library | Java | 4079 | 4079 | 0 | All Passed | + diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Command-to-add-NuGet-package-for-SkiaSharp.png b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Command-to-add-NuGet-package-for-SkiaSharp.png index ccf4beb36..701a2b887 100644 Binary files a/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Command-to-add-NuGet-package-for-SkiaSharp.png and b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Command-to-add-NuGet-package-for-SkiaSharp.png differ diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-Azure.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-Azure.md index ef3400ce4..eb8f1e2f2 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-Azure.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-Azure.md @@ -32,7 +32,7 @@ NuGet packages required
                    {{'[App Service (Linux)](https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/convert-word-document-to-image-in-azure-app-service-linux)' | markdownify}}
                    {{'[Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core)' | markdownify}}
                    -{{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)' | markdownify}}
                    {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)' |markdownify}}
                    +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)' | markdownify}}
                    {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)' |markdownify}}
                    {{'[Azure Functions v1](https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/convert-word-document-to-image-in-azure-functions-v1)' | markdownify}} diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS-Elastic-Beanstalk.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS-Elastic-Beanstalk.md index 048e25431..f5cbcf321 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS-Elastic-Beanstalk.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS-Elastic-Beanstalk.md @@ -19,10 +19,10 @@ Step 1: Create a new ASP.NET Core Web application (Model-View-Controller) projec Step 2: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1) +* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1) ![Install Syncfusion.DocIORenderer.Net.Core NuGet Package](Blazor_Images/Nuget-Package-WordtoImage.png) -![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1 NuGet Package](AWS_Images/Elastic_Beanstalk_Images/Nuget-Convert-WordtoImage.png) +![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1 NuGet Package](AWS_Images/Elastic_Beanstalk_Images/Nuget-Convert-WordtoImage.png) N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS-Lambda.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS-Lambda.md index 7f0420e48..e59a2ea02 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS-Lambda.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS-Lambda.md @@ -21,7 +21,7 @@ Step 2: Select Blueprint as Empty Function and click **Finish**. Step 3: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1) +* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1) ![Install Syncfusion.DocIORenderer.Net.Core Nuget Package](ASP-NET-Core_images/NugetPackage.png) ![Install SkiaSharp.NativeAssets.Linux.NoDependencies Nuget Package](AWS_Images/Lambda_Images/SkiaSharp-Nuget-Package-WordtoPDF.png) diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS.md index 8091704ed..abae701b8 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-AWS.md @@ -30,12 +30,12 @@ NuGet package name
                    {{'[AWS Lambda](https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/convert-word-document-to-image-in-aws-lambda)' | markdownify}}
                    {{'[Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core)' | markdownify}}
                    -{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)' | markdownify}}
                    +{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)' | markdownify}}
                    {{'[AWS Elastic Beanstalk](https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/convert-word-document-to-image-in-aws-elastic-beanstalk)' | markdownify}}
                    {{'[Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core)' | markdownify}}
                    -{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)' | markdownify}}
                    +{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)' | markdownify}}
                    diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Azure-App-Service-Linux.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Azure-App-Service-Linux.md index b963b7df3..6c77add64 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Azure-App-Service-Linux.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Azure-App-Service-Linux.md @@ -24,8 +24,8 @@ Step 3: Click **Create** button. Step 4: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install Syncfusion.DocIORenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Syncfusion_Nuget_Package_WordtoPDF.png) ![Install SkiaSharp.NativeAssets.Linux Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_Nuget-Package_WordtoPDF.png) diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Blazor.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Blazor.md index ee649352c..94331db65 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Blazor.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Blazor.md @@ -730,10 +730,10 @@ Select "Blazor WebAssembly App" from the template and click the **Next** button. Step 2: Install the following **Nuget packages** in application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.Views.Blazor v3.116.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.116.1) +* [SkiaSharp.Views.Blazor v3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) ![Install Syncfusion.DocIORenderer.Net.Core NuGet Package](Blazor_Images/Nuget-Package-WordtoImage.png) -![Install SkiaSharp.Views.Blazor v3.116.1 NuGet Package](Blazor_Images/NuGet-Package-Convert-WordtoImage.png) +![Install SkiaSharp.Views.Blazor v3.119.1 NuGet Package](Blazor_Images/NuGet-Package-Convert-WordtoImage.png) N> 1. If deploying the application in a Linux environment, refer to the [documentation](https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/nuget-packages-required-word-to-image#additional-nuget-packages-required-for-linux) for the required additional NuGet packages. N> 2. Starting with v16.2.0.x, if Syncfusion® assemblies are referenced from trial setup or from the NuGet feed, the "Syncfusion.Licensing" assembly reference must also be added and a license key included in projects. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in an application to use Syncfusion components. @@ -915,10 +915,10 @@ Step 1: Create a new C# Blazor WASM Standalone app project. * Select the project location, type the project name and press enter. * Then choose **Create project**. -Step 2: To **convert a Word document to Image in Blazor WASM Standalone app**, install [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) and [SkiaSharp.Views.Blazor v3.116.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.116.1) to the Blazor project. +Step 2: To **convert a Word document to Image in Blazor WASM Standalone app**, install [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) and [SkiaSharp.Views.Blazor v3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) to the Blazor project. * Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code. * Ensure you're in the project root directory where your .csproj file is located. -* Run the command `dotnet add package Syncfusion.DocIORenderer.Net.Core` and `dotnet add package SkiaSharp.Views.Blazor --version 3.116.1` to install the NuGet package. +* Run the command `dotnet add package Syncfusion.DocIORenderer.Net.Core` and `dotnet add package SkiaSharp.Views.Blazor --version 3.119.1` to install the NuGet package. ![Add Syncfusion.DocIORenderer.Net.Core NuGet package](Blazor_Images/Command-to-add-NuGet-package-for-WASM.png) diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Google-App-Engine.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Google-App-Engine.md index 6509899d7..ce3be291e 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Google-App-Engine.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Google-App-Engine.md @@ -47,8 +47,8 @@ Step 3: Click the **Create** button. Step 4: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install Syncfusion.DocIORenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Syncfusion_Nuget_Package_WordtoPDF.png) ![Install SkiaSharp.NativeAssets.Linux Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_Nuget-Package_WordtoPDF.png) diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Google-Cloud-Platform.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Google-Cloud-Platform.md index 441f08f03..2923a7af1 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Google-Cloud-Platform.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Google-Cloud-Platform.md @@ -28,5 +28,5 @@ NuGet package name
                    {{'[App Engine](https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/convert-word-document-to-image-in-google-app-engine)' | markdownify}}
                    {{'[Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core)' | markdownify}}
                    -{{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)' | markdownify}}
                    {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)' |markdownify}}
                    +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)' | markdownify}}
                    {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)' |markdownify}}
                    \ No newline at end of file diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Linux.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Linux.md index 51fda1529..adcc7880b 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Linux.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Linux.md @@ -36,15 +36,15 @@ dotnet new console Step 2: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/) by execute the following command. * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) {% tabs %} {% highlight KCONFIG %} dotnet add package Syncfusion.DocIORenderer.Net.Core -v 22.1.34 -s https://www.nuget.org/ -dotnet add package SkiaSharp.NativeAssets.Linux -v 3.116.1 -s https://www.nuget.org/ -dotnet add package HarfBuzzSharp.NativeAssets.Linux -v 8.3.0.1 -s https://www.nuget.org/ +dotnet add package SkiaSharp.NativeAssets.Linux -v 3.119.1 -s https://www.nuget.org/ +dotnet add package HarfBuzzSharp.NativeAssets.Linux -v 8.3.1.2 -s https://www.nuget.org/ {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Fallback-fonts-word-to-image.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Fallback-fonts-word-to-image.md index f6ed8cd17..661e80486 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Fallback-fonts-word-to-image.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Fallback-fonts-word-to-image.md @@ -111,6 +111,49 @@ using (FileStream inputStream = new FileStream("Template.docx", FileMode.Open, F You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-to-Image-conversion/Fallback-fonts-based-on-scripttype). +## Fallback Symbols based on script type + +The following code example demonstrates how a user can add fallback fonts for Symbols and Emojis, which DocIO considers internally when converting a Word document to image. + +{% tabs %} + +{% highlight c# tabtitle="C# [Cross-platform]" %} +//Opens the file as stream. +using (FileStream inputStream = new FileStream("Template.docx", FileMode.Open, FileAccess.Read)) +{ + //Loads an existing Word document file stream. + using (WordDocument wordDocument = new WordDocument(inputStream, Syncfusion.DocIO.FormatType.Docx)) + { + //Adds fallback font for basic symbols like bullet characters. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings"); + //Adds fallback font for mathematics symbols. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS"); + //Adds fallback font for emojis. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS"); + //Instantiation of DocIORenderer for Word to image conversion. + using (DocIORenderer render = new DocIORenderer()) + { + //Convert the entire Word document to images. + Stream[] imageStreams = wordDocument.RenderAsImages(); + int i = 0; + foreach (Stream stream in imageStreams) + { + //Reset the stream position. + stream.Position = 0; + //Save the stream as file. + using (FileStream fileStreamOutput = File.Create("WordToImage_" + i + ".jpeg")) + { + stream.CopyTo(fileStreamOutput); + } + i++; + } + } + } +} +{% endhighlight %} + +{% endtabs %} + ## Fallback fonts for range of Unicode text Users can set fallback fonts for specific Unicode range of text to be used in Word to Image conversion. @@ -325,6 +368,215 @@ Korean Malgun Gothic, Batang + + Tamil + 0x0B80 - 0x0BFF + Latha, Nirmala UI, Arial Unicode MS + + + Bengali + 0x0980 - 0x09FF + Vrinda, Arial Unicode MS, Nikosh, Siyam Rupali, Nirmala UI + + + Gujarati + 0x0A80 - 0x0AFF + Shruti, Nirmala UI, Arial Unicode MS + + + Telugu + 0x0C00 - 0x0C7F + Gautami, Nirmala UI, Arial Unicode MS + + + Malayalam + 0x0D00 - 0x0D7F + Kartika, Nirmala UI, Arial Unicode MS + + + Kannada + 0x0C80 - 0x0CFF + Tunga, Nirmala UI, Arial Unicode MS + + + Ethiopic + 0x1200 - 0x137F
                    + 0x1380 - 0x139F + Nyala, Ebrima + + + Khmer + 0x1780 - 0x17FF
                    + 0x19E0 - 0x19FF + MoolBoran, DaunPenh, Leelawadee, Leelawadee UI + + + Gurmukhi + 0x0A00 - 0x0A7F + Raavi, Nirmala UI, Arial Unicode MS + + + Canadian + 0x1400 - 0x167F + Euphemia, Gadugi + + + Cherokee + 0x13A0 - 0x13FF
                    + 0xAB70 - 0xABBF + Plantagenet Cherokee, Gadugi, Arial Unicode MS + + + Yi + 0xA000 - 0xA48F
                    + 0xA490 - 0xA4CF + Microsoft Yi Baiti, Arial Unicode MS + + + Tibetan + 0x0F00 - 0x0FFF + Microsoft Himalaya, Nirmala UI, Arial Unicode MS + + + Thaana + 0x0780 - 0x07BF + MV Boli, Nirmala UI, Arial Unicode MS + + + Syriac + 0x0700 - 0x074F + Estrangelo Edessa, Segoe UI Historic, Arial Unicode MS + + + Odia + 0x0B00 - 0x0B7F + Kalinga, Nirmala UI, Arial Unicode MS + + + Lao + 0x0E80 - 0x0EFF + DokChampa, Lao UI, Leelawadee UI, Arial Unicode MS + + + Sinhala + 0x0D80 - 0x0DFF + Iskoola Pota, Nirmala UI, Arial Unicode MS + + + Mongolian + 0x1800 - 0x18AF + Mongolian Baiti, Microsoft YaHei, Arial Unicode MS + + + Vietnamese + 0x00C0 - 0x00FF
                    + 0x0102 - 0x0103
                    + 0x0110 - 0x0111
                    + 0x0128 - 0x0129
                    + 0x0168 - 0x0169
                    + 0x01A0 - 0x01A1
                    + 0x01AF - 0x01B0
                    + 0x0300 - 0x036F + Times New Roman, Arial, Tahoma, Arial Unicode MS + + + Georgian + 0x10A0 - 0x10FF
                    + 0x2D00 - 0x2D2F + Sylfaen, Arial Unicode MS + + + Armenian + 0x0530 - 0x058F
                    + 0xFB13 - 0xFB17 + Arial, Sylfaen, Arial Unicode MS + + + Buginese + 0x1A00 - 0x1A1F + Leelawadee UI, Segoe UI Symbol + + + Bopomofo + 0x3100 - 0x312F
                    + 0x31A0 - 0x31BF + Microsoft JhengHei, PMingLiU, SimSun, Arial Unicode MS + + + Javanese + 0xA980 - 0xA9DF + Javanese Text, Segoe UI Symbol + + + Lisu + 0xA4D0 - 0xA4FF + Segoe UI Symbol, Arial Unicode MS + + + Burmese + 0x1000 - 0x109F
                    + 0xAA60 - 0xAA7F + Myanmar Text, Noto Sans Myanmar, Padauk + + + NKo + 0x07C0 - 0x07FF + Ebrima, Arial Unicode MS + + + OlChiki + 0x1C50 - 0x1C7F + Nirmala UI, Arial Unicode MS + + + Osmanya + 0x10480 - 0x104AF + Ebrima, Noto Sans Osmanya + + + PhagsPa + 0xA840 - 0xA87F + Phagspa, Microsoft PhagsPa, Noto Sans PhagsPa, Arial Unicode MS + + + SoraSompeng + 0x110D0 - 0x110FF + Nirmala UI, Arial Unicode MS + + + TaiLe + 0x1950 - 0x197F + Microsoft Tai Le, Arial Unicode MS + + + NewTaiLue + 0x1980 - 0x19DF + Microsoft New Tai Lue, Arial Unicode MS + + + Tifinagh + 0x2D30 - 0x2D7F + Ebrima, Arial Unicode MS + + + Symbols + 0x2000 - 0x27BF
                    + 0x2300 - 0x23FF
                    + 0xF000 - 0xF104 + Segoe UI Symbol, Arial Unicode MS, Wingdings + + + Mathematics + 0x2200 - 0x2AFF
                    + 0x1D400 - 0x1D7FF + Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS + + + Emoji + 0x1F300 - 0x1FAFF
                    + 0xFE0F - 0xFE0F + Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS + N> 1. In Azure Web Service and Azure APP Service, .NET GDI+ (System.Drawing) does not support the Metafile image (vector image). So, the image will be generated as Bitmap (raster image). @@ -334,5 +586,5 @@ N> 4. Word to Image conversion has the same limitations and unsupported elements N> 5. Different styles of borders are known limitations in Word to Image conversion in ASP.NET Core, Xamarin, Blazor, WinUI, and .NET MAUI platforms. N> 6. In ASP.NET Core, Blazor, Xamarin, WinUI and .NET MAUI platforms, to convert Word document to images we recommend you to use Word to image [assemblies](https://help.syncfusion.com/document-processing/word/word-library/net/assemblies-required#converting-word-document-to-image) or [NuGet](https://help.syncfusion.com/document-processing/word/word-library/net/nuget-packages-required#converting-word-document-to-image) as a reference in your application. N> 7. DocIO supports Word to image conversion in UWP application using DocIORenderer. -N> 8. In addition to the previous NuGet packages, we recommend to use [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) and [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) NuGets to perform Word to Image conversion in Linux environment. +N> 8. In addition to the previous NuGet packages, we recommend to use [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) and [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) NuGets to perform Word to Image conversion in Linux environment. N> 9. The .NET Word Library (DocIO) uses System.Drawing functionalities for Word to image conversion in .NET Framework applications. And System.Drawing itself uses a fallback font to preserve the Unicode text while drawing the text in the image. So, these Fallback fonts APIs are **not supported in .NET Framework**. diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Nuget-packages-required-word-to-image.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Nuget-packages-required-word-to-image.md index 4d07f01c4..9e267a5a8 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Nuget-packages-required-word-to-image.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Nuget-packages-required-word-to-image.md @@ -168,8 +168,8 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)'| markdownify }}
                    - {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
                    + {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }}
                      @@ -181,7 +181,7 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)'| markdownify }}
                        diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/word-to-image-conversion-faqs.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/word-to-image-conversion-faqs.md index b73eafa01..4c345bdf7 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/word-to-image-conversion-faqs.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/word-to-image-conversion-faqs.md @@ -24,7 +24,7 @@ This exception typically occurs due to version mismatches between SkiaSharp and ## Why does System.TypeInitializationException occur during Word to PDF or image conversion in Linux using Syncfusion DocIO? -This error usually occurs due to an incompatible GLIBC version on the Linux system. SkiaSharp, used by DocIO for rendering, requires a minimum GLIBC version to function correctly. For example, SkiaSharp version 3.116.1 requires at least GLIBC version 2.29, which is not available in older Linux distributions like Debian 10. If a lower version is present, the conversion may fail with errors such as GLIBC_2.29 not found. To resolve this, ensure the operating system includes the required GLIBC version for the SkiaSharp version being used, or upgrade to a newer Linux distribution. +This error usually occurs due to an incompatible GLIBC version on the Linux system. SkiaSharp, used by DocIO for rendering, requires a minimum GLIBC version to function correctly. For example, SkiaSharp version 3.119.1 requires at least GLIBC version 2.29, which is not available in older Linux distributions like Debian 10. If a lower version is present, the conversion may fail with errors such as GLIBC_2.29 not found. To resolve this, ensure the operating system includes the required GLIBC version for the SkiaSharp version being used, or upgrade to a newer Linux distribution. ## Is it possible to substitute fonts in a Word document? diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Blazor_Images/Command-to-add-NuGet-package-for-SkiaSharp.png b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Blazor_Images/Command-to-add-NuGet-package-for-SkiaSharp.png index ccf4beb36..701a2b887 100644 Binary files a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Blazor_Images/Command-to-add-NuGet-package-for-SkiaSharp.png and b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Blazor_Images/Command-to-add-NuGet-package-for-SkiaSharp.png differ diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS-Elastic-Beanstalk.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS-Elastic-Beanstalk.md index 1be54c6b9..7156d9640 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS-Elastic-Beanstalk.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS-Elastic-Beanstalk.md @@ -19,10 +19,10 @@ Step 1: Create a new ASP.NET Core Web application (Model-View-Controller) projec Step 2: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1) +* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1) ![Install Syncfusion.DocIORenderer.Net.Core NuGet Package](Azure-Images/App-Service-Linux/Syncfusion_Nuget_Package_WordtoPDF.png) -![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1 NuGet Package](AWS_Images/Elastic_Beanstalk_Images/Nuget-Convert-WordtoPDF.png) +![Install SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1 NuGet Package](AWS_Images/Elastic_Beanstalk_Images/Nuget-Convert-WordtoPDF.png) N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS-Lambda.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS-Lambda.md index a180b5d3b..d1a1c1356 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS-Lambda.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS-Lambda.md @@ -21,7 +21,7 @@ Step 2: Select Blueprint as Empty Function and click **Finish**. Step 3: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1) +* [SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1) ![Install Syncfusion.DocIORenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Syncfusion_Nuget_Package_WordtoPDF.png) ![Install SkiaSharp.NativeAssets.Linux.NoDependencies Nuget Package](AWS_Images/Lambda_Images/SkiaSharp-Nuget-Package-WordtoPDF.png) diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS.md index 69d401e18..3e122ce5d 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-AWS.md @@ -30,12 +30,12 @@ NuGet package name
                        {{'[AWS Lambda](https://help.syncfusion.com/document-processing/word/conversions/word-to-pdf/net/convert-word-document-to-pdf-in-aws-lambda)' | markdownify}}
                        {{'[Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core)' | markdownify}}
                        -{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)' | markdownify}}
                        +{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)' | markdownify}}
                        {{'[AWS Elastic Beanstalk](https://help.syncfusion.com/document-processing/word/conversions/word-to-pdf/net/convert-word-document-to-pdf-in-aws-elastic-beanstalk)' | markdownify}}
                        {{'[Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core)' | markdownify}}
                        -{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)' | markdownify}}
                        +{{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)' | markdownify}}
                        diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Azure-App-Service-Linux.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Azure-App-Service-Linux.md index 32293050e..0dbfb4d7c 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Azure-App-Service-Linux.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Azure-App-Service-Linux.md @@ -24,8 +24,8 @@ Step 3: Click **Create** button. Step 4: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install Syncfusion.DocIORenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Syncfusion_Nuget_Package_WordtoPDF.png) ![Install SkiaSharp.NativeAssets.Linux Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_Nuget-Package_WordtoPDF.png) diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Azure.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Azure.md index 8afd4988c..ba6d15285 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Azure.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Azure.md @@ -31,7 +31,7 @@ NuGet package name
                        {{'[App Service (Linux)](https://help.syncfusion.com/document-processing/word/conversions/word-to-pdf/net/convert-word-document-to-pdf-in-azure-app-service-linux)' | markdownify}}
                        {{'[Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core)' | markdownify}}
                        -{{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)' | markdownify}}
                        {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)' |markdownify}}
                        +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)' | markdownify}}
                        {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)' |markdownify}}
                        {{'[Azure Functions v1](https://help.syncfusion.com/document-processing/word/conversions/word-to-pdf/net/convert-word-document-to-pdf-in-azure-functions-v1)' | markdownify}}
                        diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Blazor.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Blazor.md index 3540e73b9..797bfe6fe 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Blazor.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Blazor.md @@ -723,10 +723,10 @@ Select "Blazor WebAssembly Standalone App" from the template and click **Next**. Step 2: Install the following **Nuget packages** in the application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.Views.Blazor v3.116.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.116.1) +* [SkiaSharp.Views.Blazor v3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) ![Install Syncfusion.DocIORenderer.Net.Core NuGet Package](Blazor_Images/NugetPackage.png) -![Install SkiaSharp.Views.Blazor v3.116.1 NuGet Package](Blazor_Images/NuGet-Package-WordtoPDF.png) +![Install SkiaSharp.Views.Blazor v3.119.1 NuGet Package](Blazor_Images/NuGet-Package-WordtoPDF.png) N> 1. If deploying the application in a Linux environment, refer to the [documentation](https://help.syncfusion.com/document-processing/word/conversions/word-to-pdf/net/nuget-packages-required-word-to-pdf#additional-nuget-packages-required-for-linux) for the required additional NuGet packages. N> 2. Starting with v16.2.0.x, if Syncfusion® assemblies are referenced from trial setup or from the NuGet feed, the "Syncfusion.Licensing" assembly reference must also be added and a license key included in projects. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in an application to use Syncfusion components. @@ -914,10 +914,10 @@ Step 1: Create a new C# Blazor WASM Standalone app project. * Select the project location, type the project name and press enter. * Then choose **Create project**. -Step 2: To **convert a Word document to PDF in Blazor WASM Standalone app**, install [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) and [SkiaSharp.Views.Blazor v3.116.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.116.1) to the Blazor project. +Step 2: To **convert a Word document to PDF in Blazor WASM Standalone app**, install [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) and [SkiaSharp.Views.Blazor v3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) to the Blazor project. * Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code. * Ensure you're in the project root directory where your .csproj file is located. -* Run the command `dotnet add package Syncfusion.DocIORenderer.Net.Core` and `dotnet add package SkiaSharp.Views.Blazor --version 3.116.1` to install the NuGet package. +* Run the command `dotnet add package Syncfusion.DocIORenderer.Net.Core` and `dotnet add package SkiaSharp.Views.Blazor --version 3.119.1` to install the NuGet package. ![Add Syncfusion.DocIORenderer.Net.Core NuGet package](Blazor_Images/Command-to-add-NuGet-package-for-WASM.png) diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Google-App-Engine.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Google-App-Engine.md index 6968ea076..6bbb0b1e8 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Google-App-Engine.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Google-App-Engine.md @@ -45,8 +45,8 @@ Step 3: Click the **Create** button. Step 4: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install Syncfusion.DocIORenderer.Net.Core Nuget Package](Azure-Images/App-Service-Linux/Syncfusion_Nuget_Package_WordtoPDF.png) ![Install SkiaSharp.NativeAssets.Linux Nuget Package](Azure-Images/App-Service-Linux/SkiaSharp_Nuget-Package_WordtoPDF.png) diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Google-Cloud-Platform.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Google-Cloud-Platform.md index 29ad3cb77..72ea078e3 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Google-Cloud-Platform.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Google-Cloud-Platform.md @@ -30,5 +30,5 @@ NuGet package name
                        {{'[App Engine](https://help.syncfusion.com/document-processing/word/conversions/word-to-pdf/net/convert-word-document-to-pdf-in-google-cloud-platform)' | markdownify}}
                        {{'[Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core)' | markdownify}}
                        -{{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)' | markdownify}}
                        {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)' |markdownify}}
                        +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)' | markdownify}}
                        {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)' |markdownify}}
                        \ No newline at end of file diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Linux.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Linux.md index 3e438a25f..bc660ed67 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Linux.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Convert-Word-Document-to-PDF-in-Linux.md @@ -36,15 +36,15 @@ dotnet new console Step 2: Install the following **Nuget packages** in your application from [Nuget.org](https://www.nuget.org/) by execute the following command. * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) {% tabs %} {% highlight KCONFIG %} dotnet add package Syncfusion.DocIORenderer.Net.Core -v 22.1.34 -s https://www.nuget.org/ -dotnet add package SkiaSharp.NativeAssets.Linux -v 3.116.1 -s https://www.nuget.org/ -dotnet add package HarfBuzzSharp.NativeAssets.Linux -v 8.3.0.1 -s https://www.nuget.org/ +dotnet add package SkiaSharp.NativeAssets.Linux -v 3.119.1 -s https://www.nuget.org/ +dotnet add package HarfBuzzSharp.NativeAssets.Linux -v 8.3.1.2 -s https://www.nuget.org/ {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Fallback-fonts-word-to-pdf.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Fallback-fonts-word-to-pdf.md index 4a105d048..958a7009e 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Fallback-fonts-word-to-pdf.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Fallback-fonts-word-to-pdf.md @@ -195,6 +195,89 @@ End Using You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/DocIO-Examples/tree/main/Word-to-PDF-Conversion/Fallback-fonts-based-on-scripttype). +## Fallback Symbols based on script type + +The following code example demonstrates how a user can add fallback fonts for Symbols and Emojis, which DocIO considers internally when converting a Word document to PDF. + +{% tabs %} + +{% highlight c# tabtitle="C# [Cross-platform]" %} +//Opens the file as stream. +using (FileStream inputStream = new FileStream("Template.docx", FileMode.Open, FileAccess.Read)) +{ + //Loads an existing Word document file stream. + using (WordDocument wordDocument = new WordDocument(inputStream, Syncfusion.DocIO.FormatType.Docx)) + { + //Adds fallback font for basic symbols like bullet characters. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings"); + //Adds fallback font for mathematics symbols. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS"); + //Adds fallback font for emojis. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS"); + //Instantiation of DocIORenderer for Word to PDF conversion. + using (DocIORenderer render = new DocIORenderer()) + { + //Converts Word document into PDF document. + using (PdfDocument pdfDocument = render.ConvertToPDF(wordDocument)) + { + //Saves the PDF file to file system. + using (FileStream outputStream = new FileStream("WordToPDF.pdf", FileMode.OpenOrCreate, FileAccess.ReadWrite)) + { + pdfDocument.Save(outputStream); + } + } + } + } +} +{% endhighlight %} + +{% highlight c# tabtitle="C# [Windows-specific]" %} +//Loads an existing Word document. +using (WordDocument wordDocument = new WordDocument("Template.docx", Syncfusion.DocIO.FormatType.Docx)) +{ + //Adds fallback font for basic symbols like bullet characters. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings"); + //Adds fallback font for mathematics symbols. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS"); + //Adds fallback font for emojis. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS"); + //Instantiation of DocToPDFConverter for Word to PDF conversion. + using (DocToPDFConverter converter = new DocToPDFConverter()) + { + //Converts Word document into PDF document. + using (PdfDocument pdfDocument = converter.ConvertToPDF(wordDocument)) + { + //Saves the PDF file to file system. + pdfDocument.Save("WordToPDF.pdf"); + } + } +} +{% endhighlight %} + +{% highlight vb.net tabtitle="VB.NET [Windows-specific]" %} +'Loads an existing Word document. +Using wordDocument As WordDocument = New WordDocument("Template.docx", FormatType.Docx) + 'Adds fallback font for basic symbols Like bullet characters. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Symbols, "Segoe UI Symbol, Arial Unicode MS, Wingdings") + 'Adds fallback font for mathematics symbols. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Mathematics, "Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS") + 'Adds fallback font for emojis. + wordDocument.FontSettings.FallbackFonts.Add(ScriptType.Emoji, "Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS") + 'Instantiation of DocToPDFConverter for Word to PDF conversion. + Using converter As New DocToPDFConverter() + 'Converts Word document into PDF document. + Using pdfDocument As PdfDocument = converter.ConvertToPDF(wordDocument) + 'Saves the PDF file to file system. + pdfDocument.Save("WordToPDF.pdf") + End Using + End Using +End Using +{% endhighlight %} + +{% endtabs %} + + + ## Fallback fonts for range of Unicode text Users can set fallback fonts for specific Unicode range of text to be used in Word to PDF conversion. @@ -513,4 +596,213 @@ Korean Malgun Gothic, Batang + + Tamil + 0x0B80 - 0x0BFF + Latha, Nirmala UI, Arial Unicode MS + + + Bengali + 0x0980 - 0x09FF + Vrinda, Arial Unicode MS, Nikosh, Siyam Rupali, Nirmala UI + + + Gujarati + 0x0A80 - 0x0AFF + Shruti, Nirmala UI, Arial Unicode MS + + + Telugu + 0x0C00 - 0x0C7F + Gautami, Nirmala UI, Arial Unicode MS + + + Malayalam + 0x0D00 - 0x0D7F + Kartika, Nirmala UI, Arial Unicode MS + + + Kannada + 0x0C80 - 0x0CFF + Tunga, Nirmala UI, Arial Unicode MS + + + Ethiopic + 0x1200 - 0x137F
                        + 0x1380 - 0x139F + Nyala, Ebrima + + + Khmer + 0x1780 - 0x17FF
                        + 0x19E0 - 0x19FF + MoolBoran, DaunPenh, Leelawadee, Leelawadee UI + + + Gurmukhi + 0x0A00 - 0x0A7F + Raavi, Nirmala UI, Arial Unicode MS + + + Canadian + 0x1400 - 0x167F + Euphemia, Gadugi + + + Cherokee + 0x13A0 - 0x13FF
                        + 0xAB70 - 0xABBF + Plantagenet Cherokee, Gadugi, Arial Unicode MS + + + Yi + 0xA000 - 0xA48F
                        + 0xA490 - 0xA4CF + Microsoft Yi Baiti, Arial Unicode MS + + + Tibetan + 0x0F00 - 0x0FFF + Microsoft Himalaya, Nirmala UI, Arial Unicode MS + + + Thaana + 0x0780 - 0x07BF + MV Boli, Nirmala UI, Arial Unicode MS + + + Syriac + 0x0700 - 0x074F + Estrangelo Edessa, Segoe UI Historic, Arial Unicode MS + + + Odia + 0x0B00 - 0x0B7F + Kalinga, Nirmala UI, Arial Unicode MS + + + Lao + 0x0E80 - 0x0EFF + DokChampa, Lao UI, Leelawadee UI, Arial Unicode MS + + + Sinhala + 0x0D80 - 0x0DFF + Iskoola Pota, Nirmala UI, Arial Unicode MS + + + Mongolian + 0x1800 - 0x18AF + Mongolian Baiti, Microsoft YaHei, Arial Unicode MS + + + Vietnamese + 0x00C0 - 0x00FF
                        + 0x0102 - 0x0103
                        + 0x0110 - 0x0111
                        + 0x0128 - 0x0129
                        + 0x0168 - 0x0169
                        + 0x01A0 - 0x01A1
                        + 0x01AF - 0x01B0
                        + 0x0300 - 0x036F + Times New Roman, Arial, Tahoma, Arial Unicode MS + + + Georgian + 0x10A0 - 0x10FF
                        + 0x2D00 - 0x2D2F + Sylfaen, Arial Unicode MS + + + Armenian + 0x0530 - 0x058F
                        + 0xFB13 - 0xFB17 + Arial, Sylfaen, Arial Unicode MS + + + Buginese + 0x1A00 - 0x1A1F + Leelawadee UI, Segoe UI Symbol + + + Bopomofo + 0x3100 - 0x312F
                        + 0x31A0 - 0x31BF + Microsoft JhengHei, PMingLiU, SimSun, Arial Unicode MS + + + Javanese + 0xA980 - 0xA9DF + Javanese Text, Segoe UI Symbol + + + Lisu + 0xA4D0 - 0xA4FF + Segoe UI Symbol, Arial Unicode MS + + + Burmese + 0x1000 - 0x109F
                        + 0xAA60 - 0xAA7F + Myanmar Text, Noto Sans Myanmar, Padauk + + + NKo + 0x07C0 - 0x07FF + Ebrima, Arial Unicode MS + + + OlChiki + 0x1C50 - 0x1C7F + Nirmala UI, Arial Unicode MS + + + Osmanya + 0x10480 - 0x104AF + Ebrima, Noto Sans Osmanya + + + PhagsPa + 0xA840 - 0xA87F + Phagspa, Microsoft PhagsPa, Noto Sans PhagsPa, Arial Unicode MS + + + SoraSompeng + 0x110D0 - 0x110FF + Nirmala UI, Arial Unicode MS + + + TaiLe + 0x1950 - 0x197F + Microsoft Tai Le, Arial Unicode MS + + + NewTaiLue + 0x1980 - 0x19DF + Microsoft New Tai Lue, Arial Unicode MS + + + Tifinagh + 0x2D30 - 0x2D7F + Ebrima, Arial Unicode MS + + + Symbols + 0x2000 - 0x27BF
                        + 0x2300 - 0x23FF
                        + 0xF000 - 0xF104 + Segoe UI Symbol, Arial Unicode MS, Wingdings + + + Mathematics + 0x2200 - 0x2AFF
                        + 0x1D400 - 0x1D7FF + Cambria Math, Noto Sans Math, Segoe UI Symbol, Arial Unicode MS + + + Emoji + 0x1F300 - 0x1FAFF
                        + 0xFE0F - 0xFE0F + Segoe UI Emoji, Noto Color Emoji, Arial Unicode MS + diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Nuget-packages-required-word-to-pdf.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Nuget-packages-required-word-to-pdf.md index bd71036c4..1632d281a 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Nuget-packages-required-word-to-pdf.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Nuget-packages-required-word-to-pdf.md @@ -155,7 +155,7 @@ Install-Package Syncfusion.DocToPdfConverter.AspNet N> 1. Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. N> 2. Syncfusion® components are available in [nuget.org](https://www.nuget.org/) N> 3. Please refer the procedure to deploy your .NET Core application in Linux OS from [here](https://support.syncfusion.com/kb/article/7626/how-to-deploy-net-core-application-with-word-to-pdf-conversion-capabilities-in-linux-os). -N> 4. From v28.2.3, the dependent package SkiaSharp is upgraded from 2.88.8 to 3.116.1 version and it is mandatory to use SkiaSharp.NativeAssets.Linux v3.116.1 and HarfBuzzSharp.NativeAssets.Linux v8.3.0.1 packages for converting Word documents into PDF in Linux environment. +N> 4. From v32.1.19, the dependent package SkiaSharp is upgraded from 3.116.1 to 3.119.1 version and it is mandatory to use SkiaSharp.NativeAssets.Linux v3.119.1 and HarfBuzzSharp.NativeAssets.Linux v8.3.1.2 packages for converting Word documents into PDF in Linux environment. N> 5. "DocIO supports Word to PDF conversion in UWP application using DocIORenderer." For further information, please refer [here](https://support.syncfusion.com/kb/article/8902/how-to-convert-word-document-to-pdf-in-uwp) N> 6. Syncfusion has **deprecated the ASP.NET package**. We strongly recommend upgrading your applications to ASP.NET Core. Refer [here](https://help.syncfusion.com/document-processing/word/word-library/net/faqs/migrate-from-net-framework-to-net-core) to migrate from .NET Framework to .NET Core. @@ -175,8 +175,8 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)'| markdownify }}
                        - {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
                        + {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }}
                          @@ -188,7 +188,7 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)'| markdownify }}
                            diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Unsupported-elements-word-to-pdf.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Unsupported-elements-word-to-pdf.md index 0358e4b9c..ea20b1a0c 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/Unsupported-elements-word-to-pdf.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/Unsupported-elements-word-to-pdf.md @@ -30,7 +30,26 @@ Only DOCX and WordML format documents are supported. Chart -Only DOCX and WordML format documents are supported from .NET Framework 4.0 onwards. The following chart types are not supported: Line-Stacked Line, Line-Stacked line with markers, Pie-Pie of Pie, Pie-Bar of Pie, Map-Filled Map, Stock-Volume high low close, Stock-Volume open high low close, Surface-3D Surface, Surface-Wireframe 3D Surface, Surface-Contour, Surface-Wireframe Contour, Treemap-Treemap, Sunburst-Sunburst, Histogram-Histogram, Histogram-Pareto chart, Box & Whisker, Waterfall and Funnel. + Only DOCX and WordML format documents are supported from .NET Framework 4.0 onwards. +

                            + The following chart types are not supported on all platforms: +
                              +
                            • Pie‑Bar of Pie
                              • +
                            • Map‑Filled Map
                              • +
                            • Surface‑3D Surface
                              • +
                            • Surface‑Wireframe 3D Surface
                              • +
                            • Surface‑Contour
                              • +
                            • Surface‑Wireframe Contour
                              • +

                            + In addition, the following chart types are not supported in the Framework only: +
                              +
                            • Pie‑Pie of Pie
                              • +
                            • Stock‑Volume High‑Low‑Close
                              • +
                            • Stock‑Volume Open‑High‑Low‑Close
                              • +
                            • Treemap‑Treemap
                              • +
                            • Sunburst‑Sunburst
                              • +
                            • Box & Whisker
                              • +
                            diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/word-to-pdf-conversion-faqs.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/word-to-pdf-conversion-faqs.md index deef040fa..c60686c0c 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/word-to-pdf-conversion-faqs.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/word-to-pdf-conversion-faqs.md @@ -99,7 +99,7 @@ This exception typically occurs due to version mismatches between SkiaSharp and ## Why does System.TypeInitializationException occur during Word to PDF or image conversion in Linux using Syncfusion DocIO? -This error usually occurs due to an incompatible GLIBC version on the Linux system. SkiaSharp, used by DocIO for rendering, requires a minimum GLIBC version to function correctly. For example, SkiaSharp version 3.116.1 requires at least GLIBC version 2.29, which is not available in older Linux distributions like Debian 10. If a lower version is present, the conversion may fail with errors such as GLIBC_2.29 not found. To resolve this, ensure the operating system includes the required GLIBC version for the SkiaSharp version being used, or upgrade to a newer Linux distribution. +This error usually occurs due to an incompatible GLIBC version on the Linux system. SkiaSharp, used by DocIO for rendering, requires a minimum GLIBC version to function correctly. For example, SkiaSharp version 3.119.1 requires at least GLIBC version 2.29, which is not available in older Linux distributions like Debian 10. If a lower version is present, the conversion may fail with errors such as GLIBC_2.29 not found. To resolve this, ensure the operating system includes the required GLIBC version for the SkiaSharp version being used, or upgrade to a newer Linux distribution. ## Is it possible to substitute fonts in a Word document? diff --git a/Document-Processing/Word/Conversions/Word-To-PDF/NET/word-to-pdf-linux-docker.md b/Document-Processing/Word/Conversions/Word-To-PDF/NET/word-to-pdf-linux-docker.md index cb71d7400..7b433f4c2 100644 --- a/Document-Processing/Word/Conversions/Word-To-PDF/NET/word-to-pdf-linux-docker.md +++ b/Document-Processing/Word/Conversions/Word-To-PDF/NET/word-to-pdf-linux-docker.md @@ -20,8 +20,8 @@ Step 1: Create a new Core Console application. Step 2: Install the below NuGet packages as a reference to your project from [NuGet.org](https://www.nuget.org/). * [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core/) -* [SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1) -* [HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1) +* [SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1) +* [HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2) ![Install DocIO Renderer NuGet package](linuxdockerimages/install-renderer-nuget-in-file-formats-word.png) ![Install Skiasharp NuGet package](linuxdockerimages/install-skia-sharp-nuget-in-file-formats-word.png) diff --git a/Document-Processing/Word/Word-Library/NET/NuGet-Packages-Required.md b/Document-Processing/Word/Word-Library/NET/NuGet-Packages-Required.md index 76f1a69d3..499c7e5db 100644 --- a/Document-Processing/Word/Word-Library/NET/NuGet-Packages-Required.md +++ b/Document-Processing/Word/Word-Library/NET/NuGet-Packages-Required.md @@ -6,7 +6,7 @@ control: DocIO documentation: UG --- -# NuGet Packages Required +# NuGet Packages Required for Word Library ## Installing Syncfusion® DocIO through NuGet Packages @@ -307,7 +307,7 @@ Install-Package Syncfusion.DocToPdfConverter.AspNet N> 1. Please refer the procedure to deploy your .NET Core application in Linux OS from [here](https://support.syncfusion.com/kb/article/7626/how-to-deploy-net-core-application-with-word-to-pdf-conversion-capabilities-in-linux-os). -N> 2. From v28.2.3, the dependent package SkiaSharp is upgraded from 2.88.8 to 3.116.1 version and it is mandatory to use SkiaSharp.NativeAssets.Linux v3.116.1 and HarfBuzzSharp.NativeAssets.Linux v8.3.0.1 packages for converting Word documents into PDF in Linux environment. +N> 2. From v32.1.19, the dependent package SkiaSharp is upgraded from 3.116.1 to 3.119.1 version and it is mandatory to use SkiaSharp.NativeAssets.Linux v3.119.1 and HarfBuzzSharp.NativeAssets.Linux v8.3.1.2 packages for converting Word documents into PDF in Linux environment. N> 3. "DocIO supports Word to PDF conversion in UWP application using DocIORenderer." For further information, please refer [here](https://support.syncfusion.com/kb/article/8902/how-to-convert-word-document-to-pdf-in-uwp) ### Additional NuGet packages required for Linux @@ -326,8 +326,8 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)'| markdownify }}
                            - {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
                            + {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }}
                              @@ -339,7 +339,7 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)'| markdownify }}
                                @@ -509,8 +509,8 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)'| markdownify }}
                                - {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.0.1](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.0.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
                                + {{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }}
                                  @@ -522,7 +522,7 @@ The following table illustrates the native assets NuGet packages and their appli - {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)'| markdownify }} + {{'[SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.119.1)'| markdownify }}
                                    diff --git a/Document-Processing/Word/Word-Library/NET/faqs/linux-faqs.md b/Document-Processing/Word/Word-Library/NET/faqs/linux-faqs.md index 93a0d89ae..acb555235 100644 --- a/Document-Processing/Word/Word-Library/NET/faqs/linux-faqs.md +++ b/Document-Processing/Word/Word-Library/NET/faqs/linux-faqs.md @@ -178,6 +178,15 @@ NuGet packages to install +From v32.1.19 + + +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
                                    +{{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }} + + + + From v28.2.3 @@ -243,7 +252,7 @@ From v18.4.0.x to 19.4.0.x Before v18.4.0.x -Install SkiaSharp.Linux NuGet package for .Net Core application in Linux OS. you can find the SkiaSharp.Linux NuGet package created by us from {{'[here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/SkiaSharp.Linux.1.59.3-2103435070)'| markdownify }}.
                                    +Install SkiaSharp.Linux NuGet package for .NET Core application in Linux OS. you can find the SkiaSharp.Linux NuGet package created by us from {{'[here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/SkiaSharp.Linux.1.59.3-2103435070)'| markdownify }}.
                                    For more information, Please refer {{'[here](https://help.syncfusion.com/document-processing/word/word-library/net/faq#how-to-perform-word-to-pdf-in-linux-prior-to-v184-release)'| markdownify }}. @@ -268,6 +277,15 @@ NuGet packages to install +From v32.1.19 + + +{{'[SkiaSharp.NativeAssets.Linux v3.119.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.119.1)'| markdownify }}
                                    +{{'[HarfBuzzSharp.NativeAssets.Linux v8.3.1.2](https://www.nuget.org/packages/HarfBuzzSharp.NativeAssets.Linux/8.3.1.2)'| markdownify }} + + + + From v28.2.3 diff --git a/Document-Processing/Word/Word-Processor/angular/paragraph-format.md b/Document-Processing/Word/Word-Processor/angular/paragraph-format.md index 72fdbb48b..e54ff618c 100644 --- a/Document-Processing/Word/Word-Processor/angular/paragraph-format.md +++ b/Document-Processing/Word/Word-Processor/angular/paragraph-format.md @@ -64,8 +64,11 @@ this.documentEditor.editor.toggleTextAlignment('Center' | 'Left' | 'Right' | 'Ju You can define the line spacing and its type for selected paragraphs using the following sample code. ```typescript +// Set line spacing type this.documentEditor.selection.paragraphFormat.lineSpacingType='AtLeast'; -this.documentEditor.selection.paragraphFormat.lineSpacing= 6; +// Set line spacing value (supports both integer and float) +this.documentEditor.selection.paragraphFormat.lineSpacing= 6; // Integer value +this.documentEditor.selection.paragraphFormat.lineSpacing= 6.5; // Float value ``` ## Paragraph spacing diff --git a/Document-Processing/Word/Word-Processor/angular/spell-check.md b/Document-Processing/Word/Word-Processor/angular/spell-check.md index 5d436fbf2..8cd8f7e2b 100644 --- a/Document-Processing/Word/Word-Processor/angular/spell-check.md +++ b/Document-Processing/Word/Word-Processor/angular/spell-check.md @@ -41,11 +41,11 @@ export class AppComponent { ## Enable SpellCheck -To enable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#enablespellcheck) property as `true` and then configure SpellCheckSettings. +To enable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/index-default#enablespellcheck) property as `true` and then configure SpellCheckSettings. ## Disable SpellCheck -To disable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/#enablespellcheck) property initialization code. The default value of this property is false. +To disable spell check in DocumentEditor, set [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/index-default#enablespellcheck) property as `false` or remove [`enableSpellCheck`](https://ej2.syncfusion.com/angular/documentation/api/document-editor/index-default#enablespellcheck) property initialization code. The default value of this property is false. ## Spell check settings @@ -73,8 +73,6 @@ Document Editor provides multi-language spell check support. You can add as many this.container.documentEditor.spellChecker.languageID = 1033; //LCID of "en-us"; ``` -* Refer to the [Spell checker](https://gitea.syncfusion.com/essential-studio/ej2-documenteditor-server/) link for configuring spell checker in server-side. - ### EnableOptimizedSpellCheck Document Editor provides option to spellcheck page by page when loading the documents. The default value of this property is false, so when opening the document spellcheck web API will be called for each word in the document. To optimize the frequency of spellcheck web API calls, you can enable this property. @@ -162,4 +160,6 @@ Ignore All: ignore all occurrence of a word from error in the entire document. Using this option, you can open spell check dialog. Please see below screenshot for your reference. -![Spell check dialog](images/spell-check-dialog.png) \ No newline at end of file +![Spell check dialog](images/spell-check-dialog.png) + +* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/angular/web-services/core#spell-check) link for configuring spell checker in server-side. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/spell-check.md b/Document-Processing/Word/Word-Processor/asp-net-core/spell-check.md index d7ab2ddda..9b7278ee1 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/spell-check.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/spell-check.md @@ -1,6 +1,6 @@ --- layout: post -title: Spell Check in Document Editor Component +title: Spell Check in ASP.NET Core Document Editor Component | Syncfusion description: Learn here all about spell check in Syncfusion Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Spell Check @@ -17,9 +17,7 @@ Document editor supports performing spell checking for any input text. You can p {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/document-editor/asp-net-core/spell-checker/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Spell-checker.cs" %} -{% endhighlight %}{% endtabs %} - +{% endtabs %} ## Features @@ -147,4 +145,4 @@ Using this option, you can open spell check dialog. ![Spell check dialog](images/spell-check-dialog.png) -* Refer to the [Spell checker](https://gitea.syncfusion.com/essential-studio/ej2-documenteditor-server/) link for configuring spell checker in server-side. \ No newline at end of file +* Refer to the [Spell checker](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/tree/master/ASP.NET%20Core#steps-to-configure-spell-checker) link for configuring spell checker in server-side. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/paragraph-format.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/paragraph-format.md index a5ae4ec07..f44fcdc05 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/paragraph-format.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/paragraph-format.md @@ -151,6 +151,9 @@ documenteditor.documentEditorSettings.showHiddenMarks = true; {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/document-editor/asp-net-mvc/paragraph-format/razor %} {% endhighlight %} +{% highlight c# tabtitle="Paragraph-format.cs" %} +{% include code-snippet/document-editor/asp-net-mvc/paragraph-format/document-editor.cs %} +{% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/spell-check.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/spell-check.md index 14926c5da..62f5b81cd 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/spell-check.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/spell-check.md @@ -1,6 +1,6 @@ --- layout: post -title: Spell Check in ASP.NET MVC Document Editor Component +title: Spell Check in ASP.NET MVC Document Editor Component | Syncfusion description: Learn here all about spell check in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Spell Check @@ -17,8 +17,7 @@ Document editor supports performing spell checking for any input text. You can p {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/document-editor/asp-net-mvc/spell-checker/razor %} {% endhighlight %} -{% highlight c# tabtitle="Spell-checker.cs" %} -{% endhighlight %}{% endtabs %} +{% endtabs %} @@ -147,4 +146,4 @@ Using this option, you can open spell check dialog. ![Spell check dialog](images/spell-check-dialog.png) -* Refer to the [Spell checker](https://gitea.syncfusion.com/essential-studio/ej2-documenteditor-server/) link for configuring spell checker in server-side. \ No newline at end of file +* Refer to the [Spell checker](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/tree/master/ASP.NET%20MVC#spell-check) link for configuring spell checker in server-side. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md index 295dbf54e..87fb2b2f2 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/paragraph-format.md @@ -79,6 +79,7 @@ documenteditor.selection.paragraphFormat.lineSpacingType = 'AtLeast'; // Set line spacing value (supports both integer and float) documenteditor.selection.paragraphFormat.lineSpacing = 6; // Integer value documenteditor.selection.paragraphFormat.lineSpacing = 6.5; // Float value + ``` ## Paragraph spacing diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/spell-check.md b/Document-Processing/Word/Word-Processor/javascript-es5/spell-check.md index 759cba927..4ee986a79 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/spell-check.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/spell-check.md @@ -30,7 +30,7 @@ spellChecker.allowSpellCheckAndSuggestion = true; ``` >Note: Document Editor requires server-side dependencies for spell check configuration. -Refer to the [Document Editor Web API service projects from GitHub](https://gitea.syncfusion.com/essential-studio/ej2-documenteditor-server/) link for configuring spell checker in server-side.To know about server-side dependencies, please refer this [page](./web-services-overview). +Refer to the [Document Editor Web API service projects](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core) link for configuring spell checker in server-side.To know about server-side dependencies, please refer this [page](./web-services-overview). ## Features @@ -159,3 +159,5 @@ Ignore All: ignore all occurrence of a word from error in the entire document. Using this option, you can open spell check dialog. Please see below screenshot for your reference. ![Spell check dialog in JavaScript document editor](images/spell-check-dialog.png) + +* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es5/web-services/core#spell-check) link for configuring spell checker in server-side. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/spell-check.md b/Document-Processing/Word/Word-Processor/javascript-es6/spell-check.md index dad69c3ec..59d8262a6 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/spell-check.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/spell-check.md @@ -30,7 +30,7 @@ spellChecker.allowSpellCheckAndSuggestion = true; ``` >Note: Document Editor requires server-side dependencies for spell check configuration. -Refer to the [Document Editor Web API service projects from GitHub](https://gitea.syncfusion.com/essential-studio/ej2-documenteditor-server/) link for configuring spell checker in server-side.To know about server-side dependencies, please refer this [page](./web-services-overview). +Refer to the [Document Editor Web API service projects](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es6/web-services/core#spell-check) link for configuring spell checker in server-side.To know about server-side dependencies, please refer this [page](./web-services-overview). ## Features @@ -159,3 +159,5 @@ Ignore All: ignore all occurrence of a word from error in the entire document. Using this option, you can open spell check dialog. Please see below screenshot for your reference. ![Spell check dialog in JavaScript document editor](images/spell-check-dialog.png) + +* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es6/web-services/core#spell-check) link for configuring spell checker in server-side. diff --git a/Document-Processing/Word/Word-Processor/react/how-to/export-document-as-pdf.md b/Document-Processing/Word/Word-Processor/react/how-to/export-document-as-pdf.md index b78aa0be8..acacdf8bf 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/export-document-as-pdf.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/export-document-as-pdf.md @@ -185,4 +185,4 @@ public void ExportPdf([FromBody]SaveParameter data) } ``` -Get the complete working sample in this [`link`](https://github.com/SyncfusionExamples/Export-document-as-PDF-in-Document-Editor/). \ No newline at end of file +Get the complete working sample in this [`link`](https://github.com/SyncfusionExamples/Export-document-as-PDF-in-Document-Editor/). diff --git a/Document-Processing/Word/Word-Processor/react/spell-check.md b/Document-Processing/Word/Word-Processor/react/spell-check.md index 44845c995..dd30e68f7 100644 --- a/Document-Processing/Word/Word-Processor/react/spell-check.md +++ b/Document-Processing/Word/Word-Processor/react/spell-check.md @@ -97,11 +97,9 @@ documentEditor.spellChecker.allowSpellCheckAndSuggestion = false; Document Editor provides multi-language spell check support. You can add as many languages (dictionaries) in the server-side and to use that language for spell checking in Document Editor, it must be matched with [`languageID`](https://ej2.syncfusion.com/react/documentation/api/document-editor/spellChecker#languageid) you pass in the Document Editor. - ```ts - documentEditor.spellChecker.languageID = 1033; //LCID of "en-us"; - ``` - -* Refer to the [Spell checker](https://gitea.syncfusion.com/essential-studio/ej2-documenteditor-server/) link for configuring spell checker in server-side. +```ts +documentEditor.spellChecker.languageID = 1033; //LCID of "en-us"; +``` ### EnableOptimizedSpellCheck @@ -190,4 +188,6 @@ Ignore All: ignore all occurrence of a word from error in the entire document. Using this option, you can open spell check dialog. Please see below screenshot for your reference. -![Spell check dialog](images/spell-check-dialog.png) \ No newline at end of file +![Spell check dialog](images/spell-check-dialog.png) + +* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/react/web-services/core#spell-check) link for configuring spell checker in server-side. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/vue/spell-check.md b/Document-Processing/Word/Word-Processor/vue/spell-check.md index 2366b4b46..7597666c5 100644 --- a/Document-Processing/Word/Word-Processor/vue/spell-check.md +++ b/Document-Processing/Word/Word-Processor/vue/spell-check.md @@ -200,4 +200,4 @@ Using this option, you can open spell check dialog. Please see below screenshot ![Spell check dialog](images/spell-check-dialog.png) -* Refer to the [Spell checker](https://gitea.syncfusion.com/essential-studio/ej2-documenteditor-server/) link for configuring spell checker in server-side. \ No newline at end of file +* Refer to the [Spell checker](https://help.syncfusion.com/document-processing/word/word-processor/vue/web-services/core#spell-check) link for configuring spell checker in server-side. \ No newline at end of file diff --git a/Document-Processing/ai-coding-assistant/prompt-library.md b/Document-Processing/ai-coding-assistant/prompt-library.md new file mode 100644 index 000000000..84d360e59 --- /dev/null +++ b/Document-Processing/ai-coding-assistant/prompt-library.md @@ -0,0 +1,232 @@ +--- +layout: post +title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion +description: Explore the AI Coding Assistant Prompt Library to enhance DocumentSDK productivity with code generation and configuration guidance. +platform: document-processing +control: Syncfusion AI Coding Assistant Prompt Library +documentation: ug +domainurl: ##DomainURL## +--- + +# Prompt Library - AI Coding Assistant + +Speed up your projects using these ready-made prompts for Syncfusion® Document Processing libraries. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. + +## How to Use + +Before starting, make sure your MCP Server is set up and running. + +* Choose a prompt that fits your need. +* Copy the full prompt with the #SyncfusionDocumentSDKAssistant handle. +* Customize the prompt for your specific use case. +* Execute via the MCP Server. +* Always check and test the code before adding it to your project. + +## Component-Specific Prompts + +### PDF + +The Syncfusion PDF Library enables developers to create, read, and edit PDF documents programmatically across all .NET applications. + +{% promptcards %} +{% promptcard Create PDF %} +#SyncfusionDocumentSDKAssistant Show me how to create text and images in a PDF document? +{% endpromptcard %} +{% promptcard Edit and Save %} +#SyncfusionDocumentSDKAssistant How can I open an existing PDF, modify its content, and save the updated file in ASP.NET MVC? +{% endpromptcard %} +{% promptcard Form Fields %} +#SyncfusionDocumentSDKAssistant How can I create form fields and add combo and radio box in PDF document? +{% endpromptcard %} +{% promptcard Bookmarks %} +#SyncfusionDocumentSDKAssistant How do I add, edit, and remove bookmarks in a PDF? +{% endpromptcard %} +{% promptcard Watermarks %} +#SyncfusionDocumentSDKAssistant Provide steps to add text watermarks and image watermarks to a PDF? +{% endpromptcard %} +{% promptcard Table and Shape %} +#SyncfusionDocumentSDKAssistant Insert an image on a new PDF page, add a table, draw a shape, and place text inside the shape? +{% endpromptcard %} +{% promptcard ZUGFeRD Invoices %} +#SyncfusionDocumentSDKAssistant Provide an example to generate a ZUGFeRD-compliant invoice PDF? +{% endpromptcard %} +{% promptcard Merge and Split %} +#SyncfusionDocumentSDKAssistant How do I merge multiple PDFs and split a PDF into separate files or pages? +{% endpromptcard %} +{% promptcard Compress PDF %} +#SyncfusionDocumentSDKAssistant How do I compress an existing PDF and optimize it for a smaller file size? +{% endpromptcard %} +{% promptcard Digital Signatures %} +#SyncfusionDocumentSDKAssistant Provide steps to digitally sign a PDF and validate existing signatures? +{% endpromptcard %} +{% promptcard XPS to PDF Conversion %} +#SyncfusionDocumentSDKAssistant How do I convert XPS documents to PDF? +{% endpromptcard %} +{% promptcard HTML to PDF Conversion %} +#SyncfusionDocumentSDKAssistant How do I convert HTML documents to PDF? +{% endpromptcard %} +{% promptcard Security Operations %} +#SyncfusionDocumentSDKAssistant Show me how to encrypt a PDF with password and later decrypt it? +{% endpromptcard %} +{% endpromptcards %} + +### Word + +The Syncfusion Word Library enables developers to create, read, edit, and convert Word documents programmatically across all .NET applications. + +{% promptcards %} +{% promptcard Create Word Document %} +#SyncfusionDocumentSDKAssistant Show me how to create a Word document from scratch with paragraphs in new document? +{% endpromptcard %} +{% promptcard Edit and Save %} +#SyncfusionDocumentSDKAssistant How can I open an existing DOCX, modify content and save the document? +{% endpromptcard %} +{% promptcard Mail Merge %} +#SyncfusionDocumentSDKAssistant How to create a Word template document with merge fields? +{% endpromptcard %} +{% promptcard Bookmarks %} +#SyncfusionDocumentSDKAssistant How to navigate to a bookmark and insert contents in DOCX? +{% endpromptcard %} +{% promptcard Split Documents %} +#SyncfusionDocumentSDKAssistant How do I split a Word document into multiple files by section? +{% endpromptcard %} +{% promptcard Table and Shapes %} +#SyncfusionDocumentSDKAssistant Insert a table in new page, draw a shape, and place text inside the shape in Word document? +{% endpromptcard %} +{% promptcard Table of Contents (TOC) %} +#SyncfusionDocumentSDKAssistant How can I insert TOC in Word Document? +{% endpromptcard %} +{% promptcard Forms %} +#SyncfusionDocumentSDKAssistant How do I create a checkbox and dropdown field in a Word document for ASP.NET Core? +{% endpromptcard %} +{% promptcard Fields %} +#SyncfusionDocumentSDKAssistant How to update the fields present in Word document? +{% endpromptcard %} +{% promptcard Styles and Formatting %} +#SyncfusionDocumentSDKAssistant How can I define and apply paragraph, styles, bullet lists in Word document? +{% endpromptcard %} +{% promptcard HTML to DOCX %} +#SyncfusionDocumentSDKAssistant Provide code to convert HTML to DOCX Document? +{% endpromptcard %} +{% promptcard Find and Replace %} +#SyncfusionDocumentSDKAssistant How to find text and replace with other text in Word document? +{% endpromptcard %} +{% promptcard Security %} +#SyncfusionDocumentSDKAssistant Show me how to encrypt the Word document with password? +{% endpromptcard %} +{% promptcard Compare %} +#SyncfusionDocumentSDKAssistant How to compare two Word documents? +{% endpromptcard %} +{% promptcard Math Equation %} +#SyncfusionDocumentSDKAssistant How to create accent equation using LaTeX in Word document? +{% endpromptcard %} +{% promptcard Word to PDF %} +#SyncfusionDocumentSDKAssistant How to convert a Word document into PDF document? +{% endpromptcard %} +{% promptcard Word to MD %} +#SyncfusionDocumentSDKAssistant How to convert a Word document to a Markdown? +{% endpromptcard %} +{% endpromptcards %} + +### Excel + +The Syncfusion Excel Library enables developers to create, read, edit, and convert Excel documents programmatically across all .NET applications. + +{% promptcards %} +{% promptcard Create Excel Document %} +#SyncfusionDocumentSDKAssistant How to create an Excel file from scratch? +{% endpromptcard %} +{% promptcard Edit and Save %} +#SyncfusionDocumentSDKAssistant How can I open an existing Excel document, modify content and save the document? +{% endpromptcard %} +{% promptcard Import Data from Data Table to Excel %} +#SyncfusionDocumentSDKAssistant How do I import a Data Table into a new Excel worksheet using Document SDK? +{% endpromptcard %} +{% promptcard Conditional Format %} +#SyncfusionDocumentSDKAssistant How to create and apply various conditional formats for different ranges? +{% endpromptcard %} +{% promptcard Export Data from Excel to Data Table %} +#SyncfusionDocumentSDKAssistant Show me how to export Excel data into collection objects using Export Data<>? +{% endpromptcard %} +{% promptcard Charts and PivotChart %} +#SyncfusionDocumentSDKAssistant Create a column chart from a data range with title, axis labels, and legend in Excel? +{% endpromptcard %} +{% promptcard Formula %} +#SyncfusionDocumentSDKAssistant How to create workbook-level named ranges and use them in formulas in Excel Components? +{% endpromptcard %} +{% promptcard Data Validation %} +#SyncfusionDocumentSDKAssistant Add dropdown list validation for a column using a named range? +{% endpromptcard %} +{% promptcard Table %} +#SyncfusionDocumentSDKAssistant Convert a range to an Excel Table with header row and banded style? +{% endpromptcard %} +{% promptcard Remove Encryption %} +#SyncfusionDocumentSDKAssistant How to remove a protection for an encrypted document for Excel Data? +{% endpromptcard %} +{% promptcard Drawing Objects and Shapes %} +#SyncfusionDocumentSDKAssistant Show the code for how to create a group shape in ASP.NET MVC for Excel Components? +{% endpromptcard %} +{% promptcard Excel to PDF %} +#SyncfusionDocumentSDKAssistant How to convert an entire Excel workbook to PDF? +{% endpromptcard %} +{% promptcard Chart to Image Conversion %} +#SyncfusionDocumentSDKAssistant How to convert an Excel chart to an image using the chart to image conversion class? +{% endpromptcard %} +{% endpromptcards %} + +### PowerPoint + +The Syncfusion PowerPoint Library enables developers to create, read, edit, and convert PowerPoint presentations programmatically across all .NET applications. + +{% promptcards %} +{% promptcard Create Presentation %} +#SyncfusionDocumentSDKAssistant How to programmatically create a new PowerPoint with slides, layouts, themes, and styled text? +{% endpromptcard %} +{% promptcard Edit and Save %} +#SyncfusionDocumentSDKAssistant How can I load an existing PPTX and save the updated presentation? +{% endpromptcard %} +{% promptcard Convert PowerPoint to PDF %} +#SyncfusionDocumentSDKAssistant How to convert a PowerPoint document into PDF document in .NET Core? +{% endpromptcard %} +{% promptcard Convert Slides to Images %} +#SyncfusionDocumentSDKAssistant Give an example that demonstrates the conversion of an entire Presentation to images? +{% endpromptcard %} +{% promptcard Create and Edit Charts %} +#SyncfusionDocumentSDKAssistant Show me how to insert charts, update data, and customize legends, axes, and data labels in PPTX? +{% endpromptcard %} +{% promptcard Convert Chart to Image %} +#SyncfusionDocumentSDKAssistant Is it possible to convert the charts in a Presentation slide to image? +{% endpromptcard %} +{% promptcard Create and Edit Animations %} +#SyncfusionDocumentSDKAssistant How do I apply and control entrance and emphasis animations with triggers and sequence ordering in Presentation? +{% endpromptcard %} +{% promptcard Create and Edit Transition Effects %} +#SyncfusionDocumentSDKAssistant Show how to set a transition effect to a PowerPoint slide? +{% endpromptcard %} +{% promptcard Create and Manage Comments %} +#SyncfusionDocumentSDKAssistant How can I insert, edit, and delete reviewer comments and list all comments in a presentation? +{% endpromptcard %} +{% promptcard Encrypt and Decrypt Presentations %} +#SyncfusionDocumentSDKAssistant Does PPTX support a password-protect with encryption and open a protected file? +{% endpromptcard %} +{% promptcard Create and Modify Sections %} +#SyncfusionDocumentSDKAssistant How can I create sections in PowerPoint? +{% endpromptcard %} +{% promptcard Clone and Merge %} +#SyncfusionDocumentSDKAssistant How to clone the slide collection of a section and add those slides to a destination presentation? +{% endpromptcard %} +{% promptcard Work with Tables %} +#SyncfusionDocumentSDKAssistant Show the code to apply the custom table formatting in presentation? +{% endpromptcard %} +{% promptcard Insert Shapes %} +#SyncfusionDocumentSDKAssistant Show how to insert shapes in presentation document? +{% endpromptcard %} +{% promptcard Insert PowerPoint Elements %} +#SyncfusionDocumentSDKAssistant Insert an image on a new slide, add a table, draw a shape, and place text inside the shape in the presentation document? +{% endpromptcard %} +{% endpromptcards %} + +## See also + +* [AI Coding Assistant Overview](https://help.syncfusion.com/document-processing/ai-coding-assistant/overview) +* [SyncfusionDocumentSDKAssistant MCP Server](https://help.syncfusion.com/document-processing/ai-coding-assistant/mcp-server)