object-exporter
Version:
A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript Object or DOM element only from the frontend!
312 lines (288 loc) • 12.3 kB
HTML
<html lang='en'>
<head>
<title>Object-Exporter Example Page</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="shortcut icon" href="#" />
<link rel='stylesheet' href='lib/css/bootstrap.min.css'>
<a href="https://github.com/gharibi/JsObjExporter" target="_blank"><svg width="100" height="100" viewBox="0 0 250 250"
style="fill:#125412; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg></a>
<script src='../dist/objectexporter.min.js'></script>
<script src='lib/jquery-3.7.0.min.js'></script>
<script src='lib/popper.min.js'></script>
<script src='lib/js/bootstrap.min.js'></script>
<script>
function object2xls() {
// Retrieve the user inputs
var numberOfColumnsInXls = document.getElementById('numberOfColumnsInXls').value;
var numberOfRecordsInXls = document.getElementById('numberOfRecordsInXls').value;
var sheetNameInXls = document.getElementById('sheetNameInXls').value;
var contentsStyleInXls = document.getElementById('contentsStyleInXls').value;
// Construct the dataset for xls
var data = [];
for (var i = 0; i < numberOfRecordsInXls; i++) {
var rowData = {};
for (var j = 0; j <= numberOfColumnsInXls; j++) {
rowData['header_' + j] = createRandomString();
}
data.push(rowData);
}
// Construct the headers for the xls
var headers = [];
for (var k = 0; k < numberOfColumnsInXls; k++) {
headers.push({
alias: 'header ' + k,
name: 'header_' + k,
flex: 1
});
}
// Generate the xls
objectExporter({
type: 'xls',
documentTitle: document.getElementById('documentTitleInXls').value,
documentTitleStyle: document.getElementById('documentTitleStyleInXls').value,
exportable: data,
headers: headers,
fileName: 'sample_excel',
headerStyle: 'font-size:16px; font-weight:bold;',
cellStyle: contentsStyleInXls,
sheetName: sheetNameInXls
})
}
function object2csv() {
// Retrieve the user inputs
var numberOfColumnsInCsv = document.getElementById('numberOfColumnsInCsv').value;
var numberOfRecordsInCsv = document.getElementById('numberOfRecordsInCsv').value;
var columnSeperatorInCsv = document.getElementById('columnSeperatorInCsv').value;
// Construct the dataset for CSV
var data = [];
for (var i = 0; i < numberOfRecordsInCsv; i++) {
var rowData = {};
for (var j = 0; j < numberOfColumnsInCsv; j++) {
rowData['header_' + j] = createRandomString();
}
data.push(rowData);
}
// Construct the headers for the CSV
var headers = [];
for (var k = 0; k < numberOfColumnsInCsv; k++) {
headers.push({
alias: 'header ' + k,
name: 'header_' + k
});
}
// Construct the headers for the CSV
objectExporter({
type: 'csv',
exportable: data,
headers: headers,
columnSeparator: columnSeperatorInCsv
})
}
function object2pdf() {
// Retrieve the user inputs
var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInPdf').value;
var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInPdf').value;
// Construct the dataset for Pdf
var data = [];
for (var i = 0; i <= numberOfRecordsInPdf; i++) {
var rowData = {};
for (var j = 0; j < numberOfColumnsInPdf; j++) {
rowData['header_' + j] = createRandomString();
}
data.push(rowData);
}
// Construct the headers for the Pdf
var headers = [];
for (var k = 0; k < numberOfColumnsInPdf; k++) {
headers.push({
alias: 'header ' + k,
name: 'header_' + k,
flex: 1
});
}
// Generate the Pdf
objectExporter({
type: 'pdf',
exportable: data,
headers: headers,
fileName: 'sample_excel',
headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
cellStyle: 'border: 1px solid lightgray; margin-bottom: -1px;'
})
}
function object2doc() {
// Retrieve the user inputs
var numberOfColumnsInPdf = document.getElementById('numberOfColumnsInDoc').value;
var numberOfRecordsInPdf = document.getElementById('numberOfRecordsInDoc').value;
// Construct the dataset for Doc
var data = [];
for (var i = 0; i <= numberOfRecordsInPdf; i++) {
var rowData = {};
for (var j = 0; j < numberOfColumnsInPdf; j++) {
rowData['header_' + j] = createRandomString();
}
data.push(rowData);
}
// Construct the headers for the Doc
var headers = [];
for (var k = 0; k < numberOfColumnsInPdf; k++) {
headers.push({
alias: 'header ' + k,
name: 'header_' + k,
flex: 1
});
}
// Generate the Pdf
objectExporter({
type: 'doc',
exportable: data,
headers: headers,
fileName: 'sample_doc',
headerStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
cellStyle: 'padding: 5px; border: 1px solid #dddddd;'
})
}
function createRandomString() {
var text = '';
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
// Add the eventListeners for the buttons
window.onload = function () {
document.getElementById('object2xlsBtnId').onclick = function click() {
object2xls();
}
document.getElementById('object2csvBtnId').onclick = function click() {
object2csv();
}
document.getElementById('object2pdfBtnId').onclick = function click() {
object2pdf();
}
document.getElementById('object2docBtnId').onclick = function click() {
object2doc();
}
document.getElementById('html2pdfBtnId').onclick = function click() {
// Generate the Pdf from the html section
objectExporter({
type: 'html',
exportable: document.getElementById('domId').value
})
}
}
</script>
<div class='container'>
<div class="jumbotron">
<h2>Object-Exporter Example Page</h2>
<p>Below 5 examples illustrate how this plugin exports the randomly generated object to XLS, CSV, PDF, DOC and
only from the frontend and without any communication to the backend!
</p>
</div>
<div class='row' id="html2pdfId">
<div class='col'>
<h3>JsObj to XLS</h3>
<p>Please adjust the below inputs to generate a sample object and export it to XLS format:</p>
<div class='container'>
<div class='form-group'>
<label>Number of columns in xls sheet</label>
<input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInXls'>
</div>
<div class='form-group'>
<label>Number of records in xls sheet</label>
<input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInXls'>
</div>
<div class='form-group'>
<label>Worksheet Name</label>
<input type='text' class='form-control form-control-lg' value='Sample Worksheet' id='sheetNameInXls'>
</div>
<div class='form-group'>
<label>Contents style</label>
<input type='text' class='form-control form-control-lg' value='color:#8866ff;' id='contentsStyleInXls'>
</div>
<div class='form-group'>
<label>Content Title</label>
<input type='text' class='form-control form-control-lg' value='Sample dataset' id='documentTitleInXls'>
</div>
<div class='form-group'>
<label>Content Style</label>
<input type='text' class='form-control form-control-lg' value='color:#000; font-size: 14;'
id='documentTitleStyleInXls'>
</div>
<input type='button' class='btn btn-info' value='Generate XLS' id='object2xlsBtnId'>
</div>
</div>
<div class='col'>
<h3>JsObj to CSV</h3>
<p>Please adjust the below inputs to generate a sample object and export it to CSV format:</p>
<div class='container'>
<div class='form-group'>
<label>Number of columns in CSV file</label>
<input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInCsv'>
</div>
<div class='form-group'>
<label>Number of records in CSV</label>
<input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInCsv'>
</div>
<div class='form-group'>
<label>Column Seperator in CSV</label>
<input type='text' class='form-control form-control-lg' value=',' id='columnSeperatorInCsv'>
</div>
<input type='button' class='btn btn-info' value='Generate CSV' id='object2csvBtnId'>
</div>
</div>
<div class='col'>
<h3>JsObj to PDF</h3>
<p>Please adjust the below inputs to generate a sample PDF file:</p>
<div class='container'>
<div class='form-group'>
<label>Number of columns in PDF file</label>
<input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInPdf'>
</div>
<div class='form-group'>
<label>Number of records in PDF</label>
<input type='text' class='form-control form-control-lg' value=300 id='numberOfRecordsInPdf'>
</div>
<input type='button' class='btn btn-info' value='Generate PDF' id='object2pdfBtnId'>
</div>
</div>
<div class='col'>
<h3>JsObj to DOC</h3>
<p>Please adjust the below inputs to generate a sample DOC file:</p>
<div class='container'>
<div class='form-group'>
<label>Number of columns in DOC file</label>
<input type='text' class='form-control form-control-lg' value=5 id='numberOfColumnsInDoc'>
</div>
<div class='form-group'>
<label>Number of records in DOC</label>
<input type='text' class='form-control form-control-lg' value=10 id='numberOfRecordsInDoc'>
</div>
<input type='button' class='btn btn-info' value='Generate DOC' id='object2docBtnId'>
</div>
</div>
<div class='col' id="test">
<h3>HTML to PDF</h3>
<p>Please adjust the below input to generate a sample PDF file:</p>
<div class='container'>
<div class='form-group'>
<label>DOM Id:</label>
<input type='text' class='form-control form-control-lg' value='html2pdfId' id='domId'>
</div>
<input type='button' class='btn btn-info' value='Generate PDF' id='html2pdfBtnId'>
</div>
</div>
</div>
</div>
</head>
</html>