导出EXCEL通常是用PHP做,可是项目中,有时候PHP后端project师返回的数据不是我们想要的,作为前端开发project师,把相应的数据编号转换为文字后,展示给用户。可是。需求要把数据同一时候导出一份EXCEl。

无奈之下,我仅仅能用js导出table中的数据了。

导出EXCEl通常是自己人用的。所以用js导出,由于js导出EXCEL普通情况下兼容性不是非常好,非常多仅仅是兼容IE浏览器,还要设置在工具栏中进行设置才干导出,由于会相对照较烦。以下介绍几种方法:

一、js导出EXCEl带单元格合并【已验证,比較好用】

// JavaScript Document
//调用方法
// var test=new PageToExcel("data",0,255,"測试.xls");//table id , 第几行開始,最后一行颜色 ,保存的文件名称
// test.CreateExcel(false);
// test.Exec();
// test.SaveAs();
// test.CloseExcel();
//LastRowColor 0黑色 255红色
// function PageToExcel(TableID,FirstRow,LastRowColor,SaveAsName){
this.lastRowColor=LastRowColor==""?0:LastRowColor;
var today=new Date();
this.saveAsName=(SaveAsName==""?today.getYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日.xls":SaveAsName);
this.tableId=TableID;
this.table=document.getElementById(this.tableId);//导出的table 对象
this.rows=this.table.rows.length;//导出的table总行数
this.colSumCols=this.table.rows[0].cells.length;//第一行总列数
this.fromrow=FirstRow;
this.beginCol=0; //起始列数
this.cols=this.colSumCols;
this.oXL=null;
this.oWB=null;
this.oSheet=null;
this.rowSpans=1; //行合并
this.colSpans=1; //列合并
this.colsName={0:"A",1:"B", 2:"C", 3:"D", 4:"E", 5:"F", 6:"G", 7:"H", 8:"I",9:"J", 10:"K", 11:"L", 12:"M", 13:"N", 14:"O", 15:"P", 16:"Q", 16:"R" ,18:"S", 19:"T", 20:"U", 21:"V", 22:"W", 23:"X", 24:"Y", 25:"Z"};
}
PageToExcel.prototype.DeleteExcelCols=function(NotShowColList){//数组NotShowColList
//this.notShowColList=NotShowColList;//不显示列集合,1,2,3,1
//删除excel中的列
var m=0;
for(var i=0;i<NotShowColList.length;i++){
if(i>0){
m++;
}
var temp=NotShowColList[i]- m;
var index=this.colsName[temp];
this.oSheet.Columns(index).Delete;//删除
}
m=0;
} PageToExcel.prototype.CreateExcel=function(ExcelVisible)
{
try{
this.oXL = new ActiveXObject("Excel.Application"); //创建应该对象
this.oXL.Visible = ExcelVisible;
this.oWB = this.oXL .Workbooks.Add();//新建一个Excel工作簿
this.oSheet = this.oWB.ActiveSheet;//指定要写入内容的工作表为活动工作表
//不显示网格线
this.oXL.ActiveWindow.DisplayGridlines=false;
}catch(e){
alert("请确认安装了非绿色版本号的excel。"+e.description);
CloseExcel();
}
} PageToExcel.prototype.CloseExcel=function()
{
this.oXL.DisplayAlerts = false;
this.oXL.Quit();
this.oXL = null;
this.oWB=null;
this.oSheet=null;
} PageToExcel.prototype.ChangeElementToLabel=function (ElementObj){
var GetText="";
try{
var childres=ElementObj.childNodes; }catch(e){ return GetText}
if(childres.length<=0) return GetText;
for(var i=0;i<childres.length;i++){
try{if(childres[i].style.display=="none"||childres[i].type.toLowerCase()=="hidden"){continue;}}
catch(e){} try{
switch (childres[i].nodeName.toLowerCase()){
case "#text" :
GetText +=childres[i].nodeValue ;
break;
case "br" :
GetText +="\n";
break;
case "img" :
GetText +="";
break;
case "select" :
GetText +=childres[i].options[childres[i].selectedIndex].innerText ;
break;
case "input" :
if(childres[i].type.toLowerCase()=="submit"||childres[i].type.toLowerCase()=="button"){
GetText +="";
}else if(childres[i].type.toLowerCase()=="textarea"){
GetText +=childres[i].innerText;
}else{
GetText +=childres[i].value;
}
break;
default :
GetText += this.ChangeElementToLabel(childres[i]);
break;
} }catch(e){}
}
return GetText;
}
PageToExcel.prototype.SaveAs=function (){
//保存
try{
this.oXL.Visible =true;
var fname = this.oXL.Application.GetSaveAsFilename(this.saveAsName, "Excel Spreadsheets (*.xls), *.xls");
if(fname){
this.oWB.SaveAs(fname);
this.oXL.Visible =false;
}
}catch(e){};
}
PageToExcel.prototype.Exec=function()
{ //寻找列数,考虑到第一行可能存在
for (var i=0; i<this.colSumCols;i++) {
var tmpcolspan = this.table.rows(0).cells(i).colSpan;
if ( tmpcolspan>1 ) {
this.cols += tmpcolspan-1;
}
} //定义2维容器数据。1:行;2:列;值(0 能够填充,1 已被填充)
var container=new Array(this.rows);
for (var i=0;i<this.rows;i++) {
container[i]=new Array(this.cols);
for (j=0;j<this.cols;j++) {
container[i][j]=0;
}
} //将全部单元置为文本,避免非数字列被自己主动变成科学计数法和丢失前缀的0
this.oSheet.Range(this.oSheet.Cells(this.fromrow+1,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).NumberFormat = "@";
// 循环行
for (i=0;i<this.rows;i++){
//循环列
for (j=0;j<this.cols;j++){
//寻找開始列
for (k=j;k<this.cols;k++){
if (container[i][k]==0) {
this.beginCol=k;
k=this.cols; //退出循环
}
}
//try{
//赋值
//此处相应跟改 依据 标签的类型,替换相关參数
this.oSheet.Cells(i+1+this.fromrow,this.beginCol+1).value = this.ChangeElementToLabel(this.table.rows(i).cells(j)); //计算合并列
try{
this.colSpans = this.table.rows(i).cells(j).colSpan;
}catch(e){
this.colSpans=0
}
if (this.colSpans>1) {
//合并
this.oSheet.Range(this.oSheet.Cells(i+1+this.fromrow,this.beginCol+1),this.oSheet.Cells(i+1+this.fromrow,this.beginCol+this.colSpans)).Merge();
}
//将当前table位置填写到相应的容器中
for (k=0; k<this.colSpans;k++) {
container[i][this.beginCol+k]= 1;
}
// 计算合并行 try{
this.rowSpans = this.table.rows(i).cells(j).rowSpan;
}catch(e){
this.rowSpans = 0;
} if (this.rowSpans>1) { //行合并
this.oSheet.Range(this.oSheet.Cells(i+1+this.fromrow,this.beginCol+1),this.oSheet.Cells(i+this.rowSpans+this.fromrow,this.beginCol+this.colSpans)).Merge();
//将当前table位置填写到相应的容器中
for (k=1; k<this.rowSpans;k++) { //因为第0行已经被colSpans相应的代码填充了,故这里从第1行開始
for (l=0;l<this.colSpans;l++) {
container[i+k][this.beginCol+l]=1;
}
}
}
//假设開始列+合并列已经等于列数了,故不须要再循环html table
if (this.beginCol+this.colSpans>=this.cols) j=this.cols; }
if(i==0)
{
//标题栏
this.oSheet.Range(this.oSheet.Cells(1,1), this.oSheet.Cells(1,1)).Font.Size=20;
this.oSheet.Range(this.oSheet.Cells(1,1), this.oSheet.Cells(1,1)).Font.Bold = true;
this.oSheet.Range(this.oSheet.Cells(1,1), this.oSheet.Cells(1,1)).HorizontalAlignment = -4108; //居中
this.oSheet.Range(this.oSheet.Cells(1,1), this.oSheet.Cells(1,1)).Rows.RowHeight = 40;
}
//自己主动调整行高
} //最后一行是否空色
try{
this.oSheet.Range(this.oSheet.Cells(this.rows,1), this.oSheet.Cells(this.rows,1)).Font.Color=this.lastRowColor;
}catch(e){}
this.oSheet.Range(this.oSheet.Cells(this.fromrow+2,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).Rows.RowHeight=20;
this.oSheet.Range(this.oSheet.Cells(this.fromrow+2,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).Font.Size=10;
//自己主动换行
this.oSheet.Range(this.oSheet.Cells(this.fromrow+2,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).WrapText = true;
//自己主动调整列宽
this.oSheet.Range(this.oSheet.Cells(this.fromrow+1,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).Columns.AutoFit();
//点虚线
this.oSheet.Range(this.oSheet.Cells(this.fromrow+1,1), this.oSheet.Cells(this.fromrow+this.rows,this.cols)).Borders.LineStyle = -4118; return this.rows;
}

注意:要改IE浏览器安全设置

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29uZmlkZW5jZTY4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

二、js导出table中的EXCEL.该方法仅仅能在IE内核下执行。相比其它方法的优点是,不

用再设置什么属性或者安装什么插件了,思路例如以下:

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++) {
for (var i = 0; i < curTbl.rows[j].cells.length; i++) {
if (i == 0 && rows > 0) {
outStr += " \t";
rows -= 1;
}
outStr += curTbl.rows[j].cells[i].innerText + "\t";
if (curTbl.rows[j].cells[i].colSpan > 1) {
for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
outStr += " \t";
}
}
if (i == 0) {
if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
rows = curTbl.rows[j].cells[i].rowSpan - 1;
}
}
}
outStr += "\r\n";
}
}
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 = "91zaojia" + "_" + curYear + curMonth + curDate + "_"
+ curHour + curMinute + curSecond + ".xls";
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();
}

