نحوه تبدیل جدول HTML به اکسل با استفاده از پلاگین JQUERY
1397/05/27 11:52 , بهزاد ناظمی

نحوه تبدیل جدول HTML به اکسل با استفاده از پلاگین JQUERY

معرفی

این مثال نحوه ایجاد و تبدیل یک جدول HTML به یک صفحه اکسل را با استفاده از پلاگین table2excel جی کوئری نشان می دهد.

 table2excel چیست؟

table2excel یک پلاگین جی کوئری است. این مورد برای تبادل جداول HTML به صفحات اکسل استفاده می شود.

 

چگونه می توان پلاگین table2excel را در داخل فایل HTML قرار داد؟

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script src="table2excel.js"type="text/javascript"></script>  

نشانه گذاری table2excel.js

یک فایل متنی را در دایرکتوری ریشه پروژه خود ایجاد کنید و آن سند را با نام  table2excel.js ذخیره کنید.

بعد از این، کد زیر را در فایل table2excel.js  بنویسید و آن را ذخیره کنید.

1.	//table2excel.js  
2.	; (function ($, window, document, undefined) {  
3.	    var pluginName = "table2excel",  
4.	  
5.	    defaults = {  
6.	        exclude: ".noExl",  
7.	        name: "Table2Excel",  
8.	        filename: "table2excel",  
9.	        fileext: ".xls",  
10.	        exclude_img: true,  
11.	        exclude_links: true,  
12.	        exclude_inputs: true  
13.	    };  
14.	  
15.	    // The actual plugin constructor  
16.	    function Plugin(element, options) {  
17.	        this.element = element;  
18.	        // jQuery has an extend method which merges the contents of two or  
19.	        // more objects, storing the result in the first object. The first object  
20.	        // is generally empty as we don't want to alter the default options for  
21.	        // future instances of the plugin  
22.	        //  
23.	        this.settings = $.extend({}, defaults, options);  
24.	        this._defaults = defaults;  
25.	        this._name = pluginName;  
26.	        this.init();  
27.	    }  
28.	  
29.	    Plugin.prototype = {  
30.	        init: function () {  
31.	            var e = this;  
32.	  
33.	            var utf8Heading = "<meta http-equiv=\"content-type\" content=\"application/vnd.ms-excel; charset=UTF-8\">";  
34.	            e.template = {  
35.	                head: "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\">" + utf8Heading + "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>",  
36.	                sheet: {  
37.	                    head: "<x:ExcelWorksheet><x:Name>",  
38.	                    tail: "</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>"  
39.	                },  
40.	                mid: "</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>",  
41.	                table: {  
42.	                    head: "<table>",  
43.	                    tail: "</table>"  
44.	                },  
45.	                foot: "</body></html>"  
46.	            };  
47.	  
48.	            e.tableRows = [];  
49.	  
50.	            // get contents of table except for exclude  
51.	            $(e.element).each(function (i, o) {  
52.	                var tempRows = "";  
53.	                $(o).find("tr").not(e.settings.exclude).each(function (i, p) {  
54.	  
55.	                    tempRows += "<tr>";  
56.	                    $(p).find("td,th").not(e.settings.exclude).each(function (i, q) { // p did not exist, I corrected  
57.	  
58.	                        var rc = {  
59.	                            rows: $(this).attr("rowspan"),  
60.	                            cols: $(this).attr("colspan"),  
61.	                            flag: $(q).find(e.settings.exclude)  
62.	                        };  
63.	  
64.	                        if (rc.flag.length > 0) {  
65.	                            tempRows += "<td> </td>"; // exclude it!!  
66.	                        } else {  
67.	                            if (rc.rows & rc.cols) {  
68.	                                tempRows += "<td>" + $(q).html() + "</td>";  
69.	                            } else {  
70.	                                tempRows += "<td";  
71.	                                if (rc.rows > 0) {  
72.	                                    tempRows += " rowspan=\'" + rc.rows + "\' ";  
73.	                                }  
74.	                                if (rc.cols > 0) {  
75.	                                    tempRows += " colspan=\'" + rc.cols + "\' ";  
76.	                                }  
77.	                                tempRows += "/>" + $(q).html() + "</td>";  
78.	                            }  
79.	                        }  
80.	                    });  
81.	  
82.	                    tempRows += "</tr>";  
83.	                    console.log(tempRows);  
84.	  
85.	                });  
86.	                // exclude img tags  
87.	                if (e.settings.exclude_img) {  
88.	                    tempRows = exclude_img(tempRows);  
89.	                }  
90.	  
91.	                // exclude link tags  
92.	                if (e.settings.exclude_links) {  
93.	                    tempRows = exclude_links(tempRows);  
94.	                }  
95.	  
96.	                // exclude input tags  
97.	                if (e.settings.exclude_inputs) {  
98.	                    tempRows = exclude_inputs(tempRows);  
99.	                }  
100.	                e.tableRows.push(tempRows);  
101.	            });  
102.	  
103.	            e.tableToExcel(e.tableRows, e.settings.name, e.settings.sheetName);  
104.	        },  
105.	  
106.	        tableToExcel: function (table, name, sheetName) {  
107.	            var e = this, fullTemplate = "", i, link, a;  
108.	  
109.	            e.format = function (s, c) {  
110.	                return s.replace(/{(\w+)}/g, function (m, p) {  
111.	                    return c[p];  
112.	                });  
113.	            };  
114.	  
115.	            sheetName = typeof sheetName === "undefined" ? "Sheet" : sheetName;  
116.	  
117.	            e.ctx = {  
118.	                worksheet: name || "Worksheet",  
119.	                table: table,  
120.	                sheetName: sheetName  
121.	            };  
122.	  
123.	            fullTemplate = e.template.head;  
124.	  
125.	            if ($.isArray(table)) {  
126.	                for (i in table) {  
127.	                    //fullTemplate += e.template.sheet.head + "{worksheet" + i + "}" + e.template.sheet.tail;  
128.	                    fullTemplate += e.template.sheet.head + sheetName + i + e.template.sheet.tail;  
129.	                }  
130.	            }  
131.	  
132.	            fullTemplate += e.template.mid;  
133.	  
134.	            if ($.isArray(table)) {  
135.	                for (i in table) {  
136.	                    fullTemplate += e.template.table.head + "{table" + i + "}" + e.template.table.tail;  
137.	                }  
138.	            }  
139.	  
140.	            fullTemplate += e.template.foot;  
141.	  
142.	            for (i in table) {  
143.	                e.ctx["table" + i] = table[i];  
144.	            }  
145.	            delete e.ctx.table;  
146.	  
147.	            var isIE = /*@cc_on!@*/false || !!document.documentMode; // this works with IE10 and IE11 both :)              
148.	            //if (typeof msie !== "undefined" && msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // this works ONLY with IE 11!!!  
149.	            if (isIE) {  
150.	                if (typeof Blob !== "undefined") {  
151.	                    //use blobs if we can  
152.	                    fullTemplate = e.format(fullTemplate, e.ctx); // with this, works with IE  
153.	                    fullTemplate = [fullTemplate];  
154.	                    //convert to array  
155.	                    var blob1 = new Blob(fullTemplate, { type: "text/html" });  
156.	                    window.navigator.msSaveBlob(blob1, getFileName(e.settings));  
157.	                } else {  
158.	                    //otherwise use the iframe and save  
159.	                    //requires a blank iframe on page called txtArea1  
160.	                    txtArea1.document.open("text/html", "replace");  
161.	                    txtArea1.document.write(e.format(fullTemplate, e.ctx));  
162.	                    txtArea1.document.close();  
163.	                    txtArea1.focus();  
164.	                    sa = txtArea1.document.execCommand("SaveAs", true, getFileName(e.settings));  
165.	                }  
166.	  
167.	            } else {  
168.	                var blob = new Blob([e.format(fullTemplate, e.ctx)], { type: "application/vnd.ms-excel" });  
169.	                window.URL = window.URL || window.webkitURL;  
170.	                link = window.URL.createObjectURL(blob);  
171.	                a = document.createElement("a");  
172.	                a.download = getFileName(e.settings);  
173.	                a.href = link;  
174.	  
175.	                document.body.appendChild(a);  
176.	  
177.	                a.click();  
178.	  
179.	                document.body.removeChild(a);  
180.	            }  
181.	  
182.	            return true;  
183.	        }  
184.	    };  
185.	  
186.	    function getFileName(settings) {  
187.	        return (settings.filename ? settings.filename : "table2excel");  
188.	    }  
189.	  
190.	    // Removes all img tags  
191.	    function exclude_img(string) {  
192.	        var _patt = /(\s+alt\s*=\s*"([^"]*)"|\s+alt\s*=\s*'([^']*)')/i;  
193.	        return string.replace(/<img[^>]*>/gi, function myFunction(x) {  
194.	            var res = _patt.exec(x);  
195.	            if (res !== null && res.length >= 2) {  
196.	                return res[2];  
197.	            } else {  
198.	                return "";  
199.	            }  
200.	        });  
201.	    }  
202.	  
203.	    // Removes all link tags  
204.	    function exclude_links(string) {  
205.	        return string.replace(/<a[^>]*>|<\/a>/gi, "");  
206.	    }  
207.	  
208.	    // Removes input params  
209.	    function exclude_inputs(string) {  
210.	        var _patt = /(\s+value\s*=\s*"([^"]*)"|\s+value\s*=\s*'([^']*)')/i;  
211.	        return string.replace(/<input[^>]*>|<\/input>/gi, function myFunction(x) {  
212.	            var res = _patt.exec(x);  
213.	            if (res !== null && res.length >= 2) {  
214.	                return res[2];  
215.	            } else {  
216.	                return "";  
217.	            }  
218.	        });  
219.	    }  
220.	  
221.	    $.fn[pluginName] = function (options) {  
222.	        var e = this;  
223.	        e.each(function () {  
224.	            if (!$.data(e, "plugin_" + pluginName)) {  
225.	                $.data(e, "plugin_" + pluginName, new Plugin(this, options));  
226.	            }  
227.	        });  
228.	  
229.	        // chain jQuery functions  
230.	        return e;  
231.	    };  
232.	  
233.	})(jQuery, window, document); 

