怎么用js将excel中的数据读取后显示到网页中的表格？

JavaScript023

怎么用js将excel中的数据读取后显示到网页中的表格？,第1张

1、进入Internet属性。

2、点击安全。

3、选择自定义级别。

4、把ActiveX控件和插件下的所有选项都改成启用。

5、服务器生成html格式的Excel，然后设置

后台管理的功能：

1、需要将excel表格中的数据一次性复制到html table中

2、点击提交按钮，将table中的数据提交到服务器端进行处理。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=GBK">

<script src="http://code.jquery.com/jquery-1.7.1.min.js" language="javascript"></script>

<style type="text/css">

body{

background-color: white

margin: 0

padding: 0

}

table {

width:95%

padding: 0

margin-left:30px

text-align: center

}

th {

font: 15px "trebuchet ms", '楷体_GB2312'

color: #4f6b72

border-right: 1px dashed #c1dad7

border-bottom: 1px dashed #c1dad7

border-top: 1px dashed #c1dad7

letter-spacing: 2px

text-transform: uppercase

background: #cae8ea

margin: 0

}

td {

border-right: 1px dashed #c1dad7

border-top: 1px dashed #c1dad7

border-bottom: 1px dashed #c1dad7

background: #fff

font-size:12px

color: #4f6b72

margin: 0

}

.btn_03{

background-attachment: scroll

background-clip: border-box

background-color:  #cae8ea

background-origin: padding-box

background-size: auto auto

width: 65px

}

.error{

width: 12%

vertical-align: top

}

input{

padding: 0

margin: 0

border: 0

background: white

width: 100%

height:100%

}

</style>

</head>

<br/>

先去了解下服务端模版吧，用服务端模版写动态页，比js容易。是什么模版与你用的服务端语言及框架有关，肯定都有

当然用js也可以，得用ajax获取数据，然后js渲染到页面中

服务端代码读取excel，和操作数据库差不多

然后用服务端模版写到页面中即可，table标签行合并rowspan（写在td属性中，rowspan="2"表示该单元格占两行），列合并colspan（写法同行合并，rowspan="2"表示该单元格占两列）

--------------------------------------------------------

我建议你还是通过后台来处理，用JS的话，客户端压力太大，容易导致内存溢出，浏览器崩溃。

我用Java语言，通过jxl以及poi两种API给你写了例子，分别是用jxl读写excel文件，用poi读写excel文件。希望对你有帮助。（需要下载jxl和poi的jar包）

import java.io.FileInputStream

import java.io.FileOutputStream

import java.io.IOException

import java.util.ArrayList

import java.util.HashMap

import java.util.List

import java.util.Map

import jxl.Cell

import jxl.Sheet

import jxl.Workbook

import jxl.format.Colour

import jxl.format.UnderlineStyle

import jxl.write.Label

import jxl.write.WritableCellFormat

import jxl.write.WritableFont

import jxl.write.WritableSheet

import jxl.write.WritableWorkbook

import org.apache.poi.hssf.usermodel.HSSFCell

import org.apache.poi.hssf.usermodel.HSSFRichTextString

import org.apache.poi.hssf.usermodel.HSSFRow

import org.apache.poi.hssf.usermodel.HSSFSheet

import org.apache.poi.hssf.usermodel.HSSFWorkbook

import org.apache.poi.poifs.filesystem.POIFSFileSystem

