用js將HTML的Table匯出為Excel（可自定義：表格樣式+Excel名稱）

阿新 • • 發佈：2019-01-14

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
        var idTmr;
        function  getExplorer() {
            var explorer = window.navigator.userAgent ;
            //ie
            if (explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox
            else if (explorer.indexOf("Firefox") >= 0) {
                return 'Firefox';
            }
            //Chrome
            else if(explorer.indexOf("Chrome") >= 0){
                return 'Chrome';
            }
            //Operad
            else if(explorer.indexOf("Opera") >= 0){
                return 'Opera';
            }
            //Safari
            else if(explorer.indexOf("Safari") >= 0){
                return 'Safari';
            }
        }
        function table2excel(tableid,name) {//整個表格拷貝到EXCEL中
            if(getExplorer()=='ie')
            {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");
                 
                //建立AX物件excel
                var oWB = oXL.Workbooks.Add();
                //獲取workbook物件
                var xlsheet = oWB.Worksheets(1);
                //啟用當前sheet
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                //把表格中的內容移到TextRange中
                sel.select();
                //全選TextRange中內容
                sel.execCommand("Copy");
                //複製TextRange中內容 
                xlsheet.Paste();
                //貼上到活動的EXCEL中      
                oXL.Visible = true;
                //設定excel可見屬性
 
                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                } catch (e) {
                    print("Nested catch caught " + e);
                } finally {
                    oWB.SaveAs(fname);
 
                    oWB.Close(savechanges = false);
                    //xls.visible = false;
                    oXL.Quit();
                    oXL = null;
                    //結束excel程序，退出完成
                    //window.setInterval("Cleanup();",1);
                    idTmr = window.setInterval("Cleanup();", 1);
 
                }
            }
            else
            {
                tableToExcel(tableid,name)
            }
        }
        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var tableToExcel = (function() {
       		 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]-->'+
		    ' <style type="text/css">'+
		    '.excelTable  {'+
		    'border-collapse:collapse;'+
		     ' border:thin solid #999; '+
		    '}'+
		    '   .excelTable  th {'+
		    '   border: thin solid #999;'+
		    '  padding:20px;'+
		    '  text-align: center;'+
		    '  border-top: thin solid #999;'+
		    ' background-color: #E6E6E6;'+
		    ' }'+
		    ' .excelTable  td{'+
		    ' border:thin solid #999;'+
		    '  padding:2px 5px;'+
		    '  text-align: center;'+
		    ' }</style>'+
		    '</head><body ><table class="excelTable">{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 function(table, name) {
		if(name.length == 0){name='匯出Excel資訊';}
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
				//window.location.href = uri + base64(format(template, ctx))
				var downloadLink = document.createElement("A");
				downloadLink.href = uri + base64(format(template, ctx));
				downloadLink.download = name + '_' + formatTime(new Date(new Date().getTime()),'yyyy_mm_dd hh:ii:ss')+'.xls';
				downloadLink.target = '_blank';
				document.body.appendChild(downloadLink);
				downloadLink.click();
				document.body.removeChild(downloadLink);
              }
            })()
 
/**
* 擴充套件String物件,新增查詢字串出現的次數
* @param (String) str 要測試的字串
*/
String.prototype.findCount =function(str){
	return this.split(str).length - 1;
}
 
/**
* 複製字串
* @param (String) str 要複製的字串
* @param (String) num 要複製的次數
* @return (Number) 複製後的字串
*/
function copy(str , num){
	var tmp = '';
	for(var i=0; i<num; i++){
		tmp += str;
	}
	return tmp;
}
 
/**
* 格式化時間字串，支援Date物件
* @param (Number) time 要格式化的時間串，或者是一個Date物件
* @param (String) format 格式，如：yyyymmddhhiiss yyyy-mm-dd hh:ii:ss
* @return (String) 格式化後的時間串
*/
function formatTime(time /* Number */,format /* String */){
 var 
	y=format.findCount('y'),
	m=format.findCount('m'),
	d=format.findCount('d'),
	h=format.findCount('h'),
	i=format.findCount('i'),
	s=format.findCount('s');
	
	time=time || '';
	format = format || '';
	format = format.toLowerCase();
	if(time == '') {return time;}
	if(time.constructor == Date){
		var tmp='' + time.getFullYear() +
			('00' + (time.getMonth() + 1)).slice(-2) +	
			('00' + time.getDate()).slice(-2) +	
			('00' + time.getHours()).slice(-2) +	
			('00' + time.getMinutes()).slice(-2) +	
			('00' + time.getSeconds()).slice(-2);
		    time = tmp;	
	}
	/*
	if(time.length <format.length){
		alert('要格式化的時間串與轉換格式不一致！');
		return false;
	}
	*/
 
	if(y > 0){
		format = format.replace(copy('y',y),time.substring(0,4).slice(-y));
	}
 
	if(m > 0){
		format = format.replace(copy('m',m),('00'+time.substring(4,2)).slice(-m));
	}
 
	if(d > 0){
		format = format.replace(copy('d',d),('00'+time.substring(6,2)).slice(-d));
	}
 
	if(h > 0){
		format = format.replace(copy('h',h),('00'+time.substring(8,2)).slice(-h));
	}
 
	if(i > 0){
		format = format.replace(copy('i',i),('00'+time.substring(10,2)).slice(-i));
	}
 
	if(s > 0){
		format = format.replace(copy('s',s),('00'+time.substring(12,2)).slice(-s));
	}
 
	return format;
}
</script>
 
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1px" id="test">
	<tr>
		<th width="20%">姓名</th>
		<th width="20%">性別</th>
		<th width="20%">年齡</th>
		<th width="20%">部門</th>
		<th width="20%">角色</th>
	</tr>
	<tr>
		<td>張三</td>
		<td>男</td>
		<td>28</td>
		<td>銷售部</td>
		<td>經理</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>男</td>
		<td>27</td>
		<td>研發部</td>
		<td>專案總監</td>
	</tr>
	<tr>
		<td>王燕</td>
		<td>女</td>
		<td>29</td>
		<td>電子商務部</td>
		<td>主管</td>
	</tr>
</table>
<br>
<input id="Button1" type="button" value="匯出EXCEL" onclick="javascript:table2excel('test','自定義匯出excel資訊名稱')" style="padding:5px;margin-top:20px;"/>
</body>
</html>

說明：我們可以把js程式碼提取到檔案，前臺頁面通過傳值的方式，來傳遞我們自定義的Excel匯出名。

目前匯出名稱模式為：自定義匯出excel資訊名稱_2018_02_11 17-32-35.xls

用js將HTML的Table匯出為Excel（可自定義：表格樣式+Excel名稱）

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" la

Web開發之用canvas2image.js將canvas儲存為圖片（實現頁面截圖下載功能）

var canvas, ctx, bMouseIsDown = false, iLastX, iLastY, $save, $imgs, $convert, $imgW, $imgH, $sel; function init () {

HTML通過JS將Table匯出為Excel表格

//第一種方法 function method1(tableid) { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("E

IE下用JavaScript將HTML匯出為Word、Pdf

最近升級公司內部系統發文章的功能，涉及到將文章內容匯出為html、word、pdf，系統多用於IE環境下，並且公司電腦都預裝了office，所以匯出暫時採用客戶端的方式。頁面基本結構： <html> <hea

多個線程實現順序打印數據，（可自定義線程一次打印數量和總數量）

技術分享 str logs ges his .get shm import pre 　　最近看到一道面試題：讓3個線程順序打印數字，如線程1打印1-5，線程2打印6-10，線程3打印11-15,然後是線程1打印16-20...一直打印到75結束。　　這到題主要問題有兩點

在html中展示自己設計的字型（使用自定義字型庫實現資料加密）

在iconfont這麼發達的年代，作為前端設計工程師使用font awesome 是十分頻繁的，而“png圖”樣式圖示現在已經應用的比較少了，追溯其原因還是瀏覽器核心的渲染速度提升和字型庫多瀏覽器（包括手機）的支援，向量字型不會出現模糊的情況等等。從最早html4時代把圖示做

下拉重新整理，上拉載入更多的SwipeRefreshLayout（可自定義動畫）

為啥重複搞，搞得還沒人家好，因為除了需求，還有理解。我是這麼認為的。因為懶所以寫出來留作自用，以後就是修修改改了。打造自己的“下拉重新整理，上拉載入更多，自定義動畫及佈局”控制元件（拷貝SwipeRefreshLayout原始碼進行修改）不鬥圖的碼農你見過

萬能選擇器（可自定義生日選擇，地區選擇，性別選擇，，，，）;

import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; import and

JS 日曆外掛實現農曆、節氣可自定義加班和休假

最近因為專案需求，模仿別人的介面做了一個日曆外掛。程式碼有些地方可能寫的不好，但功能都實現了。顯示對應的農曆、節氣、天干地支年月日。並支援自定義加班和休假日期。可在IE8(包括)以上瀏覽器使用(低於IE8的沒有測試過)。以下是展示： html：引入cale

Zxing二維碼掃描的三個類（可自定義掃描框）

先新增依賴 compile 'com.journeyapps:zxing-android-embedded:3.3.0' 清單檔案配置許可權 <uses-permission android:name="android.permission.CAMERA" /&

JAVA 整合 Ueditor 百度富文字編輯器（可自定義上傳路徑）

開發環境：一個簡單的web專案中，用百度富文字編輯器 ueditor 實現圖片和檔案的上傳（可自定義上傳路徑）需要使用到的2個檔案如下（官網上下載）：1，ueditor-1.4.3.3.zip2，ueditor1_4_3_3-utf8-jsp.zip所需jar包：配置完成後，

大資料（hadoop-自定義資料型別、檔案格式）

自定義InputFormat OutputFormat 示例程式碼 package com.vip09;

Vue + WebRTC 實現音視訊直播（附自定義播放器樣式）

# 1. 什麼是WebRTC ## 1.1 WebRTC簡介 **WebRTC**，名稱源自**網頁即時通訊**（英語：Web Real-Time Communication）的縮寫，是一個支援網頁瀏覽器進行實時語音對話或視訊對話的實時通訊框架，提供了一系列頁面可呼叫API。 >參考定義：[

用js將從後臺得到的時間戳（毫秒數）轉換為想要的日期格式

得到後臺從資料庫中拿到的資料我們希望格式是　　　　　　　　　　　　　　　　2016年10月25日 17時37分30秒　或者 2016/10/25 17:37:30 然而我們前臺得到的卻是一段數字（時間戳，毫秒數）　　　　　　　　　　　　　　　　1477386

使用PL SQL將資料匯出為Excel格式檔案

使用PL SQL將資料匯出為Excel格式檔案有兩種方法，第一種是先將查詢結果匯出為CSV檔案，然後再轉為Excel檔案；第二種是選中要匯出的查詢結果，右鍵，選擇複製到xls，即可。兩種方法各有優勢：第一種方法適用於匯出資料量特別大，如超過140多萬行資料，因為excel表格有最大行數限

JS將html生成為圖片並下載（適用於大多數瀏覽器，包含手機瀏覽器等（需配合後臺處理））(筆記)

（1）html程式碼 <div id="id="content""> //此處放置需要生成圖片的程式碼 <div class="order_payCon"> <div class="submit_pay_success"

js將table匯出excel 之檔案改名及格式化

<html> <head> <meta charset="utf-8"> <script type="text/javascript" language="javascript"> var idTmr;

用js 將當前html頁面匯出pdf

引入的js <script src="./js/libs/jquery-2.0.2.js"></script> <script src="./js/exportpdf/jspdf.debug.js"></script>

wpf 視窗程式下將datagrid匯出為excel

/// <summary> /// CSV格式化 /// </summary> /// <param name="data">資料</param> /// <returns>格式化資料</re

Java用OpenOffice將word轉換為PDF

sts pre 成功 accep 存在 china ati url 基礎本文在原文的基礎上有所修改，原文請參考： http://titanseason.iteye.com/blog/1471606 由於此blog不支持附件附件請到此處下載 http://my.oschin

用js將HTML的Table匯出為Excel（可自定義：表格樣式+Excel名稱）

相關推薦