I have this function that makes a table download in csv format, my problem is that I want to implement this same function but with the "onclick" attribute, selecting the specific table that I want to download, if someone could help me how to do it I would be very grateful.
<button id="export"class="btn btn-success" title="Download CSV">Download table</button>
<script type="text/javascript">
const toCsv = function (table) {
// Query all rows
const rows = table.querySelectorAll('tr');
return [].slice
.call(rows)
.map(function (row) {
// Query all cells
const cells = row.querySelectorAll('th,td');
return [].slice
.call(cells)
.map(function (cell) {
return cell.textContent;
})
.join(',');
})
.join('\n');
};
const download = function (text, fileName) {
const link = document.createElement('a');
link.setAttribute('href', `data:text/csv;charset=utf-8,${encodeURIComponent(text)}`);
link.setAttribute('download', fileName);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const table = document.getElementById('exportMe');
const exportBtn = document.getElementById('export');
exportBtn.addEventListener('click', function () {
// Export to csv
const csv = toCsv(table);
// Download it
download(csv, 'download.csv');
});
</script>
Related
I am trying to make an audio file converter that lets a user submit a file. Then uses JavaScripts Web Audio API to convert the pitch and stretch the file. I have gotten as far as uploading the file, use file reader to onload a function that stretches and converts the pitch. Now I am trying to export that file with the changes and I can right now only download the original file but not with the changes. I dont know how to assign file = buffer because it's from another class. How should I got by making this happen?
convertFile () {
var fileInput = document.getElementById('audio-file')
var ctx = new AudioContext()
var convertFiles = document.getElementById('convert_button')
//load audio file listener
convertFiles.addEventListener("click", function() {
if (fileInput.files[0] == undefined) {
console.log("no file found")
return false
}
var reader1 = new FileReader()
reader1.onload = function(ev) {
ctx.decodeAudioData(ev.target.result). then(function(buffer){
var soundSource = ctx.createBufferSource()
soundSource.buffer = buffer
// create the stretch
soundSource.playbackRate.linearRampToValueAtTime(0.0185, ctx.currentTime)
//connect source
soundSource.connect(ctx.destination)
// convert pitch
var pitchChange = ctx.createBiquadFilter()
pitchChange.type = 'highpass'
pitchChange.frequency.value = 432
pitchChange.connect(ctx.destination)
})
}
reader1.readAsArrayBuffer(fileInput.files[0])
})
let file = fileInput.files[0]
let url = URL.createObjectURL(file)
let link = document.createElement('a')
link.href = url
link.download = file.name
link.click()
link = null
URL.revokeObjectURL(url)
}
render() {
return (
<div className="sec2">
<input type="file" id="audio-file" accept="audio/mpeg, audio/ogg, audio/*" name="file" onChange={this.uploadFile} />
<button type="button" id="convert_button" onClick={this.convertFile}>Convert to 432Hz</button>
<download onClick={this.downloadFile}>Download File</download>
</div>
)
}
}
export default ConverterSec2
I started looking into this... I fixed a couple issues such as the audio file being loaded twice. However this is work in progress answer... I haven't figure out the saving part yet.
class ConverterSec2 extends React.Component {
uploadFile = ({ target: { files } }) => {
console.log(files[0])
let data = new FormData()
data.append('file', files[0])
}
convertFile () {
var fileInput = document.getElementById('audio-file')
var ctx = new AudioContext()
var convertFiles = document.getElementById('convert_button')
//load audio file listener
if (fileInput.files[0] == undefined) {
console.log("no file found")
return false
}
var soundSource = ctx.createBufferSource();
var reader1 = new FileReader()
reader1.onload = function(ev) {
ctx.decodeAudioData(ev.target.result).then(function(buffer){
soundSource.buffer = buffer
// create the stretch
soundSource.playbackRate.linearRampToValueAtTime(0.0185, ctx.currentTime)
//connect source
soundSource.connect(ctx.destination)
// convert pitch
var pitchChange = ctx.createBiquadFilter()
pitchChange.type = 'highpass'
pitchChange.frequency.value = 432
pitchChange.connect(ctx.destination)
})
}
reader1.readAsArrayBuffer(fileInput.files[0]);
}
downloadFile() {
let fileInput = document.getElementById('audio-file')
let file = fileInput.files[0]
let url = URL.createObjectURL(file)
let link = document.createElement('a')
link.href = url
link.download = file.name
link.click()
link = null
URL.revokeObjectURL(url)
}
render() {
return (
<div className="sec2">
<input type="file" id="audio-file" accept="audio/mpeg, audio/ogg, audio/*" name="file" onChange={this.uploadFile} />
<button type="button" id="convert_button" onClick={this.convertFile}>Convert to 432Hz</button>
<button onClick={this.downloadFile}>Download File</button>
</div>
)
}
}
Live Demo
I would like to know if there is a way to export data from a CSV file to a javascript object and when someone edits the CSV file it automatically changes in the javascript file. Thank you so much.
The following steps are implemented in the below code snippet.Customize this as required.
Select input CSV file. (The code snippet is tested for UTF-8 encoded CSV file)
Read the CSV file data
Parse the CSV file data and contruct the JSON object
Manipulate or modify the JSON object if required.
Export the JSON object as CSV
var CsvRows;
var headers;
// This event will be triggered when file is selected
// Note: This code is tested for UTF-8 encoded CSV file
function handleChange(evt) {
var reader = new FileReader();
reader.onload = function() {
//reader.result gives the file content
document.getElementById('out').innerHTML = reader.result;
//parse the result into javascript object
var lines = reader.result.split('\r\n');
headers = lines[0].split(',');
lines.shift();
CsvRows = lines.map((item) => {
var values = item.split(',');
var row = {};
headers.map((h, i) => {
row[h] = values[i];
});
return row;
});
console.log(CsvRows);
document.getElementById('result').style.display = 'block'
};
//read the selected file
reader.readAsBinaryString(evt.files[0]);
};
//export the javscript object as csv
function exportCSV() {
//contruct the csv ad data url
let csvContent = "data:text/csv;charset=utf-8," +
headers.join(",") + "\r\n";
//contruct the data in csv format
var data = CsvRows.map(e => {
var line = '';
headers.map((h) => {
line += e[h] + ',';
});
return line.substr(0, line.length - 1);
}).join("\r\n")
csvContent += data;
//contruct an anchor tag
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
//provide the export file name
link.setAttribute("download", "mydata.csv");
document.body.appendChild(link); // Required for FF
//trigger download of CSV
link.click();
link.remove();
}
<input type="file" onchange="handleChange(this)" accept=".csv" />
<div id="result" style="display:none;">
<div id="out"></div>
<div>See console for Javascript Object.</div>
<div>Export the imported file <button onclick="exportCSV()">Export</button></div>
</div>
The above code snippet only works for CSV files. Custom implementation has to be made for Excel files.
I have successfully exported my data as csv which worked great until there is a # character which messed up the exporting. It stopped the exporting anything after #. When I open the file, I can see that it's giving a newline then stopped.
I already added quotations to the text fields because of the need to export symbols such as , which works fine.
Can someone give me suggestions of why meeting # would give such reaction and way to solve it?
removing # is the least option to think of, would really prefer to keep the # I tried replacing # as ascii \u0023 which gives me no luck
How I get the text
const getDiv = bodyCellLabelClass.querySelectorAll('div');
const innerTxt = getDiv[ 0 ].innerText;
result.push(`"${innerTxt}"`);
sample of result would look like if I console.log
[""$41.67"", ""9/9/2018"", ""10/9/2018"", ""9/9/2018"", ""#111"", ""3/11/2019""]
[""$41.67"", ""9/9/2018"", ""10/9/2018"", ""9/9/2018"", ""3"", ""3/11/2019""]
but when I open the csv it'll look like
$41.67, 9/9/2018, 10/9/2018, 9/9/2018, '↵' nothing after
this is how the export csv looks like
export class ExportUtil {
// export file, default excel
public static spreadsheet( rows, full_filename = 'test.xls' ): any {
let content = `data:application/vnd.ms-excel;charset=utf-8;`;
rows.forEach(function ( rowArray ) {
const row = rowArray.join(',');
content += row + '\r\n';
});
console.log(content, 'inside spreadsheet content');
const encodedUri = encodeURI(content);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', `${full_filename}`);
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
}
}
Thanks in advance for any help and suggestions.
try using Blob
export class ExportUtil {
// export file, default excel
public static spreadsheet( rows, full_filename = 'test.xls' ): any {
let content = '';
rows.forEach(function ( rowArray ) {
const row = rowArray.join(',');
content += row + '\r\n';
});
console.log(content, 'inside spreadsheet content');
const blob = new Blob([ content ], { type: 'application/vnd.ms-excel;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', `${full_filename}`);
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
}
}
I have a JavaScript function that enables me to download a CVS file. When I open this file in excel, everything is placed in the same column instead.
This is my code:
function convertToCSV(dataArray) {
var csvContent = "data:text/csv;charset=utf-8,";
dataArray.forEach(function(infoArray, index)
{
dataString = infoArray.join(",");
csvContent += index < dataArray.length ? dataString+ "\n" : dataString;
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "download.csv");
document.body.appendChild(link);
link.click();
}
This is what it looks like:
This is the output I'm expecting:
What am I doing wrong? Any help would be appreciated.
NB: I have been looking for a way to export straight to an .xlsx or .xls file, but I didn't win.
You can use mongo-xlsx module to export your data to xlsx file
var mongoXlsx = require('mongo-xlsx');
var data=dataArray;
var model=mongoXlsx.buildDynamicModel(data);
mongoXlsx.mongoData2Xlsx(data, model, function(err, data) {
console.log("data",data);
console.log('File saved as:', data.fullPath);
});
Hope this helps
You could do this with native js fairly easily like so:
let text = '';
dataArray.map(arr => text += arr.join(',') + '\r\n');
let link = document.createElement('a');
link.setAttribute('href', 'data:text/csv;charset=utf-8,' + escape(text));
link.setAttribute('download', 'download.csv');
document.body.appendChild(link);
link.click();
I got a small script to split the text inside 'var foo' after every 4 characters. It is working fine.
but my actual data is in a text file say 'a.txt'. How do I take this entire file text in 'var foo'. and write the split output to another text file?
var foo = "this is sample text !!!";
var arr = [];
for (var i = 0; i < foo.length; i++) {
if (i % 4 == 0 && i != 0)
arr.push(foo.substring(i - 4, i));
if (i == foo.length - 1)
arr.push(foo.substring(i - (i % 4), i+1));
}
document.write(arr);
console.log(arr);
To get the content of the file you need to select a file using an input tag.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="input" type="file" accept="text/plain">
<script src="script.js"></script>
</body>
A good moment to read the content of the file is in the change event.
const input = document.querySelector("#input");
input.addEventListener("change", () => {
const file = input.files.item(0);
});
To read the content of the file as a string you need to convert it.
function fileToText(file, callback) {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = () => {
callback(reader.result);
};
}
The content of the file as a string will be available to the the callback function. You can create a link and use the click event to download the string into a text file.
function save(content, fileName, mime) {
const blob = new Blob([content], {
tipe: mime
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
a.click();
}
Here is the complete code
const input = document.querySelector("#input");
input.addEventListener("change", () => {
const file = input.files.item(0);
fileToText(file, (text) => {
save(text, "fileName.txt", "text/plain");
});
});
function fileToText(file, callback) {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = () => {
callback(reader.result);
};
}
function save(content, fileName, mime) {
const blob = new Blob([content], {
tipe: mime
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
a.click();
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="input" type="file" accept="text/plain">
<script src="script.js"></script>
</body>
You can read more about manipulating files in JavaScript here: https://www.html5rocks.com/en/tutorials/file/dndfiles/
Solution to this helped me :
How do I load the contents of a text file into a javascript variable?
var client = new XMLHttpRequest();
client.open('GET', '/foo.txt');
client.onreadystatechange = function() {
alert(client.responseText);
}
client.send();