frabcus/pdf-tables-js-client.html

## pdf-tables-js-client.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>

<h1>Convert a PDF to an HTML table using Javascript</h1>

<style>
#drop_zone {
    border: 2px dashed #bbb;
    border-radius: 5px;
    padding: 55px;
    text-align: center;
    color: #bbb;
    width: 500px;
}
table {
    border-collapse: collapse;
    margin-bottom: 20px;
}
table td {
    border: 1px solid black;
}
</style>


<div id="drop_zone">Drop a PDF in here</div>
<p id="output"></p>

<script>

var pdftables_api_key = "KEYHERE"
var pdftables_api_url = "http://localhost:62345/api?key=" + pdftables_api_key + "&format=xml"

function convertPDF(theFile) {
    var formData = new FormData()
    formData.append('f[]', theFile)

    var xhr = new XMLHttpRequest()
    xhr.open('POST', pdftables_api_url, true)

    // Set up a handler for when the request finishes.
    xhr.onload = function () {
        if (xhr.status === 200) {
            document.getElementById('output').innerHTML += "<p>Response:</p>" + xhr.response + " "
        } else {
            document.getElementById('output').innerHTML += "Error! " + xhr.response + " "
        }
    }

    // Send the Data.
    xhr.send(formData)
}

function handleFileSelect(evt) {
    evt.stopPropagation()
    evt.preventDefault()

    // files is a FileList of File objects
    var files = evt.dataTransfer.files
    for (var i = 0, f; f = files[i]; i++) {
      document.getElementById('output').innerHTML += "<strong>" + escape(f.name) + "</strong> "
      convertPDF(f)
    }
}

function handleDragOver(evt) {
    evt.stopPropagation()
    evt.preventDefault()
    evt.dataTransfer.dropEffect = 'copy'
}

var dropZone = document.getElementById('drop_zone')
dropZone.addEventListener('dragover', handleDragOver, false)
dropZone.addEventListener('drop', handleFileSelect, false)

</script>

</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="jquery.js"></script>
	</head>
	<body>

	<h1>Convert a PDF to an HTML table using Javascript</h1>

	<style>
	#drop_zone {
	border: 2px dashed #bbb;
	border-radius: 5px;
	padding: 55px;
	text-align: center;
	color: #bbb;
	width: 500px;
	}
	table {
	border-collapse: collapse;
	margin-bottom: 20px;
	}
	table td {
	border: 1px solid black;
	}
	</style>


	<div id="drop_zone">Drop a PDF in here</div>
	<p id="output"></p>

	<script>

	var pdftables_api_key = "KEYHERE"
	var pdftables_api_url = "http://localhost:62345/api?key=" + pdftables_api_key + "&format=xml"

	function convertPDF(theFile) {
	var formData = new FormData()
	formData.append('f[]', theFile)

	var xhr = new XMLHttpRequest()
	xhr.open('POST', pdftables_api_url, true)

	// Set up a handler for when the request finishes.
	xhr.onload = function () {
	if (xhr.status === 200) {
	document.getElementById('output').innerHTML += "<p>Response:</p>" + xhr.response + " "
	} else {
	document.getElementById('output').innerHTML += "Error! " + xhr.response + " "
	}
	}

	// Send the Data.
	xhr.send(formData)
	}

	function handleFileSelect(evt) {
	evt.stopPropagation()
	evt.preventDefault()

	// files is a FileList of File objects
	var files = evt.dataTransfer.files
	for (var i = 0, f; f = files[i]; i++) {
	document.getElementById('output').innerHTML += "<strong>" + escape(f.name) + "</strong> "
	convertPDF(f)
	}
	}

	function handleDragOver(evt) {
	evt.stopPropagation()
	evt.preventDefault()
	evt.dataTransfer.dropEffect = 'copy'
	}

	var dropZone = document.getElementById('drop_zone')
	dropZone.addEventListener('dragover', handleDragOver, false)
	dropZone.addEventListener('drop', handleFileSelect, false)

	</script>

	</body>
	</html>