نشانه گذاری HTML

 در حال حاضر، یک فایل متنی دیگر در دایرکتوری پروژه خود ایجاد کنید و آن را با نام "Example.html" ذخیره کنید.

 بعد از این، کد زیر را در فایل Example.html ایجاد کرده و آن را ذخیره کنید.

1.	<html xmlns="http://www.w3.org/1999/xhtml">  
2.	<head>  
3.	    <title></title>  
4.	     <style type="text/css">  
5.	        body  
6.	        {  
7.	            font-family: Arial;  
8.	            font-size: 10pt;  
9.	        }  
10.	        table  
11.	        {  
12.	            border: 1px solid #ccc;  
13.	            border-collapse: collapse;  
14.	        }  
15.	        table th  
16.	        {  
17.	            background-color: #ff7f00;  
18.	            color: #fff;  
19.	            font-weight: bold;  
20.	        }  
21.	        table th, table td  
22.	        {  
23.	            padding: 5px;  
24.	            border: 1px solid #ccc;  
25.	        }  

توجه داشته باشید

در پایان تگ جدول </table> شما باید اسکریپت زیر را اضافه کنید.

1.	$("#yourHtmTable").table2excel({    
2.	    exclude: ".excludeThisClass",    
3.	    name: "Worksheet Name",    
4.	    filename: "SomeFile" //do not include extension    
5.	});   

 

تصاویر / خروجی

صفحه بعد از تبدیل جدول HTML به صفحه اکسل.

خلاصه

 هنگامی که دکمه Export to Excel کلیک می شود، افزونه table2excel  جی کوئری به جدول HTML ایجاد شده اعمال می شود. پلاگین table2excel  جی کوئری نام فایل را به عنوان پارامتری تعیین می کند که نام فایل اکسل از آن گرفته می شود.

 

    برگرفته از : https://www.c-sharpcorner.com

 


جالب است بخوانید

طرز تبدیل HTML به WordPress

9 چیز که باید در مورد HTML5 بدانید

ایجاد یک فرم HTML و ویژگی تکمیل خودکار فرم ها

چگونه یک عنصر از اجزاء React را دریافت کنیم ؟

 

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات