如何用js将excel表格导入成web页面格式代码

JavaScript020

如何用js将excel表格导入成web页面格式代码,第1张

1. 要正确的将Web客户端的Excel文件导入到服务器的数据库中,需要将客户端的Excel文件上传到服务器上。可以使用FileUpload控件完成。

2. Excel文件上传到服务器指定的目录中,这里假设是该站点的upfiles目录中。

3. 使用SQL语句从upfiles目录中的上传Excel文件中读取数据显示或写入数据库。

相关代码如下:

1. 前台文件:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="StudentInforInport.aspx.cs" Inherits="StudentInforInport" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<title>从Excel表中导入学生数据</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<table style="width: 96%border-collapse: separatetext-align: center">

<tr>

<td colspan="3">

从Excel中导入</td>

</tr>

<tr>

<td colspan="3" style="text-align: leftheight: 9px">

</td>

</tr>

<tr>

<td align="center" style="width: 20%">

请选择Excel文件路径</td>

<td align="center" style="width: 483pxheight: 18pxtext-align: left">

<asp:FileUpload ID="FileUpload1" runat="server" Width="555px" /></td>

<td align="center" style="width: 10%">

<asp:Button ID="Btn_Inport" runat="server" Text="导 入" OnClick="Btn_Inport_Click" /></td>

</tr>

<tr>

<td align="center">

请选择表名</td>

<td align="center" style="width: 483pxheight: 18pxtext-align: left">

<asp:DropDownList ID="DDList_Sheet" runat="server"></asp:DropDownList></td>

<td align="center">

</td>

</tr>

<tr>

<td colspan="3">

<asp:GridView ID="GV_Excel" runat="server" Height="133px" Width="100%">

</asp:GridView>

</td>

</tr>

<tr>

<td style="height: 18px">

</td>

<td style="width: 483pxheight: 18px">

</td>

<td style="width: 243pxheight: 18px">

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

2. 后台代码:

using System

using System.Data

using System.Configuration

using System.Collections

using System.Web

using System.Web.Security

using System.Web.UI

using System.Web.UI.WebControls

using System.Web.UI.WebControls.WebParts

using System.Web.UI.HtmlControls

using System.Data.OleDb

using System.Data.SqlClient

public partial class StudentInforInport : System.Web.UI.Page

{

string strConn = System.Configuration.ConfigurationManager.AppSettings["strconn"].ToString().Trim()//链接SQL数据库

protected void Page_Load(object sender, EventArgs e)

{

}

/// <summary>

/// 查询EXCEL电子表格添加到DATASET

/// </summary>

/// <param name="filenameurl">服务器路径</param>

/// <param name="table">表名</param>

/// <param name="SheetName">Sheet表名</param>

/// <returns>读取的DataSet </returns>

public DataSet ExecleDs(string filenameurl, string table, string SheetName)

{

string strConn = "Provider=Microsoft.Jet.OleDb.4.0" + "data source=" + filenameurl + "Extended Properties='Excel 8.0'"

OleDbConnection conn = new OleDbConnection(strConn)

conn.Open()

DataSet ds = new DataSet()

OleDbDataAdapter odda = new OleDbDataAdapter("select * from [" + SheetName + "]", conn)

odda.Fill(ds, table)

return ds

}

protected void Btn_Inport_Click(object sender, EventArgs e)

{

if (FileUpload1.HasFile == false) //HasFile用来检查FileUpload是否有指定文件

{

Response.Write("<script>alert('请您选择Excel文件')</script>")

return//当无文件时,返回

}

string IsXls = System.IO.Path.GetExtension(FileUpload1.FileName).ToString().ToLower()//System.IO.Path.GetExtension获得文件的扩展名

if (IsXls != ".xls")

{

Response.Write("<script>alert('只可以选择Excel文件')</script>")

return//当选择的不是Excel文件时,返回

}

string filename = DateTime.Now.ToString("yyyyMMddHHmmss") + FileUpload1.FileName// 获取Execle文件名 DateTime日期函数

string savePath = Server.MapPath(("~\\upfiles\\") + filename)//Server.MapPath 获得虚拟服务器相对路径

FileUpload1.SaveAs(savePath)//SaveAs 将上传的文件内容保存在服务器上

OperExcel Excel = new OperExcel()

ArrayList AL_ExcelSheet = new ArrayList()

AL_ExcelSheet = Excel.ExcelSheetName(savePath)

DDList_Sheet.Items.Clear()

for (int i = 0i <AL_ExcelSheet.Counti++)

{

DDList_Sheet.Items.Add( AL_ExcelSheet[i].ToString() )

}

SqlConnection cn = new SqlConnection(strConn)

cn.Open()

DataSet ds = ExecleDs(savePath, filename, DDList_Sheet.Items[0].ToString())//调用自定义方法得到数据

DataTable dt = ds.Tables[0]

if (dt.Rows.Count == 0)

{

Response.Write("<script>alert('Excel表为空表,无数据!')</script>")//当Excel表为空时,对用户进行提示

}

else

{

// 数据

GV_Excel.DataSource = dt

GV_Excel.DataBind()

Response.Write("<script>alert('Excle表导入成功!')location='default.aspx'</script>")

}

cn.Close()

}

}

注意:当导入的Excel文件中的内容很大时,将发生莫名的错误。因此导入的文件不能太大,一般少于5MB.

建议正常的WEB开发就可以,前端HTML,JS,CSS,后端Java或者.net都可以,数据库随便

需要将Excel表格生成网页的话,需要考虑一些第三方的Excel表格控件来集成到你的系统中用来在网页中显示Excel,比如:SpreadJS

关于你提出的几点问题:

1、这个只要能支持Excel导入,就能实现你的需求,SpreadJS有Excel导入功能

2、你说的其实都是Excel本身的设计风格,上面说的用一些第三方的类Excel表格控件集成到系统中去做页面的Excel表格展示就可以完全做到。SpreadJS就是将Excel的电子表格在网页中去显示,所以显示的效果完全跟Excel一样

3、是基本的填报需求,SpreadJS中的数据绑定就可以实现类似的效果,将需要填报的单元格用绑定绑定起来,然后就可以获取到用户填写的相关信息,这样在存入数据库就可以完成

4、这个就是Excel的导出功能,SpreadJS就可以导出Excel并且导出内容保持基本一致。

5、Spread支持IE9及以上,并兼容常用的chrome,firefox,safari等主流浏览器。

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/>