XLSX.in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>XLSX.in - Universal XLSX Converter/title>
<style>
:root {
--primary-color: #FF9933; /* Saffron */
--secondary-color: #138808; /* India Green */
--accent-color: #0F52BA; /* Royal Blue */
--background-color: #F8F8F8; /* Off White */
--text-color: #222222; /* Charcoal Black */
--cta-color: #800000; /* Deep Maroon */
}
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #f8f8f8, #ffffff);
color: var(--text-color);
margin: 0;
padding: 20px;
}
.container {
max-width: 640px;
margin: auto;
background: #fffaf2; /* Light saffron tint */
padding: 30px;
border-radius: 12px;
border: 2px solid var(--primary-color);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}
h1 {
color: var(--secondary-color);
text-align: center;
margin-bottom: 25px;
}
input, select, button {
margin: 10px 0;
width: 100%;
padding: 12px;
font-size: 16px;
border-radius: 6px;
border: 1px solid #ccc;
}
button {
background-color: var(--cta-color);
color: white;
font-weight: bold;
border: none;
cursor: pointer;
}
button:hover {
background-color: #5e0000;
}
#download-link {
display: block;
margin-top: 15px;
text-align: center;
color: var(--accent-color);
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h1>XLSX.in - Universal XLSX Converter</h1>
<input type="file" id="file-input" accept=".xlsx"/>
<select id="format-select">
<option value="csv">Convert to CSV</option>
<option value="json">Convert to JSON</option>
<option value="html">Convert to HTML</option>
<option value="pdf">Convert to PDF</option>
<option value="xml">Convert to XML</option>
</select>
<button onclick="convert()">Convert</button>
<a id="download-link" style="display:none;">Download</a>
<div id="output"></div>
</div>
<!-- SheetJS & jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
function convert() {
const fileInput = document.getElementById("file-input");
const format = document.getElementById("format-select").value;
const downloadLink = document.getElementById("download-link");
if (!fileInput.files.length) {
alert("Please upload an XLSX file.");
return;
}
const reader = new FileReader();
reader.onload = function (e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: "array" });
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
let output, mime, fileExt;
switch (format) {
case "csv":
output = XLSX.utils.sheet_to_csv(sheet);
mime = "text/csv";
fileExt = "csv";
break;
case "json":
output = JSON.stringify(XLSX.utils.sheet_to_json(sheet), null, 2);
mime = "application/json";
fileExt = "json";
break;
case "html":
output = XLSX.utils.sheet_to_html(sheet);
mime = "text/html";
fileExt = "html";
break;
case "pdf":
const html = XLSX.utils.sheet_to_html(sheet);
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.html(html, {
callback: function (doc) {
doc.save("converted.pdf");
},
x: 10,
y: 10
});
return;
case "xml":
const jsonData = XLSX.utils.sheet_to_json(sheet);
output = "<root>\\n";
jsonData.forEach((row) => {
output += " <row>\\n";
Object.entries(row).forEach(([key, value]) => {
output += ` <${key}>${value}</${key}>\\n`;
});
output += " </row>\\n";
});
output += "</root>";
mime = "application/xml";
fileExt = "xml";
break;
}
const blob = new Blob([output], { type: mime });
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "converted." + fileExt;
downloadLink.textContent = "Download " + fileExt.toUpperCase();
downloadLink.style.display = "inline-block";
};
reader.readAsArrayBuffer(fileInput.files[0]);
}
</script>
</body>
</html>
Comments
Post a Comment