906190: UGDocumentation

Author: Vincentsf4657

How to/Customization of print Quality/src/index.js

@@ -1,69 +1,23 @@
 import * as ReactDOM from 'react-dom';
 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';
-import { ComboBox } from "@syncfusion/ej2-dropdowns";
-import { TextBox } from "@syncfusion/ej2-inputs";           
-
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 export function App() {
-
-// Add OnCreateSearch outside the App function
-function OnCreateSearch() {
-  this.addIcon('prepend', 'e-icons e-search');
-}
-
-  var toolItem1 = {
-    prefixIcon: 'e-icons e-paste',
-    id: 'print',
-    tooltipText: 'Custom toolbar item',
-};
-var toolItem2  = {
-    id: 'download',
-    text: 'Save',
-    tooltipText: 'Custom toolbar item',
-    align: 'right'
-};
-var LanguageList = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
-var toolItem3 = {
-    type: 'Input',
-    tooltipText: 'Language List',
-    cssClass: 'percentage',
-    align: 'Left',
-    id: 'dropdown',
-    template: new ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })  
-};
-var toolItem4 = {
-    type: 'Input',
-    tooltipText: 'Text',
-    align: 'Right',
-    cssClass: 'find',
-    id: 'textbox',
-    template: new TextBox({ width: 125, placeholder: 'Type Here', created: OnCreateSearch})
-}
-  function toolbarClick(args){
-    var viewer = document.getElementById('container').ej2_instances[0];
-    if (args.item && args.item.id === 'print') {
-        viewer.printModule.print();
-    }
-  };
 return (<div>
     <div className='control-section'>
-        <PdfViewerComponent 
-            id="container" 
-            documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-            resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
-            toolbarSettings={{ showTooltip : true, toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']}}
-            toolbarClick={toolbarClick}
-            //  By changing value here we can adjust the quality of the pdf  
-            printscaleFactor={0.5}
-            style={{ 'height': '640px' }}>
-               {/* Inject the required services */}
-               <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
-                                   Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
-        </PdfViewerComponent>
+        <PdfViewerComponent id="container" 
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" 
+        resourceUrl="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib"
+        style={{ 'height': '640px' }}
+        /* By changing the value of the pringScale Factor we can adjust the quality of the PDF file*/
+        printScaleFactor = {0.5}
+        >
+        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner,PageOrganizer]}/>
+        </PdfViewerComponent>   
     </div>
 </div>);
+
 }
+
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);