I am trying to export data to excel in Javascript. Below is the code that I used:
var createAndExport = function(data){
var table = "<table><thead><tr><td>";
var head = Object.keys(data[0]);
for(var i=0;i<head.length;i++){
table += head[i]+"</td><td>";
}
table += "</td></tr></thead><tbody>";
for(var i=0;i<data.length;i++){
table += "<tr>";
for(var j=0;j<head.length;j++){
table += "<td>"+data[i][head[j]]+"</td>";
}
table += "</tr>";
}
table += "</tbody></table>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,'+ table;
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "data.xls";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
This code working fine and downloading the data as excel. But the issue is data containing arabic words, that is appearing as some other characters in dowloaded excel as in the image.
How can I fix this issue of arabic words?
The encoding informations needs to be in the HTMLtemplate too:
var createAndExport = function(data){
var table = "<head><meta charset='UTF-8'></head><table><thead><tr><td>";
...
See fiddle: https://jsfiddle.net/3fohpL9u/2/
Related
I am currently designing a web application that would read an XLSX file and convert it into an HTML table. The XLSX file contains columns that is concatenated into the "Info" column
I have three columns, "FileName", "Info", "Download", that becomes populated with a for loop. In this for loop, I would like to add a link in each cell under the "Download" column, that references a zip file in my local directory.
I have already tried createElement('a') within my loop
for (var i = 0; i < excelRows.length; i++) {
//Add the data row.
var row = table.insertRow(-1);
//Add the data cells.
var cell = row.insertCell(-1);
if(headerCell.getElementById = 'FileName'){
cell.innerHTML = excelRows[i].FileName;
//cell.setAttribute("id", "FileName");
}
cell = row.insertCell(-1);
cell.innerHTML = excelRows[i].Title + " ; " + excelRows[i].Summary + " ; " + excelRows[i].Author;
if(headerCell.getElementById = 'Download'){
cell = row.insertCell(-1);
cell.innerHTML = document.createElement('a');
//cell.innerHTML = excelRows[i].FileName + ".zip";
}
var a = document.createElement('a');
a.href = excelRows[i].FileName + ".zip";
a.innerText = 'Some Link';
cell.appendChild(a);
or
cell.innerHTML += 'Some Link';
I am trying to get images from a Firebase Storage into a table, and the links to each image are given as a Child in a Firebase Database. By following many of the SE recommendations, I finally got a code that can convert images from from gs:// to http://. By using alert(url), I can see the image link that can potentially be inserted in a <img>, but I can't manage to make it show as an image object. What am I doing wrong in the code? Can anyone help me to elucidate this?
In the code below, imageUrl contains the gs:// code
< script >
var events = firebase.database();
var storage = firebase.storage();
events.ref("-Events").orderByKey().limitToLast(10).once('value', function(snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function(data) {
var val = data.val();
var link = val.imageUrl;
var storageRef = storage.refFromURL(link).getDownloadURL().then(function(url) {
var test = url;
alert(url);
document.querySelector('img').src = test;
alert(test);
}).catch(function(error) {});
content += '<tr>';
content += '<td>' + val.imageUrl + '</td>';
content += '<td>' + '<img src="storageRef.url" alt='
' border=3 height=100 width=100>' + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
var tbody = $('table tbody');
tbody.html($('tr', tbody).get().reverse());
}
});
<
/script>
I am new to html coding.
I want to read and display my csv file data to a webpage. Data in each row of csv file must be displayed in a separate line on webpage.
My current code doesn't display anything and I don't have any clue why is it not working properly.
Please help me in this regard.
My code is below:
<!DOCTYPE html>
<html>
<script type="text/javascript">
var allText =[];
var allTextLines = [];
var Lines = [];
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "D:\PycharmProjects\filename.csv", true);
txtFile.onreadystatechange = function()
{
allText = txtFile.responseText;
allTextLines = allText.split(/\r\n|\n/);
};
document.write(allTextLines);<br>
document.write(allText);<br>
document.write(txtFile);<br>
</script>
You can use following javascript for read and display data from csv file
<script type="text/javascript">
$.get('/file-path/demo.csv', function(data) {
var build = '<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="100%">\n';
var head = data.split("\n");
for(var i=0;i<1;i++){
build += "<tr><th>" + head[i] + "</th></tr>";
for(var i=1;i<head.length;i++){
build += "<tr><td>" + head[i].split("\n") + "</td></tr>";
}
}
build += "</table>";
$('#wrap').append(build);
});
</script>
You can iterate over the allTextLines array as soon as your document is loaded
var txtFile = new XMLHttpRequest();
txtFile.onload = function() {
allText = txtFile.responseText;
allTextLines = allText.split(/\r\n|\n/);
for(var i = 0; i < allTextLines.length; i++) {
document.body.innerHTML += allTextLines[i];
document.body.innerHTML += '<br/>';
}
}
txtFile.open("get", "filename.csv", true);
txtFile.send();
where filename.csv should be put in your server static resources
I am unable Show Parsed Response from Xml Service in JQuery Mobile List View. I unable to get were the Problem is,what i have Tried is.
First i took all the Response to theXML var then iam Trying to append to ListView Which i have Dynamically Created in javaScript Code. Here is my Code,
function processXML(theXML) {
var nodeTree = theXML.documentElement.getElementsByTagName('Employee');
var output = "";
output += "<ul data-role='listview' class='ui-listview'>";
var length = nodeTree.length;
for (var i = 0; i < length; i++) {
var empName = nodeTree[i].getElementsByTagName('name')[0].firstChild.nodeValue;
var empFName = nodeTree[i].getElementsByTagName('Fathername')[0].firstChild.nodeValue;
var empAddr = nodeTree[i].getElementsByTagName('Address')[0].firstChild.nodeValue;
output += buildRow(empName, empFName, empAddr);
}
output += "</ul>";
document.getElementById('result').innerHTML = output;
}
function buildRow(empName, empFName, empAddr) {
var row = "<li><a href='#'>";
row += empName;
row += empFName;
row += empAddr;
row += "</a></li>";
return row;
}
$("result").html(output).trigger("create");
$(".ui-listview").listview('refresh');
I have a HTML file.
It has Pre-formatted text with CSV data in it.
<pre>1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6
</pre>
How to extract this data and convert it into a HTML table using Javascript?
If you know that the data is going to be in the exact format you gave, then something simple like this will work:
Markup:
<pre id="data">1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6</pre>
<div id="table"></div>
JavaScript:
var table = '';
var rows = new Array();
rows = document.getElementById('data').innerHTML.split('\n');
table += '<table>'
for(var i = 0; i < rows.length; i++) {
var columns = rows[i].split(',');
table += '<tr>';
for(var j = 0; j < columns.length; j++) {
table += '<td>' + columns[j] + '</td>';
}
table += '</tr>';
}
table += '</table>';
document.getElementById('table').innerHTML = table;
Demo
Use the function described in this answer. It returns an array if you give it CSV data. So given the data:
<pre id="CSV_DATA">1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6
</pre>
You can get the CSV into a Javascript string:
var csv_data = document.getElementById("CSV_DATA").innerHTML;
Then use the function CSVToArray to get an array of the data:
var array_data = CSVToArray(csv_data, ",");
Then make an HTML table:
var table=document.createElement('table');
table.border='1';
document.body.appendChild(table);
for(var i=0; i<array_data.length; i++){
var line = array_data[i];
var tr=document.createElement('tr');
for(var j=0; j<line.length; j++){
var td=document.createElement('td');
td.innerHTML = line[j];
tr.appendChild(td);
table.appendChild(tr);
}
}
I haven't tested this code. Please review it and work out the details. But what it's supposed to do is iterate through the array returned by CSVToArray and add each element of that array to a table row, then add each generated row to a table. The table is added to the document's body, but you can add it wherever you please.
And here's a demo of mine as well.