Таблицы на jquery с excel - Word и Excel - помощь в работе с программами

jQuery table2excel Plugin (https://github.com/rainabba/jquery-table2excel)

#Credit for the core table export code concept goes to insin (met on Freenode in #javascript) and core code inspired from https://gist.github.com/insin/1031969

FIRST!!

Thanks for your interest. I haven’t been able to maintain this and found the following project which looks well ahead of this one, so you may want to consider it first: TableExport

DISCLAIMER

This plugin is a hack on a hack. The .xls extension is the only way [some versions] of excel will even open it, and you will get a warning about the contents which can be ignored. The plugin was developed against Chrome and other have contributed code that should allow it to work in Firefox and Safari, but inconsistently since it’s a hack that’s not well supported anywhere but Chrome. I would not use this in public production personally and it was developed for an Intranet application where users are on Chrome and had known versions of Excel installed and the users were educated about the warning. These users also save-as in Excel so that when the files are distributed, the end-users don’t get the warning message.

Install — Bower

Install bower globally

Install jquery-table2excel and dependencies

bower install jquery-table2excel --save

Include jquery and table2excel in your page

<script src="bower_componentsjquerydistjquery.min.js"></script>
<script src="bower_componentsjquery-table2exceldistjquery.table2excel.min.js"></script>

Install — Legacy

Include jQuery and table2excel plugin:

<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>

Using the plugin

$("#yourHtmTable").table2excel({
    exclude: ".excludeThisClass",
    name: "Worksheet Name",
    filename: "SomeFile.xls", // do include extension
    preserveColors: false // set to true if you want background colors and font colors preserved
});

demo/

Contains a simple HTML file to demonstrate your plugin.

dist/

This is where the generated files are stored once Grunt runs.

.editorconfig

This file is for unifying the coding style for different editors and IDEs.

Check editorconfig.org if you haven’t heard about this project yet.

.jshintrc

List of rules used by JSHint to detect errors and potential problems in JavaScript.

Check jshint.com if you haven’t heard about this project yet.

.travis.yml

Definitions for continous integration using Travis.

Check travis-ci.org if you haven’t heard about this project yet.

table2excel.jquery.json

Package manifest file used to publish plugins in jQuery Plugin Registry.

Check this Package Manifest Guide for more details.

Gruntfile.js

Contains all automated tasks using Grunt.

Check gruntjs.com if you haven’t heard about this project yet.

package.json

Specify all dependencies loaded via Node.JS.

Check NPM for more details.

Contributing

Check CONTRIBUTING.md

History

Check Release list.

License

MIT License

Источник

<!DOCTYPE html>

<html>

<head>

<title>jQuery table2excel plugin</title>

<script src=

</script>

<script src="jquery.table2excel.js"></script>

</head>

<body>

<h1 style="color:green">GeeksForGeeks</h1>

<b>jQuery table2excel plugin </b>

<p></p>

<table class="table2excel">

<thead>

<tr class="noExl">

<td>

Table 1 Header, column 1 (not exported)</td>

<td>Table 1 Header, column 2(not exported)

</td>

</tr>

<tr><td>Table 1 Header, column 1 (exported)</td>

<td>Table 1 Header, column 2 (exported)</td></tr>

</thead>

<tbody>

<tr><td>Row 1, column 1 data of table1</td>

<td>Row 1 column 2 data of table 1</td></tr>

<tr><td>Row 2, column 1 data of table1</td>

<td>Row 2, column 2 dataof table1</td></tr>

</tbody>

<tfoot>

<tr><td colspan="2">This is the footer of table 1.</td></tr>

</tfoot>

</table>

<button class="exportBtnClass">Export to XLS file</button><p></p>

<table class="table2excel colorClass">

<thead>

<tr class="noExl">

<td>Table 2 Header, column 1 (not exported)</td>

<td>Table 2 Header, column 1 (not exported)</td></tr>

<tr><td style="background-color: green;">

Table 2 Header, column 1 (exported with colors)</td>

<td>Table 2 Header, column 2 (exported)</td></tr>

</thead>

<tbody>

<tr><td style="background-color: red;">

Row 1, column 1 data of table2</td>

<td>Row 1 column 2 data of table2</td></tr>

<tr><td>Row 2, column 1 data of table2</td>

<td>Row 2, column 2 data of table2</td></tr>

</tbody>

<tfoot>

<tr><td colspan="2">

This is the footer of table 2</td></tr>

</tfoot>

</table>

<button class="exportBtnClass">

Export to XLS file

</button>

<script>

$(function() {

$(".exportBtnClass").click(function(e){

var table = $(this).prev('.table2excel');

if(table && table.length){

var preserveColors =

(table.hasClass('colorClass') ? true : false);

$(table).table2excel({

// This class's content is excluded from getting exported

exclude: ".noExl",

name: "Output excel file ",

filename:

"outputFile-" + new Date().toString().replace(/[-:.]/g, "") + ".xls",

fileext: ".xls", //File extension type

exclude_img: true,

exclude_links: true,

exclude_inputs: true,

preserveColors: preserveColors

});

}

});

</script>

</body>

</html>

Источник

Improve Article

Save Article

Like Article

Read

Discuss

Improve Article

Save Article

Like Article

Any HTML table that you have created can be converted into an Excel Spreadsheet by using jQuery and it is compatible with all browsers. There are two simple approaches that require basic HTML and jQuery knowledge to achieve this.

Approach 1: Using jQuery plugin: A simple jQuery plugin ‘table2excel’ can be used for converting an HTML table to an excel sheet.

Syntax:

$("#table-id").table2excel({
    filename: "excel_sheet-name.xls"
});

Example:

html

<table id="studtable">

<tr>

<th>ID</th>

<th>Name</th>

<th>Age</th>

<th>Address</th>

</tr>

<tr>

<td>101</td>

<td>Alex</td>

<td>15</td>

<td>Maldives</td>

</tr>

<tr>

<td>102</td>

<td>Chris</td>

<td>14</td>

<td>Canada</td>

</tr>

<tr>

<td>103</td>

<td>Jay</td>

<td>15</td>

<td>Toronto</td>

</tr>

</table>

<script>

$(document).ready(function () {

$("#studtable").table2excel({

filename: "Students.xls"

});

</script>

Output:

 
ID    Name    Age    Address
101    Alex    15    Maldives
102    Chris    14    Canada
103    Jay    15    Toronto

The above output gets converted into an Excel spreadsheet in the exact same manner the HTML table is. About ‘table2excel’: The ‘table2excel’ is a simple yet useful jQuery plugin that allows for exporting HTML table data to an Excel file. The ‘table2excel’ also has a feature to exclude cells that contain a specified class. Syntax for noExport:

$(document).ready(function() {
    $("#table-id").table2excel({
        exclude: ".noExport",
        filename: "name-of-the-file",
    });
});

Example code for excluding some specified cells:

html

<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>Export</button>

<table>

<thead>

<tr>

<td class="noExport">

This cell will not be exported.

</td>

<td>

This cell will get exported.

</td>

</tr>

</thead>

<tbody>

<tr>

<td>Alex</td>

<td class="noExport">Maldives</td>

</tr>

<tr>

<td>Chris</td>

<td>Canada</td>

</tr>

</tbody>

</table>

Note: In the above sample code, the class ‘.noExport’ has been used to exclude those specified cells from the HTML table data. Therefore the exported Excel Spreadsheet also does not include those cells from the HTML table data.
Approach 2: Using simple HTML: Consider the same students table above to understand the below. Let’s use a button in our code which when clicked to converts the HTML data table into an Excel spreadsheet. Note that the ‘export’ button below does not actually convert the HTML table to an excel sheet. This has to used in a proper and already existing HTML code to get the Excel spreadsheet and will not work in this IDE.

html

<!DOCTYPE html>

<html>

<head>

<title>

HTML Table To Excel

spreadsheet using

HTML only

</title>

</head>

<body>

<table id="studtable">

<tr>

<th>ID</th>

<th>Name</th>

<th>Age</th>

<th>Address</th>

</tr>

<tr>

<td>101</td>

<td>Alex</td>

<td>15</td>

<td>Maldives</td>

</tr>

<tr>

<td>102</td>

<td>Chris</td>

<td>14</td>

<td>Canada</td>

</tr>

<tr>

<td>103</td>

<td>Jay</td>

<td>15</td>

<td>Toronto</td>

</tr>

</table>

<button onclick="tableToExcel(

'studtable', 'Students')">

Click to Export

</button>

</body>

</html>

Output:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more“.

HTML Tutorial and HTML Examples.
jQuery Tutorial and jQuery Examples.

Like Article

Save Article

Источник

<!DOCTYPE html>

<html>

<head>

<title>jQuery table2excel plugin</title>

<script src=

</script>

<script src="jquery.table2excel.js"></script>

</head>

<body>

<h1 style="color:green">GeeksForGeeks</h1>

<b>jQuery table2excel plugin </b>

<p></p>

<table class="table2excel">

<thead>

<tr class="noExl">

<td>

Table 1 Header, column 1 (not exported)</td>

<td>Table 1 Header, column 2(not exported)

</td>

</tr>

<tr><td>Table 1 Header, column 1 (exported)</td>

<td>Table 1 Header, column 2 (exported)</td></tr>

</thead>

<tbody>

<tr><td>Row 1, column 1 data of table1</td>

<td>Row 1 column 2 data of table 1</td></tr>

<tr><td>Row 2, column 1 data of table1</td>

<td>Row 2, column 2 dataof table1</td></tr>

</tbody>

<tfoot>

<tr><td colspan="2">This is the footer of table 1.</td></tr>

</tfoot>

</table>

<button class="exportBtnClass">Export to XLS file</button><p></p>

<table class="table2excel colorClass">

<thead>

<tr class="noExl">

<td>Table 2 Header, column 1 (not exported)</td>

<td>Table 2 Header, column 1 (not exported)</td></tr>

<tr><td style="background-color: green;">

Table 2 Header, column 1 (exported with colors)</td>

<td>Table 2 Header, column 2 (exported)</td></tr>

</thead>

<tbody>

<tr><td style="background-color: red;">

Row 1, column 1 data of table2</td>

<td>Row 1 column 2 data of table2</td></tr>

<tr><td>Row 2, column 1 data of table2</td>

<td>Row 2, column 2 data of table2</td></tr>

</tbody>

<tfoot>

<tr><td colspan="2">

This is the footer of table 2</td></tr>

</tfoot>

</table>

<button class="exportBtnClass">

Export to XLS file

</button>

<script>

$(function() {

$(".exportBtnClass").click(function(e){

var table = $(this).prev('.table2excel');

if(table && table.length){

var preserveColors =

(table.hasClass('colorClass') ? true : false);

$(table).table2excel({

// This class's content is excluded from getting exported

exclude: ".noExl",

name: "Output excel file ",

filename:

"outputFile-" + new Date().toString().replace(/[-:.]/g, "") + ".xls",

fileext: ".xls", //File extension type

exclude_img: true,

exclude_links: true,

exclude_inputs: true,

preserveColors: preserveColors

});

}

});

</script>

</body>

</html>

Источник

The “table2excel” is a well developed and lightweight jQuery plugin to export HTML table to xlsx file. The plugin comes with multiple configuration options to export the table with custom settings. It can be integrated with any data-rich HTML table and that table can be exported in one click.

The plugin (programmatically) allows you to set a custom filename for exported files. Similarly, you can also set a custom file extension (xls or xlsx). Besides this, you can exclude a specific table row to export. Likewise, there is an option to include/exclude images and links placed inside the HTML table.

In short, this plugin fulfills all the basic requirements to export an HTML table to an Excel sheet. If you are working on tables, also check out this pagination project for an HTML table.

Create an HTML Table

First of all, create an HTML table or add a class name "table2xcel" to your existing table. Similarly, create HTML5 data-attribute “data-tableName” and specify table name. If you want to exclude a row, you can add a class name “noExl” to that row. Create a button element with the class name "exportToExcel" at the end of your table. This button will be used to export the HTML table to an Excel file.

<table class="table2excel" data-tableName="Test Table 2">
   <thead>
      <tr class="noExl">
         <td>This shouldn't get exported</td>
         <td>This shouldn't get exported either</td>
      </tr>
      <tr>
         <td>This Should get exported as a header</td>
         <td>This should too</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>data1a</td>
         <td>data1b</td>
      </tr>
      <tr>
         <td>data2a</td>
         <td>data2b</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="2">This footer spans 2 cells</td>
      </tr>
   </tfoot>
</table>
<button class="exportToExcel">Export to XLS</button>

After that, add the following basic CSS styles for the table and export button. These styles are optional, you can skip this step if you want to integrate this plugin with your existing HTML table. You can check this CSS buttons pack if you wanted to create a custom style for the export button.

.table-container {
	max-width: 660px;
	margin: 10px auto;
}

.table2excel {
	background: #fff;
	border-collapse: collapse;
	width: 100%;
	margin: 10px 0;
}

.table2excel input {
	padding: 5px;
	border: 1px solid #ddd;
	color: #777;
}

.table2excel td {
	border: 1px solid #ddd;
	padding: 6px;
}

.table2excel tr:nth-child(odd) {
	background: #f5f5f5;
}

.exportToExcel {
	border: 0;
	padding: 10px 15px;
	background: #16ba4f;
	color: #fff;
	transition: .25s;
}

.exportToExcel:hover {
	background: #109d41;
	transition: .25s;
}

After creating and styling the HTML table, now its time to integrate with “table2excel.js” jQuery plugin. So, load the jQuery JavaScript library and plugin JS file just before the closing of </body> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="dist/jquery.table2excel.js"></script>

Finally, add the plugin configuration script after the above scripts. The following is the initialization with some basic plugin configurations. You can define values for each option according to your needs.

$(function () {
	$(".exportToExcel").click(function (e) {
		var table = $(this).prev('.table2excel');
		if (table && table.length) {
			var preserveColors = (table.hasClass('table2excel_with_colors') ? true : false);
			$(table).table2excel({
				exclude: ".noExl",
				name: "Excel Document Name",
				filename: "myFileName" + new Date().toISOString().replace(/[-:.]/g, "") + ".xlsx",
				fileext: ".xlsx",
				exclude_img: true,
				exclude_links: true,
				exclude_inputs: true,
				preserveColors: preserveColors
			});
		}
	});

});

Advanced Configuration Options

You can use the following available options to customize the working of the plugin.

Option	Default	Type	Description
`exclude`	“.noExl”	`String`	It defines a class name for the table row that you want to exclude. Example: $(table).table2excel({ exclude : ".noExl", });
`filename`	“table2excel”	`String`	Defines the exported file name. Example: $(table).table2excel({ filename : "table2excel", });
`fileext`	“.xls”	`String`	The file extension for exported file. Possible options are: “.xls” and “.xlsx”. Example: $(table).table2excel({ fileext : ".xls", });
`exclude_img`	true	`Boolean`	Decide whether to include or exclude table images. Example: $(table).table2excel({ exclude_img : true, });
`exclude_links`	true	`Boolean`	Exclude/include links in exported file. Example: $(table).table2excel({ exclude_links : true, });

That’s all! Hopefully, now you are able to export any HTML table to xlsx Excel file using this jQuery plugin. If you are facing any issue or need further guidance, let us know by comment below.

Источник