Download Custom Table HTML to Excel Using Table2excel Plugin - excel

I am trying to download table HTML using table2excel plugin.
I can download all column in table with this code:
<table id="empTable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>01</td>
<td>Alpha</td>
<td>37</td>
<td>Bandung</td>
</tr>
<tr>
<td>02</td>
<td>Bravo</td>
<td>29</td>
<td>Bali</td>
</tr>
</table>
<script>
$(document).ready(function () {
$("#empTable").table2excel({
filename: "Employees.xls"
});
});
</script>
I am success to download table with all column (ID, Name, Age, Address). How to download as excel partial of column table? I only want to download column ID, Name, and Age without column Address. How should I do?

table2excel has an option to exclude cells that contain a specified class. In the example below, I add the noExport class to the cells I don't want to export. They are ignored when the file is created.
$(document).ready(function() {
$('#export').on('click', function(e){
$("#table").table2excel({
exclude: ".noExport",
name: "Data",
filename: "Workbook",
});
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<button id="export">Export</button>
<table id="table">
<thead>
<tr>
<td class="noExport">This cell won't be exported.</td>
<td>This cell will get exported.</td>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td class="noExport">Ipsum</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</tbody>
</table>
Admittedly, this could get tedious to do for an entire column. Fortunately, a GitHub user forked table2excel and made a modification that allows you to specify which columns you want to export.
See: https://github.com/davidkonrad/table2excel
Using his version of table2excel, it'd look something like this:
$(document).ready(function() {
$('#export').on('click', function(e){
$("#table").table2excel({
exclude: ".noExport",
name: "Data",
filename: "Workbook",
columns: [0, 1, 2] // export first three columns
});
});
});
Note that there does appear to be a bug with opening table2excel workbooks in some versions of Excel. You might get a warning saying the file extension doesn't match. But if you ignore this warning, it should load in Excel without further issue.

Related

not able to show array or object of data in tabluar form

I have fetched data from nodejs and want to show that object of data in react js (Table form).
Data fetched from backend
I want to display this data in table format.
<table className="table">
<thead>
<tr>
<th scope="col">Row Number</th>
<th scope="col">Order Number</th>
<th scope="col">Error Description</th>
</tr>
</thead>
<tbody>
{/* <tr >
{errorresult.map((item, index) => (
<div key={index}>
{Object.keys(item[index]).map((subarr, i) => (
<td key={i}>{item[subarr]}</td>
))}
</div>
))} </tr> */}
<tr>
{Object.keys(errorresult).map((item, i) => (
<td key={i}>{errorresult[item]}</td>
))}</tr>
</tbody>
</table>
Guys, please help, I have used the map function to display data but am not able to show data in different rows. In my code, all data show in one row.
Inside the loop you are using only td , that means it will insert the data only in columns of a single row. If you want to fix the issue the row tr also be inside loop.

Creating a table of barcodes using JSBarcode

I am trying to create a table of unique barcodes using node, bootstrap, and ejs. Here are the contents of my .ejs file:
<head>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode#3.11.4/dist/JsBarcode.all.min.js"</script>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Employee</th>
</tr>
</thead>
<tbody>
<% employeeObj.forEach(function(obj) { %>
<tr>
<td><%= obj.id %><svg id="barcode"></svg><script>var employee = '<%= obj.id %>'; JsBarcode("#barcode", employee);</script></td>
</tr>
<% }); %>
</tbody>
</table>
</body>
</html>
For some reason in each row of the table the barcode is being generated, but every barcode is the exact same value. I tried just putting the string value of obj.id in each row and it displays the different values fine.
What am I doing wrong?
I realized my issue was that the id for every barcode was the same which resulted in the same barcode being display multiple times. The solution to this problem is to have a unique id which could be accomplished like this:
id="<%=obj.id%>"

Laravel 5 - Download Excel file of a View

I'm working on adding an export/downloading feature to a Laravel 5 application. I found the Laravel-Excel library (http://www.maatwebsite.nl/laravel-excel/docs), which seems perfect -- ideally, I will be able to take a Laravel View or html and make a downloadable Excel file.
So far, I've gotten the creation and storage to work. I can create an Excel file, and it's okay (it's the right data and View), and on the server in storage/exports/ I see "Report.xls" - which is right save path. The issue I'm having is I cannot seem to download the file through the browser after creating it.
The Laravel-Excel library has ->download('xls') and ->export('xls') methods, but these only seems to return the raw content, which is visible in the developer's console:
On the right, you can see the file was created and stored as "Report.xls", and presumably the raw content is the right content - but I don't know why it's just spitting raw content into the console. I can open the Report.xls file in Excel, so I know it's not corrupted.
I also tried to use the Laravel 5 Response::download() function and set headers for the download, but it also spit out raw content in the console instead of downloading the file:
The code I'm using is an AJAX call that hits a Controller method, and the controller method just triggers a Service method called "downloadReportFile()":
public function downloadReportFile($requestData, $fileType) {
$configJSON = \Report::loadConfigFile($requestData['reportName']);
$today = Carbon::today()->format('Y-m-d');
$FileViewdata = array(
'config' => $configJSON,
'html' => $requestData['report_html']
);
\Excel::create("Report", function($excel) use ($FileViewdata) {
$excel->setTitle($FileViewdata['config']['title']);
$excel->setDescription($FileViewdata['config']['description']);
$excel->sheet("page 1", function($sheet) {
$sheet->loadView("reports.sample");
});
})->store('xls', storage_path('exports')); // ->export('xls');
$report_excelFilepath = storage_path('exports') . "/Report.xls";
return response()->download($report_excelFilepath, "Report.xls", [
'Content-Type' => 'application/vnd.ms-excel',
'Content-Disposition' => "attachment; filename='Report.xls'"
]);
}
The View being made into the Excel file is a simple table - the same table as in the screenshots. Here's the template/HTML of the View:
<div class="container full-width-container">
<link href="http://192.168.33.10/css/reports.css" rel="stylesheet">
<div id="results" class="row">
<div class="col-xs-12">
<h2 class="report-title">Active Products </h2>
<br>
<div class="row">
<div class="col-xs-12">
<div class="table-responsive report-component" name="table" template="table">
<table id="report-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="report-table-th">ENGINE</td>
<td class="report-table-th">PRODUCT COUNT</td>
<td class="report-table-th">PRODUCT PRICE</td>
</tr>
</thead>
<tbody>
<tr class="results-cell">
<td class="report-table-cell">
<p>Meows</p>
</td>
<td class="report-table-cell">
<p>1,234</p>
</td>
<td class="report-table-cell">
<p>781230.00</p>
</td>
</tr>
</tbody>
<tbody>
<tr class="results-cell">
<td class="report-table-cell">
<p>Paws</p>
</td>
<td class="report-table-cell">
<p>10,777</p>
</td>
<td class="report-table-cell">
<p>3919823.00</p>
</td>
</tr>
</tbody>
<tbody>
<tr class="results-cell">
<td class="report-table-cell">
<p>Meow Mobile</p>
</td>
<td class="report-table-cell">
<p>177</p>
</td>
<td class="report-table-cell">
<p>334323.00</p>
</td>
</tr>
</tbody>
<tbody>
<tr class="results-cell">
<td class="report-table-cell">
<p>Tails Cloud</p>
</td>
<td class="report-table-cell">
<p>335</p>
</td>
<td class="report-table-cell">
<p>378918923.00</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Does anyone see what I might be missing to download an XLS file?
Thanks for your time!
EDIT
After doing some more research, it seems that my original workflow for downloading -- using an AJAX call to trigger -- is part of the problem. For example Download a file from Servlet using Ajax talks about AJAX storing results in JavaScript memory, which would explain why I get content in my console and not a file.
Try to add code below before Excel::create():
ob_end_clean();
ob_start();
Example code:
ob_end_clean();
ob_start();
Excel::create($filename, function($excel) use($records, $sheetname, $data) {}
This works for me.

How can I get data from table using parent()

I try to get data from table, there is a link "Kaydet" when I click it, I must get a data from table which belong to it row, I share my table, it is like below:
https://hizliresim.com/PB3Dmv
sozlesme.js
Template.sozlesmeListele.events({
'click .kaydet': function (event, template) {
event.preventDefault();
var sozlesmeBilgileriAl = $(event.currentTarget).parent().parent().find(".secilenArac");
saveSozlesmeBilgisi = sozlesmeBilgileriAl.val();
alert(saveSozlesmeBilgisi);
}
});
sozlesmeAl.html
<tbody>
{{#each sozlesmeList}}
<tr>
<td>{{kullaniciadi}}</td>
<td>{{rezervasyonnumarasi}}</td>
<td>{{KiradaKalicakGun}}</td>
<td>{{telefon}}</td>
<td>{{alistarihi}}</td>
<td>{{iadetarihi}}</td>
<td class="secilenArac">{{secilenarac}}</td>
<td>{{aracteslimadresi}}</td>
<td>{{odenecekTutar}} TL.</td>
<td>Ceyhun TEKİN</td>
<td> Kaydet</td>
</tr>
{{/each}}
</tbody>
How can I solve it?
Deciphering Turkish Javascript is a new challenge for me but if I'm reading your question correctly, you want to figure out which row was clicked and get the data from that row, correct?
The simplest solution is to break up your template into an outer list-level one and an inner, row-level one. Then you can react to click events on the row and get your data context automatically. No need to try to figure out which row was clicked on.
Template.tekSozlesme.events({
'click .kaydet': function (event, template) {
event.preventDefault();
console.log(this); <!-- *this* will be the row data context
... do something with it
}
});
<template name="sozlesmeListele">
<tbody>
{{#each sozlesmeList}}
{{> tekSozlesme }}
{{/each}}
</tbody>
</template>
<template name="tekSozlesme">
<tr>
<td>{{kullaniciadi}}</td>
<td>{{rezervasyonnumarasi}}</td>
<td>{{KiradaKalicakGun}}</td>
<td>{{telefon}}</td>
<td>{{alistarihi}}</td>
<td>{{iadetarihi}}</td>
<td class="secilenArac">{{secilenarac}}</td>
<td>{{aracteslimadresi}}</td>
<td>{{odenecekTutar}} TL.</td>
<td>Ceyhun TEKİN</td>
<td>Kaydet</td>
</tr>
</template>

Displaying two different tables on different click

So I'm creating website for a sports team. I have a "Results" page, where their scores for every round will be posted in form of table. Above the table I need to have two options, one that says "Season 2014/2015" and the other "Season 2015/2016", and I want two different tables displayed for each one of them? How do I do that?
You can do this by simply using jquery.Here is an example.
HTML
<div id="foo">
<span id="table1-btn">Table 1</span>
<span id="table2-btn">Table 2</span>
</div>
<table id="table1">
<tr>
<td>Table 1</td><td>Table 1</td>
</tr>
<tr>
<td>Table 1</td><td>Table 1</td>
</tr>
</table>
<table id="table2">
<tr>
<td>Table 2</td><td>Table 2</td>
</tr>
<tr>
<td>Table 2</td><td>Table 2</td>
</tr>
</table>
css
#foo{
width:200px;
height:auto;
padding:5px;
}
#table1-btn,
#table2-btn{
width:100px;
height:auto;
padding:5px;
background-color:#e3e3e3;
cursor:pointer;
}
jQuery
$(document).ready(function () {
$('#table2').hide();
$('#table1-btn').click(function () {
$('#table2').hide();
$('#table1').show();
});
$('#table2-btn').click(function () {
$('#table1').hide();
$('#table2').show();
});
});
Find jsfiddle code Here
If you are using bootstrap, you could look into tabs: http://getbootstrap.com/javascript/#tabs
Have your tables in a tab 2014/2015 and the other tables in a tab 2015/2016

Resources