Hello guys, welcome to MS Designes. I am Mandeep Singh, Today, I will discuss about how to create CSV File Previewer using HTML, CSS, JS in blogger & wordpress websites
I will provide simple and short script. It is very easy to install in any platform.
Note that, please give credit to Mandeep Singh where you install this script
This tool is developed & designed by Mandeep Singh
The HTML code is here below I merge CSS & JS in single HTML code. Just copy and paste it where you want to display your tool.
Double click on the code to copy it
Live Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSV to Text Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 24px;
font-weight: bold;
text-align: center;
margin: 20px 0;
}
input[type="file"] {
display: block;
margin: 20px auto;
}
button {
display: block;
margin: 0 auto;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
background-color: #0099ff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
pre {
font-size: 16px;
white-space: pre-wrap;
word-wrap: break-word;
background-color: #f5f5f5;
padding: 20px;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
max-width: 800px;
overflow-x: auto;
}
.overlay-credit{text-align:center;margin-top:20px;z-index:9;position:absolute;bottom:6px;right:15px;font-size:10px}
</style>
<script>
function convertCsvToText() {
// Get the CSV file input element and read its contents
const csvFile = document.getElementById('csv-file').files[0];
const reader = new FileReader();
reader.readAsText(csvFile);
reader.onload = function() {
const csvText = reader.result;
// Split the CSV text into rows and convert to plain text format
const rows = csvText.split('\n');
let plainText = '';
rows.forEach(function(row) {
const columns = row.split(',');
columns.forEach(function(column) {
plainText += column.trim() + '\t';
});
plainText += '\n';
});
// Set the converted text as the output
document.getElementById('text-output').textContent = plainText;
};
}
</script>
</head>
<body>
<h1>CSV to Text Converter</h1>
<input type="file" id="csv-file">
<button onclick="convertCsvToText()">Convert</button>
<pre id="text-output"></pre>
<span>Coded by - ♥ Mandeep Singh</span>
</body>
</html>
