Manual Region Selection

Theme:

This demo shows how to use the viewer's Table Extractor tool to extract tabular data from PDFs. The tool's panel should be visible on the left, if not click the 'Table Extraction' icon to activate the tool. Follow the tool's prompts to select a region containing tabular data, adjust your selection or the tool's options if needed, and copy or save the data in any of the supported formats (CSV, TSV or JSON, XLSX, XML or HTML).


loading...
window.onload = function() {
	//DsPdfViewer.LicenseKey = "***key***";
    const viewer = new DsPdfViewer("#viewer", { 
		supportApi: getSupportApiSettings()
	});
    viewer.addDefaultPanels();
    const panelHandle = viewer.addTableExtractionPanel();
    viewer.expandPanel(panelHandle);
	
	// Configure toolbar buttons:    
    viewer.toolbarLayout.viewer = { 
        default: ["open", "extract-table", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"],
        mobile: ["open", "extract-table", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"],
        fullscreen: ["$fullscreen", "open", "extract-table", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"]
    };
	
	var pdfUrlToOpen = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/table-data-1.pdf";
	
	viewer.open(pdfUrlToOpen).then(function() {
        viewer.zoomMode = 1;
		
    });
}

window.onload = function() {
//DsPdfViewer.LicenseKey = "***key***";
const viewer = new DsPdfViewer("#viewer", { 
supportApi: getSupportApiSettings()
});
viewer.addDefaultPanels();
const panelHandle = viewer.addTableExtractionPanel();
viewer.expandPanel(panelHandle);
// Configure toolbar buttons:    
viewer.toolbarLayout.viewer = { 
default: ["open", "extract-table", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"],
mobile: ["open", "extract-table", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"],
fullscreen: ["$fullscreen", "open", "extract-table", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about"]
};
var pdfUrlToOpen = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/table-data-1.pdf";
viewer.open(pdfUrlToOpen).then(function() {
viewer.zoomMode = 1;
});
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Table data extraction - manual region selection.</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%;
}