zoukankan      html  css  js  c++  java
  • js导出带格式的表格(包括单元格合并,字体样式等)

    function HtmlExportToExcelForEntire() {
    			var uri = 'data:application/vnd.ms-excel;base64,',
    				template =
    				'<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
    				base64 = function(s) {
    					return window.btoa(unescape(encodeURIComponent(s)))
    				},
    				format = function(s, c) {
    					return s.replace(/{(w+)}/g, function(m, p) {
    						return c[p];
    					})
    				}
    			return (name, userList) => {
    				var tableTest = document.createElement('table');
    				tableTest.innerHTML = this.assemblyData(userList);
    				var ctx = {
    					worksheet: name || 'Worksheet',
    					table: tableTest.innerHTML
    				}
    				var alink = document.createElement('a');
    				alink.href = uri + base64(format(template, ctx));
    				alink.download = name + ".xls";
    				alink.style.display = 'none';
    				document.body.appendChild(alink);
    				alink.click();
    				alink.parentNode.removeChild(alink);
    			}
    		}
    
    		function assemblyData(data) {
    			var tHeader = `<tr>
    			<th>编号</th>
    			<th>负责人</th>
    			</tr>`;
    			var tBody = '';
    			for (var item of data) {
    				tBody += '<tr>'
    				tBody +=
    					`<td>${item.iid}</td>
    			<td>${item.assignee.name}</td>
    			`;
    				tBody += '</tr>'
    			}
    			var htmlData = tHeader + tBody;
    			return htmlData;
    		}
    

      调用方式:

    HtmlExportToExcelForEntire()('导出的表格名称',data);
  • 相关阅读:
    console.log眼见不一定为实
    播放器
    js变量
    js函数
    js数组
    设置默认浏览器
    this.$nextTick()用法
    进程理论+创建进程的两种方法+进程join方法+进程间数据相互隔离
    风险可视化项目记录1
    HTML笔记
  • 原文地址:https://www.cnblogs.com/wangyunhui/p/10369471.html
Copyright © 2011-2022 走看看