投稿
  1. 簡單一點首頁
  2. 編程

tabletocsvjs代碼的簡單介紹

小藍 • • 編程

本文目錄一覽：

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;irows.length;i++){ //遍歷表格的行

var json = {};

for(var j=0;jrows[i].cells.length;j++){ //遍歷每行的列

json[(i+1)+”-“+(j+1)] = rows[i].cells[j].innerHTML;

}

jsonData.push(json);

}

//列標題

let str1 = “trtd align=’center’ colspan=’5’b最大”+arrSor[k].substring(9,arrSor[k].length)+”分鐘雨量/b/td/tr”;

let str2 = “tr align=’center’th站點/thth站名/thth雨量最大值/thth降水時段/thth落入最大降水時段/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 = “trtd 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=””headmeta charset=’UTF-8′!–[if gte mso 9]xml

x:ExcelWorkbookx:ExcelWorksheetsx:ExcelWorksheet

x:Name${worksheet}/x:Namex:WorksheetOptionsx:DisplayGridlines//x:WorksheetOptions/x:ExcelWorksheet/x:ExcelWorksheets/x:ExcelWorkbook/xml![endif]–

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

/headbodytable${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

參考文章：

第一種方法（大量數據導出）

//導出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;irows.length;i++){ //遍歷表格的行

var json = {};

for(var j=0;jrows[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 = “trtd 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 = “trtd colspan=’5′ style=’background-color:#FFFFFF;border: 1px solid #000000;’/td/tr”;

str += (str1 + str2 + str3);

}

var tableHtml=”htmlheadmeta charset=’UTF-8’/headbodytable”+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;

}}

參考文章：

如何用jquery把文件導出成csv格式文件

兼容性好點就發送內容到伺服器，又伺服器處理，設置”Content-Disposition”響應頭”attachment;filename=\”xxx.csv\””)

要不就只能IE瀏覽器下的document.execCommand(‘SaveAs’, ‘xxx.csv’);了，兼容性不是很好，而且好像指定的文件名和後綴沒效果。。

div id=”dv”

table

tr

th

tabletrth/thth/thth/th/tr/table

/th

th

tabletrth/thth/thth/th/tr/table

/th

th

tabletrth/thth/thth/th/tr/table

/th

/tr

/table

/div

iframe id=”ifr” style=”position:absolute;left:-999px;top:-999px;” src=”javascript:void(0)”/iframe

script type=”text/javascript”

    window.onload = function () {

        if (!!document.all) { alert(‘非IE瀏覽器無法直接JS控制保存文件！’); return false; }

        var doc = document.getElementById(‘ifr’).contentWindow.document;

        doc.open();

        doc.write(document.getElementById(‘dv’).innerHTML);

        doc.close();

        doc.execCommand(‘SaveAs’, ‘xxx.csv’);

    }

/script

Java後台代碼讀取html頁面table中的內容並保存到當地為.csv文件

table內容是從資料庫取的吧，你也可以從資料庫讀取啊。再寫入cvs就行了，沒必要去解析這個table

Python 和 BeautifulSoup 怎麼把 html table 處理成 csv

Python 和 BeautifulSoup 把 html table 處理成 csv，代碼如下：

#coding:utf8

import urllib

import urllib2

import cookielib

import re

import csv

import codecs

from bs4 import BeautifulSoup

wiki = ”

header = {‘User-Agent’: ‘Mozilla/5.0’}

req = urllib2.Request(wiki,headers=header)

page = urllib2.urlopen(req)

soup = BeautifulSoup(page)

name = “” #名字

creater = “” #歸屬

first = “” #首次公開發布的時間

latest = “” #最新穩定版本

cost = “” #售價

licence = “” #授權條款

table = soup.find(“table”, {“class” : “sortable wikitable”})

f = open(‘table.csv’, ‘w’)

csv_writer = csv.writer(f)

td_th = re.compile(‘t[dh]’)

for row in table.findAll(“tr”):

cells = row.findAll(td_th)

if len(cells) == 6:

name = cells[0].find(text=True)

if not name:

continue

creater = cells[1].find(text=True)

