Convert Excel to PDF in JQuery - JavaScript
PDF from XLS or CSV sample in JavaScript demonstrating ‘Convert Excel to PDF in JQuery’
converter.js
$(document).ready(function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
$("#result").attr("href", '').html('');
});
$(document).on("click", "#submit", function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
$("#inlineOutput").text(''); // inline output div
$("#status").text(''); // status div
var apiKey = $("#apiKey").val().trim(); //Get your API key at https://app.pdf.co
var formData = $("#form input[type=file]")[0].files[0]; // file to upload
var toType = $("#convertType").val(); // output type
var isInline = $("#outputType").val() == "inline"; // if we need output as inline content or link to output file
$("#status").html('Requesting presigned url for upload... <img src="ajax-loader.gif" />');
$.ajax({
url: `https://api.pdf.co/v1/file/upload/get-presigned-url?name=test.${$("#inputFile").val().split('.').pop().toLowerCase()}&encrypt=true`,
type: 'GET',
headers: { 'x-api-key': apiKey }, // passing our api key
success: function (result) {
if (result['error'] === false) {
var presignedUrl = result['presignedUrl']; // reading provided presigned url to put our content into
var accessUrl = result['url']; // reading output url that will indicate uploaded file
$("#status").html('Uploading... <img src="ajax-loader.gif" />');
$.ajax({
url: presignedUrl, // no api key is required to upload file
type: 'PUT',
data: formData,
processData: false,
success: function () {
$("#status").html('Processing... <img src="ajax-loader.gif" />');
$.ajax({
url: 'https://api.pdf.co/v1/xls/convert/to/' + toType,
type: 'POST',
headers: { 'x-api-key': apiKey, "Content-Type": "application/json" },
data: JSON.stringify({
"url": accessUrl,
"encrypt": true,
"inline": isInline
}),
success: function (result) {
$("#status").text('done converting.');
// console.log(JSON.stringify(result));
$("#resultBlock").show();
if (isInline) {
$("#inlineOutput").text(result['body']);
}
else {
$("#result").attr("href", result['url']).html(result['url']);
}
}
});
},
error: function () {
$("#status").text('error');
}
});
}
}
});
});
sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cloud API JQuery sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="converter.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
<form id="form" enctype="multipart/form-data">
<p>
<label>Copy-paste your API Key for ByteScout Cloud API here</label>
<input type="text" id="apiKey" placeholder="your cloud API Key" value="" /> No API Key yet? Sign up
<a href="https://apidocs.pdf.co" target="_blank">here</a>.
</p>
<p>
<label>Input Excel File (*.xls, *.xlsx)</label>
<input type="file" name="file" id="inputFile" />
</p>
<p>
<label>Convert To</label>
<select id="convertType">
<option value="csv">CSV</option>
<option value="json">JSON</option>
<option value="html">HTML</option>
<option selected="selected" value="pdf">PDF</option>
</select>
</p>
<p>
<label>Output As</label>
<select id="outputType">
<option value="link"> URL to output file </option>
<option value="inline"> inline content</option>
</select>
</p>
<button type="button" id="submit">Convert</button>
<span id="status"></span>
</form>
<div id="errorBlock">
<h2>Error:</h2>
<h4>Code:
<span id="statusCode"></span>
</h4>
<ul id="errors"></ul>
</div>
<div id="resultBlock">
<h2>Output:</h2>
<a id="result" href="" target="_blank"></a>
<div id="inlineOutput"></div>
</div>
</body>
</html>
PDF.co Web API: the Web API with a set of tools for documents manipulation, data conversion, data extraction, splitting and merging of documents. Includes image recognition, built-in OCR, barcode generation and barcode decoders to decode bar codes from scans, pictures and pdf.