改代码已经验证,能够使用。调用非常easy,直接用就能够


onclick="getXlsFromTbl('functionclickExcel',null);就能够了!



js导出table中的EXCEL总结的更多相关文章

  1. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  2. js操作table中tr的顺序,实现上移下移一行的效果

    总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...

  3. js遍历table中的每一个元素

    function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElemen ...

  4. JS 导出网页中Table内容到excel

    <html> <head> <script type="text/javascript" language="javascript" ...

  5. MVC项目中怎样用JS导出EasyUI DataGrid为Excel

    在做一中考评项目的时候,遇到了这么一个需求.就是把评教后得到的老师的成绩导出为Excel.事实上需求非常普通.实现起来有些复杂.由于老师考评不但有固定的考核项,还有额外加分项.于是我们就抽出来了一个表 ...

  6. JS 导出Table为excel的三种可行方法

    [html] view plain copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  7. js导出table到excel,同时兼容FF和IE

    前台调用(第一个参数是table的id): <input value="导出" type="button" /> function toExcel( ...

  8. vue导出table内容至excel——转

    一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <template> <div c ...

  9. js实现table中前端搜索(模糊查询)

    项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下: ...

随机推荐

  1. java 关键字与保留字

    Java 关键字列表 (依字母排序 共51组),所有的关键字都是小写,在MyEclipse中都会显示不同的颜色: abstract, assert,boolean, break, byte, case ...

  2. ubuntu Ngin Install

    安装gcc g++的依赖库 #apt-get install build-essential #apt-get install libtool 安装 pcre依赖库 #sudo apt-get upd ...

  3. Kali linux 2016.2(Rolling)之 Nessus安装及Plugins Download Fail 解决方法

    最近,因科研需要,学习Nessus. Nessus是一款优秀的漏洞扫描软件,在其v6 HOME版本中在线更新漏洞插件不成功,采用离线更新,成功地更新了插件,在此将更新方法进行分享. 1.Nessus软 ...

  4. shiro英语

    Security Manager安全管理人员 Tutorial 辅导的 transient 短暂的 Cipher 密码 Memory 记忆 Access 访问Handy Hint 方便提示separa ...

  5. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  6. 分类(Category)的本质 及其与类扩展(Extension) /继承(Inherit)的区别

    1.分类的概念 分类是为了扩展系统类的方法而产生的一种方式,其作用就是在不修改原有类的基础上,为一个类扩展方法,最主要的是可以给系统类扩展我们自己定义的方法. 如何创建一个分类?↓↓ ()Cmd+N, ...

  7. SQL优化--使用 EXISTS 代替 IN 和 inner join来选择正确的执行计划

    在使用Exists时,如果能正确使用,有时会提高查询速度: 1,使用Exists代替inner join 2,使用Exists代替 in 1,使用Exists代替inner join例子: 在一般写s ...

  8. ABP(http://www.aspnetboilerplate.com/)下载初始化

    官网:http://www.aspnetboilerplate.com/ 下载 下载完成后用vs2015打开,是2015,低版本打开可能会出现一些问题 生成项目,Nuget会自动下载需要的类库 ABP ...

  9. PyCharm for Mac 调整字体大小

    网上的教程大多已过时,那个路径根本找不到,于是就有了本文. 前言 以前用 Sublime 时,直接快捷键CMD+[+/-](CMD加加号或减号)直接调整字体大小,非常方便,后来用 VSCode,字体大 ...

  10. apicloud图片上传

    app中的图片上传,例如:个人信息页面,上传头像 使用: UIMediaScanner 地址: https://docs.apicloud.com/Client-API/UI-Layout/UIMed ...