使用Javascript将Excel表格数据转换成HTML

原生JS实现table数据,转化为EXCEL表格展现(下) input type="button" onclick="JSONToExcelConvertor(JSON_DATA.data,'统计表',JSON_DATA.title)"/> var data = [ {DriversName:"dragon",OrderDtae:"2017-01-01",BusinessNoAmount:"5",DeliverTotalAmount:"10 阅读详情

原理:根据Excel VBA的相关知识,对Excel COM组件中的相关对象进行引用,通过属性及方法,提取出转换成表格的相关信息,并通过Excel自身可以保存为HTML的功能分析其代码、属性样式,从而间接地得到生成的HTML

说明:客户机器需要安装Excel软件才能正常使用。

方法:

1.获取可用数据区域的起始行、列及终止行、列。

      也许你会说,我一个个开始循环,然后判断数据是否为空,也就是读到有无数据的临界点。但这样的方法不适应于多个数据区域以及起始的位置存在空的情况。

       最简单的方法是使用COM组件的数据区域UsedRange以及适用于UsedRangeAreas集合,每一个Area又相当于是Range对象。对于Range对象可以获取总行数与总列数,Range对象名.Rows.CountRange对象名.Columns.Count。起始行、列可以通过Range对象的地址来间接获取,我们可以使用Range对象名.Address得到形如“$A$1或“$B$2:$F$8这样的地址。前者是表示单一的单元格,后者表示一个区域以左上角与右下角的地址组成。我们可以通过分析这样的地址来得到区域的起始行与起始列,再通过总行数与总列数,知道终止行与列。

function getRow(Address)

{

       //$A$5

       var lastIndexOfDollar=-1;

       var firstIndexOfDollar=-1;

       var indexOfComma=-1;

       var row;

  firstIndexOfDollar=Address.indexOf('$');

  lastIndexOfDollar=Address.indexOf('$',firstIndexOfDollar+1);     

       indexOfComma=Address.indexOf(':');

       if(lastIndexOfDollar==firstIndexOfDollar) return 1;

       if(indexOfComma>lastIndexOfDollar+1) row=parseInt(Address.substring(lastIndexOfDollar+1,indexOfComma));

       else row=parseInt(Address.substring(lastIndexOfDollar+1));

       if(isNaN(row)) return 1;

       return row;

}

function getColumn(Address)

{

       //$A$5

       var lastIndexOfDollar=-1;

       var firstIndexOfDollar=-1;

       var columnMark="";

       var column=0;      

       firstIndexOfDollar=Address.indexOf('$');

       lastIndexOfDollar=Address.indexOf('$',firstIndexOfDollar+1);  

      

       if(lastIndexOfDollar==firstIndexOfDollar) return 1;

       columnMark=Address.substring(1,lastIndexOfDollar).toUpperCase();

       if(columnMark.length>2) return 1;

       for(var index=0;index<columnMark.length;index++)

       {  

              column=column*26+columnMark.charCodeAt(index)-64;

  }

       return column;

}

2.合并单元格区域的判断

我们通过上面的起始行、列与终止行、列,假设起始行、列分别为basicRowbasicColumn,终止行、列分别为endRow,endColumn

使用循环方式得到的区域(xlsWorkBook为工作簿),通过MergeArea得到地址,如果为区域引用($..$..:$..$..)则与直接通过行列映射的地址不同。然后根据区域的行数与列数知道合并了多少行、多少列。对于列,获取数据后可以跳过合并的列数减1for循环步长为1)。对于行,通过得到其上方单元格的地址,如果获取的地址与当前相同,说明仍然在同一合并单元格内,可跳过本次循环,进行该行其他列的读取操作。

var RangeArea=getMark(rowIndex,columnIndex);//getMark用于获取区域引用的地址

var MergeArea=xlsWorkBook.WorkSheets(sheetIndex).Range(RangeArea).MergeArea;

if(MergeArea.Address==getAddress(rowIndex,columnIndex))

{

  //当前单元格为单一单元格

}

else

{

  //当前单元格为拆分单元格

   var mergeRowCount=MergeArea.Rows.Count;

   var mergeColumnsCount=MergeArea.Columns.Count;

if(mergeRowCount>1&&rowIndex>1)

   {

     var upMergeArea=xlsWorkBook.WorkSheets(sheetIndex).Range(getMark(rowIndex-1,columnIndex)).MergeArea;

     if(upMergeArea.Address==MergeArea.Address) continue;                       

   }

    if(mergeColumnsCount>1) columnIndex+=mergeColumnsCount-1;

}

/*根据Excel行、列,返回区域标记*/

function getMark(column,row)

{

       //A...Z AA...AZ

       if(row<=26)

       {

              return String.fromCharCode(64+row)+column.toString();

       }

       return String.fromCharCode(64+row/26)+String.fromCharCode(64+row%26)+column.toString();

}

/*根据Excel行、列,返回引用地址*/

function getAddress(column,row)

{

       //A...Z AA...AZ

       if(row<=26)

       {

              return "$"+String.fromCharCode(64+row)+"$"+column.toString();

       }

       return "$"+String.fromCharCode(64+row/26)+String.fromCharCode(64+row%26)+"$"+column.toString();

}

function getRow(Address)

{

       //$A$5

       var lastIndexOfDollar=-1;

       var firstIndexOfDollar=-1;

       var indexOfComma=-1;

       var row;

  firstIndexOfDollar=Address.indexOf('$');

  lastIndexOfDollar=Address.indexOf('$',firstIndexOfDollar+1);     

       indexOfComma=Address.indexOf(':');

       if(lastIndexOfDollar==firstIndexOfDollar) return 1;

       if(indexOfComma>lastIndexOfDollar+1) row=parseInt(Address.substring(lastIndexOfDollar+1,indexOfComma));

       else row=parseInt(Address.substring(lastIndexOfDollar+1));

       if(isNaN(row)) return 1;

       return row;

}

3.相关属性

名称

VBA对应属性方法

对应CSS样式或标签属性

字体大小

expression.Font.Size

font-size:..pt;

字体斜体

expression.Font.Italic

font-style:italic;

字体粗体

expression.Font.Bold

font-weight:700;

字体下划线

expression.Font.Underline

text-decoration:underline; text-underline-style:single;

单元格背景色

expression.Interior.ColorIndex

background:RGB颜色值

上边框颜色

expression.Borders(xlEdgeTop).ColorIndex

border-top:.5pt solid RGB;

左边框颜色

expression.Borders(xlEdgeLeft).ColorIndex

border-left:.5pt solid RGB;

右边框颜色

expression.Borders(xlEdgeRight).ColorIndex

border-right:.5pt solid RGB;

下边框颜色

expression.Borders(xlEdgeBottom).ColorIndex

border-bottom:.5pt solid RGB;

水平对齐

expression.HorizontalAlignment

align=left right center

垂直对齐

expression.VerticalAlignment

valign=top middle bottom

单元格宽度

expression.Width

width:…pt

单元格高度

expression.Height

height:…pt

自动换行

expression.WrapText

<TD nowrap>(如果为True)

4.相关常量

  /*水平对齐方式*/

  var xlLeft = -4131;

  var xlRight = -4152;

  var xlCenter = -4108;

 

  var xlBottom = -4107 ;

  var xlTop = -4160;

  /*垂直对齐方式*/

  var xlVAlignBottom = -4107;

  var xlVAlignCenter = -4108;

  var xlVAlignTop = -4160;

  /*字体样式*/

  var isBold=false;

  var isItalic=false; 

  var isWrap=false;

  /*下划线*/

  var xlUnderlineStyleNone = -4142;

  var xlUnderlineStyleSingle = 2;

  var xlUnderlineStyleSingleAccounting = 4;

  var xlUnderlineStyleDouble = -4119 ;

  var xlUnderlineStyleDoubleAccounting = 5;

 /*边框*/

  var xlEdgeTop = 8;

  var xlEdgeLeft = 7;

  var xlEdgeRight = 10;

  var xlEdgeBottom = 9;

读取Excel文件转换html 1:实现了java读取excel数据 2:生html 立即下载

相关推荐

纯前端html+js实现exceljson格式

html+js实现,无需服务端。 可用于管理后台简单的批量导入数据到后台。 支持将excel表格中的数据直接转化json格式化

excel表格数据如果转换带css样式的网页表格

最近在写页面,文档里给的是excel表格的数据,要将excel表格里的数据放到页面里。 这里涉及到了一个excel转table的处理问题。 需要将Excel展现在Web界面中,对于一个不太懂技术的我来说简直不知道咋办法,于是就找资料 原来excel 是可以直接转table 网页的 然后试了下 发现不行,一点都不好看, 转换后的结果没一点样式。于是乎就想寻找一个可以转换excel变网页表格带css样式的工具 果然找到一个不错的推荐给大家: http://www.yzcopen.com/doc/ex

qishinihenhao的专栏 1877

ExcelHtml(一)-样式转化-CSS-border-style-属性

1、EXCEL CellStyle类:               public static final short BORDER_DASHED = 3;          public static final short BORDER_HAIR = 7;     public static final short BORDER_DOUBLE = 6;          public sta...

呼吸的小鱼博客 3978

ExcelHtml(四)-样式转化-CSS-border-width-属性

1、EXCEL CellStyle类: 语法: border-width : medium | thin | thick | length 参数: medium :  默认宽度 thin :  小于默认宽度 thick :  大于默认宽度 length :  由浮点数字和单位标识符组的长度值。不可为负值   public static final short BORDER_NONE = 0...

呼吸的小鱼博客 1290

这可能是全网最好用的ExcelHTML在线工具

本工具特点是对转换后的HTML和CSS代码进行优化,删除所有内联样式,并对css重复样式进行智能合并、去重,优化后的代码无需进行任何改动,即可直接用到项目中。

Lucky_Chen_的博客 1629

python:markdown表格文件转换为html文件

Markdown 表格 转换为 Html

aimersong69的博客 1803

js导出数据到excel

js导出数据到excel

flyxiaokang的博客 423

vue 前端导出页面级表格数据

1.安装插件 npm install xlsx file-saver -S npm install script-loader -S -D 2.创建js文件 utils/Export2Excel.js (可直接复制使用) /* eslint-disable */ import { saveAs } from 'file-saver' import XLSX from 'xlsx' function generateArray(table) { var out = []; var rows =

qq_41792905的博客 596

html表格导出为excel

原文转载 该功能下载的excel需要手动加上.xls后缀,研究解决办法中…

weixin_43581181的博客 415

简单的页面表格导出Excel

首先创建两个文件 FileSaver.js var saveAs=saveAs||"undefined"!==typeof navigator&&navigator.msSaveOrOpenBlob&&navigator.msSaveOrOpenBlob.bind(navigator)||function(a){"use strict";if("undefined"===typeof navigator||!/MSIE [1-9]\./.test(navigator.user

qq_43060570的博客 2337

JS导出EXCEL

/* * 默认转换实现函数,如果需要其他功能,需自行扩展* 参数:* tableID : HTML中Table对象id属性值* 详细用法参见以下 TableToExcel 对象定义 */function saveAsExcel(tableID){var tb = new TableToExcel(tableID);tb.setFontStyle("Courier New");tb.setFontS

程驰天下的专栏 3804

js、jq导出Excel表格文件

//FileName 生Excel文件名称 //ShowLabel 生Excel文件列标题 //JSONData 生Excel文件内容 function toExcel(FileName, ShowLabel, JSONData) { //先转化json var arrData = typeof JSONData != 'object' ? JSON.parse(JS...

小二的博客 4139

JSON数据导出Excel

JSON数据导出Excel表 应老板要求写了一个实用的小功能,需求是将api接口返回的JSON数据导出Excel表,过程中改了两稿,一是前端js直接导出一个表,另一是分门别类在java中同时导出多个表(例:如输入某公司,将各部门各人员的具体信息导出,分多张表,不同部门存放不同表): JS写法 JAVA写法 JS写法 话不多说,直接上代码! 代码块 json数据转exce...

Dlog的博客 9844

easyui的datagrid导出为excel

实现easyui的datagrid导出为excel 标签: easyuidatagrid导出excel 2014-11-14 15:56 20843人阅读 评论(6) 收藏 举报  分类:   Asp.Net(24)  C#(58)  jQuery EasyUI(22)      之前天智海网络有介绍过如何实现easyui里datagrid内容的

springflower66的博客 554

htmljs导出excel表格数据,js 实现纯前端将数据导出excel

使用table标签方式将json导出xls文件导出function tableToExcel(){//要导出的json数据const jsonData = [{name:‘路人甲‘,phone:‘123456‘,email:[emailprotected]},{name:‘炮灰乙‘,phone:‘123456‘,email:[emailprotected]},{name:‘土匪丙‘,phone...

weixin_36388201的博客 374

Export2Excel.js

el-button v-if="tableShowData.length>0" type="primary" size="small" @click="handleDownload(tableCols, tableShowData, filename)">导出</el-button><el-input v-model="searchText" placeholder="请输入内容" size="small" clearable class="ctl-input" />/*再判断是否为中文*/

qq_34114535的博客 735
上一篇: OpenSchema ActiveXObject
下一篇: 使用Javascript将Excel表格数据转换成HTML
simplebg
博客等级 码龄18年 0粉丝 32原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值