I want to download the grid data in csv format , by looking at the link http://jsfiddle.net/hybrid13i/JXrwM/ and using JSONToCSVConvertor($("#reportGrid").jqGrid("getGridParam", "data"),"Report",true);
you can download a csv file but its column name are variable names not label any idea how can i fix this , or there is another solution
You can use $("#reportGrid").jqGrid("getGridParam", "colNames") to get column headers.
By the way you can use jQuery.extend to make copy of the data, returned from $("#reportGrid").jqGrid("getGridParam", "data"), and then modify the data before calling of JSONToCSVConvertor.
UPDATED: The object which you get by $("#reportGrid").jqGrid("getGridParam", "data") is the reference to internal data parameters. So it contains all what it should contains. To have less properties in the items of the data you should first make a copy of the object and the modify it like you want. For example to delete Id property from all items of the data you can do the following:
var myData = $.extend(true, [],
$("#reportGrid").jqGrid("getGridParam", "data"));
$.each(myData, function () { delete this.Id; });
UPDATED: One can use SheetJS, for example, to export data to Excel. See the demo https://jsfiddle.net/OlegKi/ovq05x0c/6/, created for the issue. The corresponding code of the Export to Excel button used in the demo is the following
.jqGrid("navButtonAdd", {
caption: "",
title: "Export to Excel(.XLSX)",
onClickButton: function () {
var data = $(this).jqGrid("getGridParam", "lastSelectedData"), i, item,
dataAsArray = [
["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via"]
];
for (i = 0; i < data.length; i++) {
item = data[i];
dataAsArray.push([
item.name, new Date(item.invdate),
item.amount, item.tax, item.total,
item.closed, item.ship_via
]);
}
var ws_name = "SheetJS", filename = "jqGrid.xlsx";
var wb = XLSX.utils.book_new(),
ws = XLSX.utils.aoa_to_sheet(dataAsArray);
XLSX.utils.book_append_sheet(wb, ws, ws_name);
XLSX.writeFile(wb, filename);
}
});
Thanks to Oleg and the man who posted http://jsfiddle.net/hybrid13i/JXrwM/ with little enhancement in it this is my final solution
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel,headers,excludeColumns,
fileName) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//Set Report title in first row or line
CSV += ReportTitle + '\r\n\n';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
if(headers)
{
row = headers.join(',');
}
else
{
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + '\r\n';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var colName in arrData[i]) {
if(excludeColumns && excludeColumns.indexOf(colName))
continue;
row += '"' + arrData[i][colName] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
if(!fileName)
{
//Generate a file name
fileName = "MyReport_";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g,"_");
}
if (navigator.appName == "Microsoft Internet Explorer") {
var oWin = window.open();
oWin.document.write('sep=,\r\n' + CSV);
oWin.document.close();
oWin.document.execCommand('SaveAs', true, fileName + ".csv");
oWin.close();
}
else
{
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
Usage:
JSONToCSVConvertor($(grid).jqGrid("getGridParam", "data"), $("#reportHeader").text().trim(),true,$(grid).jqGrid("getGridParam", "colNames"),["_id_"],"Report");
NOTE Please note that this solution will not work in IE
Related
I have tried to amend the below script to essentially convert a entire google sheet to xlsx file, keeping tab names the same and locating them to a folder,
The issue I am experiencing with the below is that is is splitting out each tab into separate files but I would like to keep them all together in one file
https://webapps.stackexchange.com/questions/58615/export-all-sheets-in-a-spreadsheet-to-csv-in-google-apps
function saveAsxlsx() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheets = ss.getSheets();
// create a folder from the name of the spreadsheet
var folder = DriveApp.getFolderById('xxxxxxx');
for (var i = 0 ; i < sheets.length ; i++) {
var sheet = sheets[i];
// append ".xlsx" extension to the sheet name
fileName = sheet.getName() + ".xlsx";
// convert all available sheet data to xlsx format
var xlsxFile = convertRangeToxlsxFile_(fileName, sheet);
// create a file in the Docs List with the given name and the xlsx data
folder.createFile(fileName, xlsxFile);
}
Browser.msgBox('Files are waitig in a folder named ' + folder.getName());
}
function convertRangeToxlsxFile_(xlsxFileName, sheet) {
// get available data range in the spreadsheet
var activeRange = sheet.getDataRange();
try {
var data = activeRange.getValues();
var xlsxFile = undefined;
// loop through the data in the range and build a string with the xlsx data
if (data.length > 1) {
var xlsx = "";
for (var row = 0; row < data.length; row++) {
for (var col = 0; col < data[row].length; col++) {
if (data[row][col].toString().indexOf(",") != -1) {
data[row][col] = "\"" + data[row][col] + "\"";
}
}
// join each row's columns
// add a carriage return to end of each row, except for the last one
if (row < data.length-1) {
xlsx += data[row].join(",") + "\r\n";
}
else {
xlsx += data[row];
}
}
xlsxFile = xlsx;
}
return xlsxFile;
}
catch(err) {
Logger.log(err);
Browser.msgBox(err);
}
}
The script you're using was designed to get each sheet as a separate file. You can refer to this example instead that will convert Google Sheet to Excel XLSX Spreadsheet. I added a couple of lines to the code to save the file to a folder instead of sending an email as the example does.
function getGoogleSpreadsheetAsExcel() {
try {
var ss = SpreadsheetApp.getActive();
var url = 'https://docs.google.com/feeds/download/spreadsheets/Export?key=' + ss.getId() + '&exportFormat=xlsx';
var folder = DriveApp.getFolderById('folderID'); //Add the folder ID of the folder where you want to save the file
var params = {
method: 'get',
headers: { Authorization: 'Bearer ' + ScriptApp.getOAuthToken() },
muteHttpExceptions: true,
};
var blob = UrlFetchApp.fetch(url, params).getBlob();
blob.setName(ss.getName() + '.xlsx');
folder.createFile(blob)
} catch (f) {
Logger.log(f.toString());
}
}
Please help me, I have the below code, I need to extract the start time from row 1 Col 2, and the end time Last row Col2.
Thanks
async function getData() {
let fileName = document.getElementById("myFile").files[0].name;
alert('The file "' + fileName + '" has been selected.');
const response = await fetch("./csv/" + fileName); //fetch csv files from ./csv/folder
const data = await response.text(); // waiting for the filename to be fetched.
const table = data.split("\n").slice(1); // take out the headers
table.forEach((row) => {
const columns = row.split(","); //parse the comma separator
const test_date = columns[1]; //select date column
const test_time = columns[2]; //select time column
const date_time = test_date + test_time; //concatinate date and time column
xlabels.push(date_time); //join and display date and time in one column
const pressure = columns[3]; //select pressure column
yPressure.push(pressure); // display pressure column
const temp = columns[4]; //select temp column
yTemp.push(temp); // display temp column
console.log(test_date, test_time, pressure, temp);
});
}
There are packages available for parsing csv files... Are you doing this server or client side? If you are using nodejs on the backend I've used convert-excel-to-json in the past.. I havent done it on the frontend before but a quick google search found me this guy
converting the excel file to json means its a simple matter of finding your data in the object tree :D
I used this code to print the items in a csv as inputs in HTML. Does this help you get your values? You can use the second js function function createForm(csv) to print the value you want.
document.getElementById("upload").addEventListener("change", upload, false);
var out = "";
function upload(e) {
document.getElementById('csvForm').innerHTML = "";
var data = null;
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event) {
var csvData = event.target.result;
var parsedCSV = d3.csv.parseRows(csvData);
parsedCSV.forEach(function(d, i) {
if (i == 0) return true; // skip the header
if (d.constructor === Array) {
createForm(d);
}
});
}
}
function createForm(csv) {
out += '<input value="' + csv[0] + '">'; // first item in the csv
out += '<input value="' + csv[2] + '">'; // third item in the csv
document.getElementById('csvForm').innerHTML = out;
out += '<br>';
}
<script src="https://d3js.org/d3.v3.js"></script>
<input id="upload" type="file">
<form id="csvForm"></form>
after applying filter in table there are 4 enteries present.How can we store this data and convert it into csv.Currently i am able to dowload full table data using python code.But now i want to fetch and dowload the csv of data which is present on the screen.
========================================================================
function getTableDataFn() {
//we can use any of the get methods based on what we want
let reqTable = document.getElementById("tableId");
//Get rows
let rows = reqTable.rows.length;
//Get columns
let columns = 0;
if (rows > 0)
columns = reqTable.rows[0].cells.length;
let dataInArray = [];
let strVersionOfData = ``;
//Loop through row and column to get data in the object
for (let r = 0; r < rows; r++) {
dataInArray[r] = [];
for (let c = 0; c < columns; c++) {
let tempData = reqTable.rows[r].cells[c].innerHTML;
dataInArray[r][c] = tempData;
strVersionOfData += tempData;
if (c != columns - 1)
strVersionOfData += ",";
}
strVersionOfData += "\n";
}
//Now the dataInArray has all the data and
//strVersionofData has the string
downloadCSVStringFn(strVersionOfData,'mycsv');
}
The above mentioned code might help you to get the data in array and string format. Now if you want to get your csv content downloaded in a file with name you can go by below mentioned function
function downloadCSVStringFn(fileName = "", csvString = "") {
//Encode CSV data
var encodedUri = encodeURI(csvString);
//Create link
var link = document.createElement("a");
//set attributes
link.setAttribute("href", encodedUri);
link.setAttribute("download", fileName + ".csv");
//Append in document
document.body.appendChild(link); // Required for FF
//Click .. this will download
link.click();
//you can further delete the link too .. or have this is a component in case
//you have download as a reusable utility
}
extends layout
block content
p#demo
h1 #[Repository Name :] #{repo.name}
dd #[ IBM Github URL:]
a(href='/'+repo.url) #{repo.url}
dd #[ Repository ID:] #{repo._id}
dd #[ Language Type:] #{repo.type}
div(class='col')
div(class='col-sm-9')
p
button.hidediv Hide dependencies
button.showdiv Show dependencies
.divdemo
| Dependencies
.button
.container
#dvData
.col-sm-3(style='background-color:#5596e9;')
div(class='col-sm-2')
table
tbody
tr: th Name
tbody
each D in list_dependencies
tr
td
td #{D.name}
.col-sm-3(style='background-color:#f5f7fa;')
div(class='col-sm-2')
table
thead
tr: th Version
tbody
each D in list_dependencies
tr
td
td #{D.version}
.col-sm-3(style='background-color:#ADD8E6;')
div(class='col-sm-2')
table
thead
tr: th repository ID
tbody
each D in list_dependencies
tr
td
td #{D.repo_id}
.button.col-sm-6
a#export(href='#', role='button')
| Click On This Here Link To Export The Table Data into a CSV File
script(type='text/javascript', src='https://code.jquery.com/jquery-1.11.0.min.js')
//script(src='https://cdn.jsdelivr.net/npm/json2csv')
//script(src='/node_modules/table2csv/dist/table2csv.min.js')
//script(src='/javascript/client.js')
$(function() {
$('#register').on('click', function(event) {
event.preventDefault();
var fullname = $('#fullname').val();
var email = $('#email').val();
var password = $('#password').val();
var cpassword = $('#cpassword').val();
if (!fullname || !email || !password || !cpassword) {
$('#msgDiv').show().html('All fields are required.');
} else if (cpassword != password) {
$('#msgDiv').show().html('Passowrds should match.');
} else {
$.ajax({
url : '/register',
method : 'POST',
data : { full_name: fullname, email: email, password: password, cpassword: cpassword }
}).done(function(data) {
if (data) {
if (data.status == 'error') {
var errors = '<ul>';
$.each(data.message, function(key, value) {
errors = errors + '<li>' + value.msg + '</li>';
});
errors = errors + '</ul>';
$('#msgDiv').html(errors).show();
} else {
$('#msgDiv').removeClass('alert-danger').addClass('alert-success').html(data.message).show();
}
}
});
}
});
});
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
$(document).ready(function() {
$('.hidediv').click(function() {
$('.divdemo').hide('slow');
});
$('.showdiv').click(function() {
$('.divdemo').show(2000);
});
});
$(document).ready(function() {
console.log('HELLO');
function exportTableToCSV($table, filename) {
var $headers = $table.find('tr:has(th)'),
$rows = $table.find('tr:has(td)'),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"';
// Grab text from table into CSV formatted string
var csv = '"';
csv += formatRows($headers.map(grabRow));
csv += rowDelim;
csv += formatRows($rows.map(grabRow)) + '"';
// Data URI
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
// For IE (tested 10+)
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([ decodeURIComponent(encodeURI(csv)) ], {
type : 'text/csv;charset=utf-8;'
});
navigator.msSaveBlob(blob, filename);
} else {
$(this).attr({
download : filename,
href : csvData
//,'target' : '_blank' //if you want it to open in a new window
});
}
//------------------------------------------------------------
// Helper Functions
//------------------------------------------------------------
// Format the output so it has the appropriate delimiters
function formatRows(rows) {
return rows.get().join(tmpRowDelim).split(tmpRowDelim).join(rowDelim).split(tmpColDelim).join(colDelim);
}
// Grab and format a row from the table
function grabRow(i, row) {
var $row = $(row);
//for some reason $cols = $row.find('td') || $row.find('th') won't work...
var $cols = $row.find('td');
if (!$cols.length) $cols = $row.find('th');
return $cols.map(grabCol).get().join(tmpColDelim);
}
// Grab and format a column from the table
function grabCol(j, col) {
var $col = $(col),
$text = $col.text();
return $text.replace('"', '""'); // escape double quotes
}
}
// This must be a hyperlink
$('#export').click(function(event) {
// var outputFile = 'export'
var outputFile =
window.prompt("What do you want to name your output file (Note: This won't have any effect on Safari)") ||
'export';
outputFile = outputFile.replace('.csv', '') + '.csv';
// CSV
exportTableToCSV.apply(this, [ $('#dvData > table'), outputFile ]);
// IF CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
});
var filter = document.getElementById('filter');
// Filter event
filter.addEventListener('keyup', filterItems);
// Filter Items
function filterItems(e) {
// convert text to lowercase
var text = e.target.value.toLowerCase();
// Get lis
var items = itemList.getElementsByTagName('dl');
//var items = itemList.querySelectorAll('dd');
// Convert to an array
Array.from(items).forEach(function(item) {
var itemName = item.firstChild.textContent;
if (itemName.toLowerCase().indexOf(text) != -1) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
}
Hi i am trying to download to CSV from my pug file. I would like to be to download to csv with three headers name, version and repository as the columns. Then for each column i would like to have a list of rows containing (in Name d.name, in version d.version, in repoistory d.repo_id. I am using this code but when i try to download it the csv is blank. I am new to pug and was wondering if there is a way to this and if anybody can help me out as i have been spending quite a number of hours on this. Thanks in advance.
I am trying to create a csv file from a Google spreadsheet every day or so. for some reason, I can delete files using the .setTrashed(True) and the file will delete, but i get an error saying 'You do not have authorization to perform that action. '
here is my code. any help would be appreciated.
function saveAsCSV() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheets = ss.getSheets();
// create a folder from the name of the spreadsheet
var folder = DocsList.getFolder(ss.getName().toLowerCase().replace(/ /g,'_'));
for (var i = 0 ; i < sheets.length ; i++) {
var sheet = sheets[i];
// append ".csv" extension to the sheet name
fileName = sheet.getName() + ".csv";
// convert all available sheet data to csv format
var csvFile = convertRangeToCsvFile_(fileName, sheet);
// update a file in the Docs List with the given name and the csv data
var folder = DocsList.getFolder('fitbitdata_mk3');
folder.createFile(fileName, csvFile);
deleteDocByName('Sheet1.csv');
Logger.log('deleted');
// folder.createFile(fileName, csvFile); //i put it before the delete
}
Browser.msgBox('UPDATED Files are waiting in a folder named ' + folder.getName());
}
function deleteDocByName(fileName){
var docs=DocsList.find(fileName)
for(n=0;n<docs.length;++n){
if(docs[n].getName() == fileName){
var ID = docs[n].getId()
DocsList.getFileById(ID).setTrashed(true)
}
}
}
function convertRangeToCsvFile_(csvFileName, sheet) {
// get available data range in the spreadsheet
var activeRange = sheet.getDataRange();
try {
var data = activeRange.getValues();
var csvFile = undefined;
// loop through the data in the range and build a string with the csv data
if (data.length > 1) {
var csv = "";
for (var row = 0; row < data.length; row++) {
for (var col = 0; col < data[row].length; col++) {
if (data[row][col].toString().indexOf(",") != -1) {
data[row][col] = "\"" + data[row][col] + "\"";
}
}
// join each row's columns
// add a carriage return to end of each row, except for the last one
if (row < data.length-1) {
csv += data[row].join(",") + "\r\n";
}
else {
csv += data[row];
}
}
csvFile = csv;
}
return csvFile;
}
catch(err) {
Logger.log(err);
Browser.msgBox(err);
}
}
I had the same problem. Please star the issue on the issue tracker here.
https://code.google.com/p/google-apps-script-issues/issues/detail?id=4145&colspec=Stars%20Opened%20ID%20Type%20Status%20Summary%20Component%20Owner