/** * Initializes and configures the PDF viewer with advanced table extraction capabilities * @param {string} selector - CSS selector for the viewer container element * @param {string} pdfUrlToOpen - URL/path of the PDF document to load */ function loadPdfViewer(selector, pdfUrlToOpen) { // Initialize viewer with support API configuration const viewer = new DsPdfViewer(selector, { supportApi: getSupportApiSettings() }); // Configure table extraction with advanced settings viewer.options.tableDataExtraction = { // Export format restrictions (TSV and HTML only) allowedExportFormats: ['tsv', 'html'], // Extraction algorithm parameters extractOptions: { /** * Whether to include invisible text in extraction * (text that is neither filled nor stroked) * @default true */ IncludeInvisibleText: false, /** * The similarity coefficient for value comparison during table extraction * - Default: 0.25 * - Lower values = values must be more similar to match * - Higher values = more tolerant to differences */ CoefPrecision: 0.9 }, // Visual editor customization appearance: { visualEditor: { lineColor: "#4CAF50", // Green grid lines selectionAreaColor: "rgba(76, 175, 80, 0.2)", // Light green highlight emptyCellColor: "rgba(76, 175, 80, 0.9)", // Red highlight for empty cells cssText: ` .extracted-table-editor .table-cell { background: rgba(100, 255, 0, 0.2); // Dark background opacity: 0.1; } `, selectionAreaOpacity: 1.0 // Full opacity for selection } } }; // Set up table extraction interface const panelHandle = viewer.addTableExtractionPanel(); viewer.expandPanel(panelHandle); viewer.addDefaultPanels(); // Load document and perform initial extraction viewer.open(pdfUrlToOpen).then(function() { viewer.zoomMode = 1; // Set to fit-page view /** * Predefined selection area for table extraction * @type {number[]} selectionBounds - Array of coordinates [x1, y1, x2, y2] where: * - x1, y1: Bottom-left corner (PDF points) * - x2, y2: Top-right corner (PDF points) * 72 points = 1 inch */ const selectionBounds = [ 29.26, // Left boundary 334.33, // Bottom boundary 688.92, // Right boundary 490.81 // Top boundary ]; // Extract table data from first page (page index 0) viewer.tableDataExtractor.extractTableData(0, selectionBounds); }); } // Initialize viewer when window loads window.onload = function() { // Uncomment to set license key: // DsPdfViewer.LicenseKey = "your_license_key_here"; // Path to demo PDF document const demoPdfPath = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/table-data-one-page.pdf"; loadPdfViewer("#viewer", demoPdfPath); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Table Data Extractor Styling.</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }
