js導出html到excel表格數據_如何用js導出數據Excel

㈠ js如何導出exel文件

簡單的辦法：使用js生成一個table，可以直接復制到excel中，網上有很多表格插件。

復雜的辦法：js傳遞數據到伺服器，伺服器生成表格後返回一個下載鏈接。

㈡如何用js導出數據Excel

(function ($) {
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}

$.fn.ExportExcel = function (thread_id,tab_id, options) {
var defaults = {
height: '24px',
'line-height': '24px',
margin: '0 5px',
padding: '0 11px',
color: '#000',
background: '#02bafa',
border: '1px #26bbdb solid',
'border-radius': '3px',
/*color: #fff;*/
display: 'inline-block',
'text-decoration': 'none',
'font-size': '12px',
outline: 'none',
cursor: 'pointer'
}
var options = $.extend(defaults, options);
return this.each(function () {
var currentObject = $(this); //獲取當前對象
currentObject.css(defaults);
currentObject.onmouseover = function () {
$(this).css('cursor', 'hand');
};

currentObject.click(function () {
//From:jsfiddle.net/h42y4ke2/16/
var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';

tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';

tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';

tab_text = tab_text + "<table border='1px'>";
tab_text = tab_text + $('#' + thread_id).html();
tab_text = tab_text + $('#' + tab_id).html();
tab_text = tab_text + '</table></body></html>';

var data_type = 'data:application/vnd.ms-excel';

var timeStr = new Date().Format('yyyyMMddhhmmss');
$(this).attr('href', data_type + ', ' + encodeURIComponent(tab_text));
$(this).attr('download', '日常數據報表' + timeStr + '.xls');
});
})
}
})(jQuery);
<html>

<a href="#" id="export">導出</a>

<table>

<thead id="theadDate">

<tr>

<th>姓名</th>

<th>班級</th>

<th>年齡</th>

</tr>

</thead>

<tbody id="tbodyDate">

<tr> <td>張三</td>

<td>高二</td>

<td>18</td>

</tr>

<tr>

<td>李四</td>

<td>高三</td>

<td>20</td>

</tr>

</tbody>

</table>

<script src="assets/javascripts/autotest/export-excel.js" ></script>

<script type="text/javascript">

//導出調用
$(function () {
$('#export').ExportExcel('theadDate','tbodyDate'); //tbodyDate為table的id,export為a標簽。
});

</script>

</html>

㈢如何將html文件導出到excel

一、工具/原料

電腦

瀏覽器

Excel 2007

二、方法/步驟

（1）打開網路上的一個包含表格內容的頁面，點擊菜單欄-文件-另存為。

注意：請保持聯網狀態操作。

㈣ js導出html中table表格為Excel表格如何兼容各個瀏覽器

function method1() {//整個表格拷貝到EXCEL中 var curTbl = document.getElementById("hgreport1MngTb"); var oXL = new ActiveXObject("Excel.Application"); //創建AX對象excel var oWB = oXL.Workbooks.A

㈤ jq怎麼把html中的table內的內容導出到excel

用現成的組件：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery.table2excel.js"></script>

點擊button開始導出：

$("button").click(function(){
$("#table2excel").table2excel({
exclude: ".noExl",
name: "Worksheet Name",
filename: "SomeFile"
});
});

下載：ort-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.zip

㈥ html怎麼把導入excel

1. 用js或jq怎麼把html圖片插入excel中
其實就是js導出文件或文本到Excel中，js有自己封裝的Excel對象var excel = new ActiveXObject("Excel.Application")；創建Excel對象 var a = excel.Workbooks.Add（)；新建Excel var b = a.ActiveSheet；建表 for(){for(){b.Cells（指定行）.Select（)；指定哪一行b.Pictures.Insert（頁面上的位置）.getElementsByTagName('img').src）；獲取圖片插入進去}}我以前寫的大致是這個思路，並不完整，自己去查資料慢慢整理一下。
2. html表格中加入圖片怎麼在表格中加入圖片
添加方法如下：

1、table里添加圖片可以使用img標簽實現或者使用css的背景圖片是實現，代碼如下：

<table><tr><td><img src=xx.></td></tr></table>

css實現如下：

<table><tr><td class="page_speeder_952418209"></td></tr></table>

圖片均是設置在td標簽中。

2、文字也是需要寫到td標簽中間，如下：

<table><tr><td>；文字</td></tr></table>
3. 怎麼把html導出到excel表格
把html導出成txt文件，然後再把txt文件導入Excel:

1、首先，打開excel，選擇數據選項卡，自文本選項。

2、在彈出的資源管理器界面選擇存放好的txt文件後，點擊打開按鈕。

3、此時彈出文本導入向導，由於我的數字是以空格為分隔字元的，所以我選擇分隔符號，當然，如果你的文本是固定寬度，你可以選擇第二個。然後點擊下一步按鈕。

4、勾選空格，檢驗預覽數據是否和自己預想的一致。一致後繼續點擊下一步按鈕。

5、查看預覽效果。並選擇列數據格式，此處沒什麼特別要求，建議選擇常規，常規也是excel默認的格式。點擊完成。

6、在彈出的對話框中，選中要導入的數據區域，此處我要導入到當前單元格，並且從a1單元格開始，因此我選擇a1單元格，多餘的數據會自動以此單元格向兩邊張開。點擊確定按鈕

我們的數據就算是完美的導入進來了。
4. html怎麼導入excel文件
先進入Excel表格，然後選中需要棚備伏導入到Word文檔中的區域，按下 Ctrl+C 復制；

打開Word，然後選擇菜單欄的「編輯」中的「選擇性粘貼」，在「形式」下面選中「Microsoft Office Excel 工作表對象」然後確定；

此時，就已經把編輯好的Excel表格導入到Word中滾轎了，有的人這時肯定會說，這還不是和Word中表格沒什麼卻別啊！確實，就這樣用肉眼看，根本就看不錯這個表格和Word中做的表格有什麼不一樣之處；

區別肯定是有的，不信你雙擊表格看看，會是什麼效果，沒錯把，導入的表格和Excel中的表格一模一樣，當然，這個表格也可以自由拖動它的長和寬，還可以運用Excel中的公式呢鏈攜！
5. 怎麼把html文件轉成excel
1、首先，我們打開要轉換成THML的表格文件。（以下是我用的WPS2019版本的截圖，EXCEL軟體操作上差不多。）

2、接下來，點擊左上角的【文件】

3、在【文件】菜單里找到並點擊【另存為】

4、默認另存為的路徑是【我的文檔】，如需要修改，可自行選擇保存的位置。我習慣將新文件保存到桌面，所以我選擇【桌面】

5、最重要的一步來啦！【文件類型】這個地方，默認是EXCEL文件，我們選擇【網頁文件】

6、然後需要修改文件名的，可以修改一下，後綴可以使用或，以下是我修改的index

7、最後一步，點擊【保存】就完成了，這下，我們找到並打開保存的網頁文件，看看效果如何。
6. JavaScript能將頁面中的圖片導出到excel中嗎
只要網頁能顯示圖片，就能導出到EXCEL <！--把table的ID傳過去就好了-->
你的table 在IE瀏覽器里工具-》inter選項-》安全-》自定義級別-》把你禁用的都打開。

㈦如何將html文件導出到excel

一、工具/原料
電腦
瀏覽器
Excel
2007
二、方法/步驟
（1）打開網路上的一個包含表格內容的頁面，點擊菜單欄-文件-另存為。
（2）彈出窗口選擇保存路徑，將保存類型選為「htm
或Html格式」。
（3）在計算機上新建一個Excel文件並打開，點擊菜單欄-數據-導入外部數據-導入數據。
（4）找到剛才保存的「Html」單擊打開，再單擊「導入」。
（5）在彈出的「導入數據」窗口中你可以選擇「現有工作表」或者「新建工作表」，然後單擊確定。
注意：請保持聯網狀態操作。

㈧如何把html導出到excel

1、單擊數據--導入外部數據--新建Web查詢。
2、伍亮勾選我可以識別此者橘段內容，允許播放，單擊繼續按鈕。
3、在地址欄輸入網站地址，轉到此網站首譽裡面。
4、跳轉到指定網頁，點擊箭頭按鈕，然後導入數據到Excel。
Excel表格生成數據，至此完成全部過程。

㈨ js 導出大數據到excel

完整代碼：

//導出excelfunction tableToExcel(){
var arrSor = ["sorttable10","sorttable30","sorttable60","sorttable120"]
let str = "";
for (var k = 0; k < arrSor.length; k++) {
var tab=document.getElementById(arrSor[k]);
var rows=tab.rows;
const jsonData = [];
for(var i=2;i<rows.length;i++){ //遍歷表格的行
var json = {};
for(var j=0;j<rows[i].cells.length;j++){ //遍歷每行的列
json[(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;
}
jsonData.push(json);
}
//列標題
let str1 = "<tr><td align='center' colspan='5'><b>最大"+arrSor[k].substring(9,arrSor[k].length)+"分鍾雨量</b></td></tr>";
let str2 = "<tr align='center'><th>站點</th><th>站名</th><th>雨量最大值</th><th>降水時段</th><th>落入最大降水時段</th></tr>";
//循環遍歷，每行加入tr標簽，每個單元格加td標簽
for(let i = 0 ; i < jsonData.length ; i++ ){
str2+='<tr>';
for(let item in jsonData[i]){
//增加\t為了不讓表格顯示科學計數法或者其他格式
var itemTem= jsonData[i][item];
if (itemTem == "暫無數據") {
str2+=`<td colspan='5' align='center'>${ itemTem + '\t'}</td>`;
}else {
str2+=`<td align='center'>${ itemTem + '\t'}</td>`;
}
}
str2+='</tr>';
}
let str3 = "<tr><td colspan='5'></td></tr>";
str += (str1 + str2 + str3);
}
let worksheet = '雨量最大值'
let uri = 'data:application/vnd.ms-excel;base64,';
//下載的表格模板數據
let 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><meta charset='UTF-8'>
<style type="text/css">
table {border: 1px solid #000000;}
table tr td b {background:#FFFFFF;color:#3D3D3D;font-size:24px;border: 1px solid #000000;}
table th {background:#AEE1FE;color:#3D3D3D;font-size:20px;border: 1px solid #000000;}
table td {background:#FFFFFF;color:#3D3D3D;font-size:20px;border: 1px solid #000000;}</style>
</head><body><table>${str}</table></body></html>`;
//下載模板
// window.location.href = uri + this.base64(template)
var link = document.createElement("a");
link.href = uri + this.base64(template);
link.download = "雨量最大值-" +new Date().format("yyyy年MM月dd日 h時")+ ".xls";
link.style = "visibility:hidden";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);}//輸出base64編碼function base64 (template) {
return window.btoa(unescape(encodeURIComponent(template))) }

解析：
遍歷取出表，順序是行從上往下，列從左往右，將數據存進數組，下面再拼接成表。

image.png
參考文章：https://blog.csdn.net/hhzzcc_/article/details/80419396
第一種方法（大量數據導出）

//導出excelfunction tableToExcel() {
var arrSor = ["sorttable10","sorttable30","sorttable60","sorttable120"]
let str = "";
for (var k = 0; k < arrSor.length; k++) {
var tab=document.getElementById(arrSor[k]);
var rows=tab.rows;
const jsonData = [];
for(var i=2;i<rows.length;i++){ //遍歷表格的行
var json = {};
for(var j=0;j<rows[i].cells.length;j++){ //遍歷每行的列
if (rows[i].cells[j].outerHTML.indexOf("rgb(255, 255, 0)") != -1) {
json["yellow"+(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;
}else {
json[(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;
}
}
jsonData.push(json);
}
//列標題
let str1 = "<tr><td colspan='5' align='center' style='background-color:#FFFFFF;font-size:24px;border: 1px solid #000000;'><b>最大"
+arrSor[k].substring(9,arrSor[k].length)+"分鍾雨量</b></td></tr>";
let str2 = "<tr>" +
"<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>站點</th>" +
"<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>站名</th>" +
"<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>雨量最大值</th>" +
"<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>降水時段</th>" +
"<th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'>落入最大降水時段</th></tr>";
//循環遍歷，每行加入tr標簽，每個單元格加td標簽
for(let i = 0 ; i < jsonData.length ; i++ ){
str2+="<tr align='center'>";
for(let item in jsonData[i]){
if (item.indexOf("yellow") != -1) {//取列數等於3
//增加\t為了不讓表格顯示科學計數法或者其他格式
var itemTem= jsonData[i][item];
if (itemTem == "暫無數據") {
str2+=`<td colspan='5' style='background-color:#FFFF00;font-size:22px;border: 1px solid #000000;'> ${ itemTem + '\t'}</td>`;
}else {
str2+=`<td style='background-color:#FFFF00;font-size:22px;border: 1px solid #000000;'> ${ itemTem + '\t'}</td>`;
}
}else {
//增加\t為了不讓表格顯示科學計數法或者其他格式
var itemTem= jsonData[i][item];
if (itemTem == "暫無數據") {
str2+=`<td colspan='5' style='background-color:#FFFFFF;font-size:22px;border: 1px solid #000000;'> ${ itemTem + '\t'}</td>`;
}else {
str2+=`<td style='background-color:#FFFFFF;font-size:22px;border: 1px solid #000000;'> ${ itemTem + '\t'}</td>`;
}
}
}
str2+='</tr>';
}
let str3 = "<tr><td colspan='5' style='background-color:#FFFFFF;border: 1px solid #000000;'></td></tr>";
str += (str1 + str2 + str3);
}

var tableHtml="<html><head><meta charset='UTF-8'></head><body><table>"+str+"</body></html>"
var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});
var fileName = "雨量最大值-"+new Date().format("yyyy年MM月dd日 h時")+".xls";
if(isIE()){
window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
}else{
var oa = document.createElement('a');
oa.href = URL.createObjectURL(excelBlob);
oa.download = fileName;
document.body.appendChild(oa);
oa.click();
}} //判斷是否IE瀏覽器function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
return true;
} else {
return false;
}}

參考文章：https://blog.csdn.net/qq_34169240/article/details/84231226

㈩如何將html裡面的table導出成excel

使用table2excel表格插件需要在頁面中引入jquery和jquery.table2excel.js文件。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.table2excel.js"></script>

HTML結構
你可以將任何標準的HTML表格結構的數據導出到Excel中，一個HTML表格的結構為：
<table>
<thead>
<tr class="noExl">
<td>帶<code>noExl</code>class的行不會被輸出到excel中</td>
<td>帶<code>noExl</code>class的行不會被輸出到excel中</td>
</tr>
<tr>
<td>這一行會被導出到excel中</td>
<td>這一行會被導出到excel中</td>
</tr>
</thead>
<tbody>
<tr>
<td>單元格1-1</td>
<td>單元格1-2</td>
</tr>
<tr>
<td>單元格2-1</td>
<td>單元格2-2</td>
</tr>
<tr>
<td>單元格3-1</td>
<td>單元格3-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合並2個單元格</td>
</tr>
</tfoot>
</table>

如果表格中的某一行不需要導出到Excel中，可以為這一行添加.noExl class類，該class類會在插件初始化時通過參數被指定為不被導出的數據。
初始化插件
在頁面DOM元素載入中完畢之後，可以通過下面的方法來初始化table2excel插件。
$("#table2excel").table2excel({
// 不被導出的表格行的CSS class類
exclude: ".noExl",
// 導出的Excel文檔的名稱
name: "Excel Document Name",
// Excel文件的名稱
filename: "myExcelTable"
});

配置參數
table2excel插件的可用配置參數有：
exclude：不被導出的表格行的CSS class類。
name：導出的Excel文檔的名稱。
filename：Excel文件的名稱。
exclude_img：是否導出圖片。
exclude_links：是否導出超鏈接
exclude_inputs：是否導出輸入框中的內容。

導航:首頁 > 編程語言 > js導出html到excel表格數據

js導出html到excel表格數據

與js導出html到excel表格數據相關的資料

友情鏈接