first = cells[2].find(text=True)

latest = cells[3].find(text=True)

cost = cells[4].find(text=True)

licence = cells[5].find(text=True)

csv_writer.writerow([ x.encode(‘utf-8’) for x in [name, creater, first, latest, cost, licence]])

f.close()

Javascript實現把網頁中table的內容導出到excel中的幾種方法

一、 直接拷貝整個表格到EXCEL中二、 通過遍歷表格，給EXCEL中相應的單元格賦值。三、 把表格中的內容提取出來，利用IE的另存為.csv的格式。各方法的好處：1. 直接拷貝表格，能夠保留表格中的原有的格式，比如，列，行的合併，對齊方式，底色等等，2. 通過遍歷表格，比較靈活，可以遍歷表格某些需要部分的內容。3. 利用IE的另存為，不用創建ActiveXObject對象，可以處理表格合併方面的問題。各方法的缺點：1. 可能彈出腳本錯誤：Automation不能創建對象。解決方法：啟用IE安全設置中的：對沒有標記為安全的ActiveX控制項進行初始化和腳本運行。由於整個表格複製到EXCEL中，給表格加個標題，並加入到EXCEL中可能會遇到麻煩。解決方法：首先在表格中加入第一行trtd colspan=”x” align=”center”/td/trX，表示整個表格的列數，複製完整個表格後,加如下代碼，oSheet為當前活動的sheet.oSheet.Range(oSheet.Cells(1, 1), oSheet.Cells(1, x)).value = “表格標題”;//設置標題oSheet.Rows(1).Font.Size = 16; //設置文字大小oSheet.Rows(1).Font.Name = “宋體”;//設置文字字體註：以下屬性我沒用著，可能有用，也可能會報錯oSheet.Range(oSheet.Cells(1,1), oSheet.Cells(1,14)).mergecells=true; //合併單元格oSheet.Range(oSheet.Cells(1,1), oSheet.Cells(1,14)).Interior.ColorIndex=6;//設置底色?oSheet.Range(oSheet.Cells(1,1), oSheet.Cells(1,14)).Font.ColorIndex=5;//設置字體色?oSheet.Rows(1).RowHeight=20; //設置列高oSheet.Cells(iRow,iCol).Halignment=』2』//設置字體居中2. 可能彈出腳本錯誤：Automation不能創建對象（解決方法如上）。表格內容寫入到EXCEL中無表格線（未解決）且有單元格合併時會有問題，解決方法：合併單元格後再寫數據。oSheet.Range(oSheet.Cells(1,1), oSheet.Cells(1,14)).mergecells=true; //合併單元格3. 表格內容寫入到EXCEL中無表格線（未解決）表格格式複雜時，會有問題，（rowspan1 or colspan1）,解決方法：一般都是表頭格式比較複雜，可先把表頭寫死，然後再循環寫其他數據。代碼如下：!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”HTMLHEADTITLE New Document /TITLE

META NAME=”Generator” CONTENT=”EditPlus”

META NAME=”Author” CONTENT=””

META NAME=”Keywords” CONTENT=””

META NAME=”Description” CONTENT=””

/HEAD BODY

table id=”tableExcel” width=”100%” border=”1″ cellspacing=”0″ cellpadding=”0″trtd colspan=”5″ align=”center”WEB頁面導出為EXCEL文檔的方法/td/trtrtd列標題1/tdtd列標題2/tdtd列標題3/tdtd列標題4/tdtd列標題5/td/trtrtdaaa/tdtdbbb/tdtdccc/tdtdddd/tdtdeee/td/trtrtdAAA/tdtdBBB/tdtdCCC/tdtdDDD/tdtdEEE/td/trtrtdFFF/tdtdGGG/tdtdHHH/tdtdIII/tdtdJJJ/td/tr/table

input type=”button” onclick=”javascript:method1(‘tableExcel’);” value=”第一種方法導入到EXCEL”input type=”button” onclick=”javascript:method2(‘tableExcel’);” value=”第二種方法導入到EXCEL”input type=”button” onclick=”javascript:getXlsFromTbl(‘tableExcel’,null);” value=”第三種方法導入到EXCEL”

SCRIPT LANGUAGE=”javascript”function method1(tableid)

{//整個表格拷貝到EXCEL中var curTbl = document.getElementById(tableid);var oXL = new ActiveXObject(“Excel.Application”);//創建AX對象excelvar oWB = oXL.Workbooks.Add();//獲取workbook對象var oSheet = oWB.ActiveSheet;//激活當前sheetvar sel = document.body.createTextRange();sel.moveToElementText(curTbl);//把表格中的內容移到TextRange中sel.select();//全選TextRange中內容sel.execCommand(“Copy”);//複製TextRange中內容oSheet.Paste();//粘貼到活動的EXCEL中oXL.Visible = true;//設置excel可見屬性}function method2(tableid) //讀取表格中每個單元到EXCEL中

{var curTbl = document.getElementById(tableid);var oXL = new ActiveXObject(“Excel.Application”);//創建AX對象excelvar oWB = oXL.Workbooks.Add();//獲取workbook對象var oSheet = oWB.ActiveSheet;//激活當前sheetvar Lenr = curTbl.rows.length;//取得表格行數for (i = 0; i Lenr; i++){var Lenc = curTbl.rows(i).cells.length;//取得每行的列數for (j = 0; j Lenc; j++){oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;//賦值}}oXL.Visible = true;//設置excel可見屬性}function getXlsFromTbl(inTblId, inWindow) {try {var allStr = “”;var curStr = “”;//alert(“getXlsFromTbl”);if (inTblId != null inTblId != “” inTblId != “null”) {curStr = getTblData(inTblId, inWindow);}if (curStr != null) {allStr += curStr;}else {alert(“你要導出的表不存在！”);return;}var fileName = getExcelFileName();doFileExport(fileName, allStr);}catch(e) {alert(“導出發生異常:” + e.name + “-” + e.description + “!”);}}

//———————————————

function getTblData(inTbl, inWindow) {var rows = 0;//alert(“getTblData is ” + inWindow);var tblDocument = document;if (!!inWindow inWindow != “”) {if (!document.all(inWindow)) {return null;}else {tblDocument = eval(inWindow).document;}}var curTbl = tblDocument.getElementById(inTbl);var outStr = “”;if (curTbl != null) {for (var j = 0; j curTbl.rows.length; j++) {//alert(“j is ” + j);for (var i = 0; i curTbl.rows[j].cells.length; i++) {//alert(“i is ” + i);if (i == 0 rows 0) {outStr += ” “;rows -= 1;}outStr += curTbl.rows[j].cells[i].innerText + ” “;if (curTbl.rows[j].cells[i].colSpan 1) {for (var k = 0; k curTbl.rows[j].cells[i].colSpan – 1; k++) {outStr += ” “;}}if (i == 0) {if (rows == 0 curTbl.rows[j].cells[i].rowSpan 1) {rows = curTbl.rows[j].cells[i].rowSpan – 1;}}}outStr += ” “;}}else {outStr = null;alert(inTbl + “不存在!”);}return outStr;}function getExcelFileName() {var d = new Date();var curYear = d.getYear();var curMonth = “” + (d.getMonth() + 1);var curDate = “” + d.getDate();var curHour = “” + d.getHours();var curMinute = “” + d.getMinutes();var curSecond = “” + d.getSeconds();if (curMonth.length == 1) {curMonth = “0” + curMonth;}if (curDate.length == 1) {curDate = “0” + curDate;}if (curHour.length == 1) {curHour = “0” + curHour;}if (curMinute.length == 1) {curMinute = “0” + curMinute;}if (curSecond.length == 1) {curSecond = “0” + curSecond;}var fileName = “leo_zhang” + “_” + curYear + curMonth + curDate + “_”+ curHour + curMinute + curSecond + “.csv”;//alert(fileName);return fileName;}function doFileExport(inName, inStr) {var xlsWin = null;if (!!document.all(“glbHideFrm”)) {xlsWin = glbHideFrm;}else {var width = 6;var height = 4;var openPara = “left=” + (window.screen.width / 2 – width / 2)+ “,top=” + (window.screen.height / 2 – height / 2)+ “,scrollbars=no,width=” + width + “,height=” + height;xlsWin = window.open(“”, “_blank”, openPara);}xlsWin.document.write(inStr);xlsWin.document.close();xlsWin.document.execCommand(‘Saveas’, true, inName);xlsWin.close();}

jsPDF 將html代碼中的table導出為pdf文件怎麼弄

jsPDF 將html代碼中的table導出為pdf文件怎麼弄

Java代碼 收藏代碼

html

head

titleExport html table to excel and csv using jquery/title

script src=”/jquery-1.9.1.min.js”/script

link rel=”stylesheet” href=””

script type=”text/javascript” src=”/jquery.base64.js”/script

script type=”text/javascript” src=/tableExport.js”/script

script type=”text/javascript” src=”/jspdf/libs/sprintf.js”

/script

script type=”text/javascript” src=””/script

script type=”text/javascript” src=”/jspdf/base64.js”/script

/head

body

[align=right]

brbrbr

button class=”btn btn-success” onClick =”$(‘#customers’).tableExport({type: ‘excel’, escape: ‘false’});”Excel Export/button

button class=”btn btn-success” onClick =”$(‘#customers’).tableExport({type: ‘pdf’, escape: ‘false’});”CSV Export/button

brbr

[/align]

table id=”customers” class=”table table-striped table-bordered”

thead

tr class=’warning’

thCountry/th

thPopulation/th

thDate/th

/tr

/thead

tbody

tr

tdChinna/td

td1,363,480,000/td

tdMarch 24, 2014/td

/tr

tr

tdIndia/td

td1,241,900,000/td

tdMarch 24, 2014/td

/tr

tr

tdUnited States/td

td317,746,000/td

tdMarch 24, 2014/td

/tr

tr

tdIndonesia/td

td249,866,000/td

tdJuly 1, 2013/td

/tr

tr

tdBrazil/td

td201,032,714/td

tdJuly 1, 2013/td

/tr

/tbody

/table

/div

/body

/html

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/157402.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
0 0
上一篇 2024-11-18 20:03
下一篇 2024-11-18 20:03

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    GPYNH的頭像 GPYNH
    編程 2025-04-29

  • Python字元串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字元串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字元串寬度不限制的情況下，我們可以寫出很長很長的一行代碼。但是，為了…

    OQFRU的頭像 OQFRU
    編程 2025-04-29

  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述，力求讓讀者深刻理解Python基礎代碼。通過本文的學習，相信大家對Python的學習和應用會更加輕鬆和高效。 一、變數和數…

    BFAIW的頭像 BFAIW
    編程 2025-04-29

  • Python簡單數學計算

    本文將從多個方面介紹Python的簡單數學計算，包括基礎運算符、函數、庫以及實際應用場景。 一、基礎運算符 Python提供了基礎的算術運算符，包括加（+）、減（-）、乘（*）、除…

    TMJEH的頭像 TMJEH
    編程 2025-04-29

  • Python滿天星代碼：讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼，為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員，都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    DCQKT的頭像 DCQKT
    編程 2025-04-29

  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在著手設計之前，我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面： 1、庫存管…

    EKUXU的頭像 EKUXU
    編程 2025-04-29

  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面，為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手，選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    DIYUZ的頭像 DIYUZ
    編程 2025-04-29

  • Python實現簡易心形代碼

    在這個文章中，我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹，逐步深入了解如何實現這一任務。 一、安裝Python …

    DKZPU的頭像 DKZPU
    編程 2025-04-29

  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中，我們不可避免地需要編寫一些長段代碼，包括函數、類、複雜的控制語句等等。在編寫這些代碼時，我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    SSLAV的頭像 SSLAV
    編程 2025-04-29

  • Python愛心代碼動態

    本文將從多個方面詳細闡述Python愛心代碼動態，包括實現基本原理、應用場景、代碼示例等。 一、實現基本原理 Python愛心代碼動態使用turtle模塊實現。在繪製一個心形的基礎…

    HPWOS的頭像 HPWOS
    編程 2025-04-29

發表回復

登錄後才能評論