Merge pull request #14 from SyncfusionExamples/895039-saveButton

SasidharanKaruppiah · web-flow · commit 270e98ee07af · 2024-07-17T11:22:21.000+05:30
895039: Add-Save-Button
diff --git a/How to/Add Save Button In Toolbar/index.html b/How to/Add Save Button In Toolbar/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html><html lang="en"><head>
+  <title>EJ2 PDF Viewer</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Typescript PDF Viewer Control">
+  <meta name="author" content="Syncfusion">
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-base/styles/material.css" rel="stylesheet">    
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-pdfviewer/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-buttons/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-popups/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-navigations/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-dropdowns/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-lists/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-inputs/styles/material.css" rel="stylesheet">    
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-notifications/styles/material.css" rel="stylesheet">
+  
+  <!-- Essential JS 2 PDF Viewer's script --> 
+  <script src="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js" type="text/javascript"></script>
+  <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>  
+</head>
+<body>
+  
+  <div id="container">
+    <br><br><br>
+      <div id="PdfViewer" style="height:500px;width:100%;"></div>        
+  </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+ele.style.visibility = "visible";
+}   
+</script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
diff --git a/How to/Add Save Button In Toolbar/index.js b/How to/Add Save Button In Toolbar/index.js
@@ -0,0 +1,24 @@
+var toolItem1  = {
+    prefixIcon: 'e-icons e-save',
+    id: 'download',
+    text: 'Save',
+    tooltipText: 'Save Button',
+    align: 'Left'
+};
+var pdfviewer = new ej.pdfviewer.PdfViewer({
+                    documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+                    resourceUrl:'https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib',
+                    toolbarSettings : { toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] }
+               });
+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);
+               
+//PDF Viewer control rendering starts
+pdfviewer.appendTo('#PdfViewer');
+pdfviewer.toolbarClick = function (args) {
+    if (args.item && args.item.id === 'download') {
+        pdfviewer.download();
+    }
+};
+function OnCreateSearch() {
+    this.addIcon('prepend', 'e-icons e-search');
+}
