Table Data Extractor Styling

loading...
/**
 * 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);
}