public class ExcelUtil {

/**

* @param args

* @throws IOException

*/

public static void main(String[] args) throws IOException {

String outFile = "D:/workspace/JavaStudy/src/util/excel/test.xls"

ExcelUtil.writeExcelByJXL(outFile, null)

}

/**

*

* @title: readExcelByJXL

* @description: 通过jxl读取excel文件

* @author yu ren tian

* @email yurentian@163.com

* @param excelFile

* @return

* @throws IOException

*/

private static List readExcelByJXL(String excelFile) throws IOException {

List rtn = new ArrayList()

FileInputStream fileInputStream = null

try {

fileInputStream = new FileInputStream(excelFile)

Workbook excelWorkBook = Workbook.getWorkbook(fileInputStream)

Sheet sheet = excelWorkBook.getSheet(0)

int m = sheet.getRows()

int n = sheet.getColumns()

for (int i = 1i <mi++) {

Map map = new HashMap()

for (int j = 0j <nj++) {

Cell cell = sheet.getCell(j, i)

String cellContent = cell.getContents()

switch (j) {

case 0:

map.put("studentName", cellContent)

break

case 1:

map.put("Chinese", cellContent)

break

case 2:

map.put("Math", cellContent)

break

case 3:

map.put("English", cellContent)

break

case 4:

map.put("assess", cellContent)

break

}

}

rtn.add(map)

}

} catch (Exception e) {

e.printStackTrace()

} finally {

if (null != fileInputStream) {

fileInputStream.close()

}

return rtn

}

}

/**

*

* @title: writeExcelByJXL

* @description: 通过jxl写入excel文件

* @author yu ren tian

* @email yurentian@163.com

* @param outFile

* @param list

* @throws IOException

*/

private static void writeExcelByJXL(String outFile, List list)

throws IOException {

WritableWorkbook wwb

FileOutputStream fos

try {

fos = new FileOutputStream(outFile)

// wwb = Workbook.createWorkbook(file)

wwb = Workbook.createWorkbook(fos)

WritableSheet sheet = wwb.createSheet("test", 0)

// 设置单元格的文字格式

WritableFont wf = new WritableFont(WritableFont.ARIAL, 12,

WritableFont.NO_BOLD, false, UnderlineStyle.NO_UNDERLINE,

Colour.BLUE)

WritableCellFormat wcf = new WritableCellFormat(wf)

//wcf.setBackground(Colour.GREEN)

wcf.setBackground(new CustomColor(11, "", 0, 0, 0))

for (int i = 0i <10i++) {

Label label = new Label(i, 0, i + "", wcf)

sheet.addCell(label)

}

wwb.write()

wwb.close()

fos.close()

} catch (Exception e) {

e.printStackTrace()

}

}

/**

*

* @title: readExcelByPOI

* @description: 通过poi读取excel文件

* @author yu ren tian

* @email yurentian@163.com

* @param excelFile

* @return

* @throws IOException

*/

private static List readExcelByPOI(String excelFile) throws IOException {

List rtn = new ArrayList()

FileInputStream fin = null

try {

fin = new FileInputStream(excelFile)

POIFSFileSystem fs = new POIFSFileSystem(fin)

HSSFWorkbook wb = new HSSFWorkbook(fs)

HSSFSheet sheet = wb.getSheetAt(0)

int m = sheet.getLastRowNum() - sheet.getFirstRowNum() + 1

int n = 5

for (int i = 1i <mi++) {

Map map = new HashMap()

for (int j = 0j <nj++) {

HSSFCell cell = sheet.getRow(i).getCell((short) j)

int type = cell.getCellType()

String cellContentString = null

double cellContentDouble = 0

if (type == 1) {

cellContentString = cell.getRichStringCellValue()

.getString()

System.out.println("cellContentString="

+ cellContentString)

} else if (type == 0) {

cellContentDouble = cell.getNumericCellValue()

System.out.println("cellContentDouble="

+ cellContentDouble)

}

System.out.println("j=" + j)

switch (j) {

case 0:

map.put("studentName", cellContentString)

break

case 1:

map.put("Chinese", new Double(cellContentDouble))

break

case 2:

map.put("Math", new Double(cellContentDouble))

break

case 3:

map.put("English", new Double(cellContentDouble))

break

case 4:

map.put("assess", cellContentString)

break

}

}

}

} catch (Exception e) {

e.printStackTrace()

} finally {

if (fin != null) {

fin.close()

}

return rtn

}

}

/**

*

* @title: writeExcelByPOI

* @description: 通过poi写入excel

* @author yu ren tian

* @email yurentian@163.com

* @param outFile

* @param list

* @throws IOException

*/

private static void writeExcelByPOI(String outFile, List list)

throws IOException {

FileOutputStream fos = new FileOutputStream(outFile)

HSSFWorkbook wb = new HSSFWorkbook()

for (int sheetCount = 0sheetCount <5sheetCount++) {

HSSFSheet sheet = wb.createSheet("组织" + (sheetCount + 1))

for (int rowCount = 0rowCount <10rowCount++) {

for (int columnCount = 0columnCount <10columnCount++) {

HSSFRow row = sheet.createRow(rowCount)

HSSFCell cell = row.createCell(new Short(columnCount + ""))

HSSFRichTextString richTextString = new HSSFRichTextString(

"行=" + rowCount + " 列=" + columnCount)

cell.setCellValue(richTextString)

}

}

}

wb.write(fos)

}

}

--------------------------------------------------------