html表格table导出excel,主从表格式,带样式.主动分列

html的table导出成excel, vue模板
项目使用xlsx-js-style
源代码从https://github.com/gitbrent/xlsx-js-style/releases/tag/v1.2.0 下载
用内里的dist目次下的文件即可. 复制到vue项目的public目次下的XLSX目次下.
在index.hml中引入js脚本, 为啥要在这里引入? 是由于这里引入可以极大的减少打包时间. 并且提高页面欣赏的速度. 一但把XLSX打包到一起, 系统将反应痴钝,所有我建议将这个模块的js独立使用.
把文件放入vue项目的public目次下, 打包发布后再复制到项目根目次下.
在index.hml

1. <!-- add the shim first -->
2. <script type="text/javascript" src="/XLSX/shim.min.js"></script>
3. <!-- after the shim is referenced, add the library -->
4. <script type="text/javascript" src="/XLSX/xlsx.full.min.js"></script>
5. <script type="text/javascript" src="/XLSX/xlsx.bundle.js"></script>

复制代码

vue页面脚本

1. <template>  
2.         <a-modal v-model="ShowExportWin" title=" Export Or Print Data"  :dialog-style="{ top: '10px' }" :width="'80%'">
3.                 <a-button @click="ExportExcel()">导出到Excel</a-button>
4.                 <div id="excelDataContainer" v-html="TableHTML" style="overflow: auto;width: 100%; border: 1px solid black;"></div>
5.         </a-modal>
6. </template>
7. <script  >
8. // import html2excel from 'html2excel';
9. // import XLSX from 'xlsx';
10. // import * as XLSX from 'xlsx';
11. // import { utils, writeFileXLSX } from 'xlsx-js-style'
12. // import XLSX from '@/components/xlsx.full.min.js';
13. //建议不要在这里import , 一但把XLSX打包到一起,  系统将反应迟钝. 太大了.
14. export default {
15.     name: "PrintOrExport",
16.     data() {
17.         return {      
18.                 ShowExportWin :false,
19.                 MasterTableName: "",
20.                 SlaveTableName: "",
21.                 TableHTML:"",
22.                 MasterFields: [],
23.                 SlaveFields: [],
24.                 MasterData: {
25.                     // "订单编号": "20250104001",
26.                     // "客户名称": "李四",
27.                     // "下单时间": "2025-01-04 14:30:00"
28.                 },
29.                 SlaveDatas: [
30.                     // { "商品名称": "笔记本电脑", "数量": 1, "单价": 5000 },
31.                     // { "商品名称": "鼠标", "数量": 2, "单价": 50 }
32.                 ],
33.             }
34.     },
35.     mounted() {
36.       
37.     },
38.     methods: {
40.         ExportExcel()
41.         {
42.                 const table = document.getElementById('excelDataContainer').firstChild;
43.                 const wb = XLSX.utils.book_new();
44.                 const ws = XLSX.utils.table_to_sheet(table);
45.                 var maxColIndex =  0;
46.                 // 遍历表格的所有行和列
47.                 for (let rowIndex = 0; rowIndex < table.rows.length; rowIndex++) {
48.                     const row = table.rows[rowIndex];
49.                     for (let colIndex = 0; colIndex < row.cells.length; colIndex++) {
50.                         const cell = row.cells[colIndex];
51.                             var cellObj = {
52.                                 v: cell.textContent,
53.                                 t:'s',
54.                                 s: {
55.                                     alignment: { wrapText: true, horizontal: 'center', vertical: 'center' },
56.                                     border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } },
57.                                 },
58.                             };
60.                             if (cell.tagName === 'TH') {
61.                                 // 处理表头
62.                                 cellObj.s.fill= { fgColor: { rgb: '0000FF' } };
63.                                 cellObj.s.font= { color: { rgb: 'FFFFFF' } };
64.                                 // cellObj.s.border= { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } };
65.                                 cellObj.s.alignment.horizontal= 'right';
66.                                 // cellObj.s.alignment= { wrapText: true };
67.                             }
68.                             const cellRef = XLSX.utils.encode_cell({ c: colIndex, r: rowIndex });
69.                             ws[cellRef] = cellObj;
70.                             if (colIndex > maxColIndex) {
71.                                 maxColIndex = colIndex;
72.                             }
73.                     }
75.                     
76.                 }
78.                 // 设置列的最大宽度不超过150
79.                 const numCols = maxColIndex;
80.                 const cols = Array.from({ length: numCols }, () => ({ wch: 150 / 7.5 })); // 大致计算，1字符宽度约7.5px
81.                 ws['!cols'] = cols;
82.             
83.                 XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
84.                 XLSX.writeFile(wb, this.MasterTableName + "_" + this.MasterData["__id"] + '_TableData.xlsx');
85.         },
86.         
87.          
88.         exportData(MasterTableName,SlaveTableName,MasterFields, SlaveFields,  MasterData, SlaveDatas) {
89.             this.MasterTableName = MasterTableName;
90.             this.SlaveTableName = SlaveTableName;
91.             this.MasterFields = [...MasterFields];
92.             
93.             this.SlaveFields = [...SlaveFields];
94.             this.MasterData = {...MasterData};
95.             this.SlaveDatas = [...SlaveDatas];
96.             this.ShowExportWin = true;
97.             
98.             console.log("mounted");
99.             this.RenderTableData();
100.             //this.$forceUpdate();
101.             console.log("exportData");  
102.         },
103.         RenderTableData(){
104.             this.TableHTML = this.generateExcelHTML();   
105.         },
106.         H2V(keys,details_count){
107.                 var COL_COUNTR = 3;//定死3列与界面显示一致 Math.floor(details_count/2); //计算有几列, 一个字段占2列.
108.                 var col = 1;
109.                 var col_count = Math.floor(keys.length / COL_COUNTR);//one_column_length
110.                 var duoyu = keys.length % COL_COUNTR;
111.             
112.                 var cut1 = col_count;
113.                 var cut2 = col_count;
114.                 var cut3 = col_count;
115.                 //2.先把数组分割成3列
116.                 if(duoyu==1){
117.                     cut1 = col_count+1;
118.                 }else if(duoyu==2){
119.                     cut1  = col_count+1;
120.                     cut2  = col_count+1;
121.                 }
122.                 var colarr1 = keys.splice(0, cut1) ;//this.splitArray(keys, cut1);
123.                 var colarr2 = keys.splice(0, cut2) ;//this.splitArray(keys, cut2);  
124.                 var colarr3 = keys.splice(0, cut3) ;//this.splitArray(keys, cut3);
125.                 // debugger;
126.                 // 再把每列的数组合并成一个数组
127.                 var newKeys =[];
128.                 for(var i=0;i<colarr1.length;i++)
129.                 {
130.                     newKeys.push(colarr1[i]);
131.                     if(i < colarr2.length){
132.                         newKeys.push(colarr2[i]);
133.                     }
134.                     if(i < colarr3.length){
135.                         newKeys.push(colarr3[i]);
136.                     }
137.                 }
138.                 return newKeys;
139.         },
140.         // 生成主表单的HTML表格行结构
141.         generateMainFormTableRow(data,keys) {
142.             //var keys = Object.keys(data);
143.             keys = this.H2V(keys);
144.             let rowHTML = '<tr>';
145.             for (var i = 0; i < keys.length; i++) {
146.                 if (i > 0 && i % 3 === 0) {
147.                     rowHTML += '</tr><tr>';
148.                 }
149.                 const key = keys[i];
150.                 rowHTML += `<th class="mHead">${key}</th><td class="mRow">${data[key]}</td>`;
151.             }
152.             
153.             if(keys.length % 3 == 1){
154.                 rowHTML += '<th class="mHead"> </th><td class="mRow"> </td>';
155.                 rowHTML += '<th class="mHead"> </th><td class="mRow"> </td>';
156.             }else if(keys.length % 3 == 2){
157.                 rowHTML += '<th class="mHead"> </th><td class="mRow"> </td>';
158.             }
159.             rowHTML += '</tr>';
160.             // debugger;
161.             return rowHTML;
162.         },
163.         // 生成明细数据的HTML表格行结构
164.         generateDetailTableRow(data,keys) {
165.             let rowHTML = '<tr>';
166.             keys.forEach(key => {
167.                 rowHTML += `<td class="dRow">${data[key]}</td>`;
168.             });
169.             rowHTML += '</tr>';
170.             return rowHTML;
171.         },
172.         isHiddenContorl(f) {
173.             if (f.FieldName.indexOf("_") >= 0 )   return true; //_开头的字段 不显示//0和-1 不显示
174.             if (f.DisplayWidth <= 0) return true; //显示宽度为0 不显示
175.             if (f.EditControl == "隐藏控件") return true;
176.             if (f.EditControl == "None") return true;
177.             if (f.EditControl == "无") return true;
178.             if (f.EditControl == "") return true;
179.             if (f.EditControl == null) return true;
180.             if (f.EditControl == undefined) return false;
181.             if (f.FieldName == null || f.FieldName == undefined || f.FieldName == "") return false;
182.             return false;
183.         },
184.         getNotHideFields(fields) {
185.             var tempArray = [];
186.             //先取需要显示的字段
187.             for (var i = 0; i < fields.length; i++)
188.             {
189.                 var f = fields[i];
190.                 if(this.isHiddenContorl(f)){
191.                     continue;
192.                 }
193.                 tempArray.push(f.FieldName);
194.             }
195.             return tempArray;
196.         },
197.         // 生成明细数据的HTML表格头结构
198.         generateDetailTableHeader(keys) {
199.             let headHTML = '<tr>';
200.             keys.forEach(key => {
201.                 headHTML += `<th  class="dHead">${key}</th>`;
202.             });
203.             headHTML += '</tr>';
204.             return headHTML;
205.         },
207.     // 生成完整的HTML表格结构，包含主表单和明细数据
208.       generateExcelHTML() {
209.             var tableHTML = '<table border="1">';
210.             
211.             var masterFields = this.getNotHideFields(this.MasterFields);
212.             var slaveFields = this.getNotHideFields(this.SlaveFields);
213.             // 主表单表头
214.             //tableHTML += '<tr><th colspan="2">' + this.MasterTableName + '</th></tr>';
215.             tableHTML += this.generateMainFormTableRow(this.MasterData,masterFields);
217.             // 明细表头
218.             // tableHTML += '<tr><th colspan="3">明细</th></tr>';
219.             // tableHTML += '<tr><th>商品名称</th><th>数量</th><th>单价</th></tr>';
220.             tableHTML += this.generateDetailTableHeader(slaveFields);
221.             // 明细数据行
222.             this.SlaveDatas.forEach(item => {
223.                 tableHTML += this.generateDetailTableRow(item,slaveFields);
224.             });
226.             tableHTML += '</table>';
227.             return tableHTML;
228.         },
230.         printData() {   
231.             console.log("printData");
232.         }
233.     }
234. }   
237. </script>
238. <style>
239. .mHead,.mRow,.dRow,.dHead{
240.    
241.     border: 1px solid black;
242.     padding: 5px;
243.     max-width: 200px;
244. }
245. .mRow{
246.     border: 1px solid black;
247. }
248. .dRow{
249.     border: 1px solid black;
250. }
251. .mHead,.dHead{
252.     background-color: #3278fc;
253.     color: white;
254. }
255. </style>

复制代码

应用demo

1. import PrintOrExport from "./PrintOrExport.vue";  
2. <PrintOrExport ref="PrintOrExportVue"></PrintOrExport>
4. this.$refs["PrintOrExportVue"].exportData(this.MasterTableName,this.SlaveTableName,this.MasterFields, this.SlaveFields,  this.MasterData, this.SlaveDatas );

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。