本文目录一览：
- 1、javascript如何将table导入excel
- 2、如何用js将excel表格导入成web页面格式代码
- 3、js 导 Excel
- 4、用javascript怎么实现把excel中的数据批量导入到数据库表中
- 5、js 将数据库查询出来的数据导入到excel中
- 6、react--使用js-xlsx实现excel文件的导入导出及预览
javascript如何将table导入excel
js导出excel和word都可以：
JavaScript导出Table到Word和Excel
// JavaScript Document
//js代码
//导出到excel
function AutomateExcel(tableid){
var elTable = document.getElementById(tableid); //要导出的table id。
var oRangeRef = document.body.createTextRange();
oRangeRef.moveToElementText(elTable);
oRangeRef.execCommand("Copy");
var appExcel = new ActiveXObject("Excel.Application");
appExcel.Workbooks.Add().Worksheets.Item(1).Paste();
appExcel.Visible = true;
appExcel = null;
}
//导出到word
//指定页面区域内容导入Word
function AllAreaWord(tableid)
{
var elTable = document.getElementById(tableid);
var sel = document.body.createTextRange();
sel.moveToElementText(elTable);
sel.execCommand("Copy");
var oWD = new ActiveXObject("Word.Application");
var oDC = oWD.Documents.Add("",0,1);
var orange =oDC.Range(0,1);
//sel.select();
orange.Paste();
oWD.Application.Visible = true;
oWD = null;
}
调用方法：
input name="word" type="button" value="导出到word" onclick="AllAreaWord('tableid');" / input name="excel" type="button" value="导出到excel" onclick="AutomateExcel('tableid');"/
如何用js将excel表格导入成web页面格式代码
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" ""
html xmlns=""
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: separate; text-align: center"
tr
td colspan="3"
从Excel中导入/td
/tr
tr
td colspan="3" style="text-align: left; height: 9px;"
/td
/tr
tr
td align="center" style="width: 20%;"
请选择Excel文件路径/td
td align="center" style="width: 483px; height: 18px; text-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: 483px; height: 18px; text-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: 483px; height: 18px;"
/td
td style="width: 243px; height: 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("scriptalert('请您选择Excel文件')/script ");
return; //当无文件时,返回
}
string IsXls = System.IO.Path.GetExtension(FileUpload1.FileName).ToString().ToLower();//System.IO.Path.GetExtension获得文件的扩展名
if (IsXls != ".xls")
{
Response.Write("scriptalert('只可以选择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 = 0; i AL_ExcelSheet.Count; i++)
{
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("scriptalert('Excel表为空表,无数据!')/script"); //当Excel表为空时,对用户进行提示
}
else
{
// 数据
GV_Excel.DataSource = dt;
GV_Excel.DataBind();
Response.Write("scriptalert('Excle表导入成功!');location='default.aspx'/script");
}
cn.Close();
}
}
注意：当导入的Excel文件中的内容很大时，将发生莫名的错误。因此导入的文件不能太大，一般少于5MB.
js 导 Excel
共分三步：
第一步：建立EXCEL.JS文件
＝＝＝＝文件的代码＝＝＝＝＝＝＝＝＝
var idTmr = "";
function copy(tabid)
{
var oControlRange = document.body.createControlRange();
oControlRange.add(tabid,0);
oControlRange.select();
document.execCommand("Copy");
}
function toExcel(tabid){
copy(tabid);
try
{
var xls = new ActiveXObject( "Excel.Application" );
}
catch(e)
{
alert( "Excel没有安装或浏览器设置不正确.请启用所有Active控件和插件");
return false;
}
xls.visible = true;
var xlBook = xls.Workbooks.Add;
var xlsheet = xlBook.Worksheets(1);
xlBook.Worksheets(1).Activate;
for(var i=0;itabid.rows(0).cells.length;i++){
xlsheet.Columns(i+1).ColumnWidth=15;
}
xlsheet.Paste;
xls=null;
idTmr = window.setInterval("Cleanup();",1);
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
第二步：在网页中引用EXCEL.JS，并声明一个表格ID
第三步：在网页中控件的ONCLICK事件中加入toExcel函数，将表格的ID作为参数传入
例如：
input type="button" onclick="toExcel(t1)"
table id="t1" //为表格声明一个ID
希望上面的信息能给你带来帮助
用javascript怎么实现把excel中的数据批量导入到数据库表中
利用jquery里的ocupload这个js组件，步骤和实现文件上传一样，将你要导入的excel表格进行上传到服务端，然后在工程里导入apache的poi这poi-ooxml以及poi-schemas这三个jar包，接受到文件对象后，利用里面的HSSWorkBook这个对象来解析excel里的每行数据，通过对应的数据类型对象添加到数据库里即可
js 将数据库查询出来的数据导入到excel中
创建数据库
选择开始菜单中→程序→【management
sql
server
2008】→【sql
server
management
studio】命令，打开【sql
server
management
studio】窗口，并使用windows或
sql
server身份验证建立连接。
在【对象资源管理器】窗口中展开服务器，然后选择【数据库】节点
右键单击【数据库】节点，从弹出来的快捷菜单中选择【新建数据库】命令。
执行上述操作后，会弹出【新建数据库】对话框。在对话框、左侧有3个选项，分别是【常规】、【选项】和【文件组】。完成这三个选项中的设置会后，就完成了数据库的创建工作，
在【数据库名称】文本框中输入要新建数据库的名称。例如，这里以“新建的数据库”。
在【所有者】文本框中输入新建数据库的所有者，如sa。根据数据库的使用情况，选择启用或者禁用【使用全文索引】复选框。
在【数据库文件】列表中包括两行，一行是数据库文件，而另一行是日记文件。通过单击下面的【添加】、【删除】按钮添加或删除数据库文件。
切换到【选项页】、在这里可以设置数据库的排序规则、恢复模式、兼容级别和其他属性。
切换到【文件组】页，在这里可以添加或删除文件组。
完成以上操作后，单击【确定】按钮关闭【新建数据库】对话框。至此“新建的数据”数据库创建成功。新建的数据库可以再【对象资源管理器】窗口看到。
react--使用js-xlsx实现excel文件的导入导出及预览
最近公司项目要求对之前后端excel操作做优化，需要放到前端来做。讲道理，我觉得没啥子必要，尤其是当我在官网导入一张5k+的excel时浏览器卡死后更是觉得需求之智障。但是没法子，还是要先自己做出来看看实际效果才行，我直接原地6个点......
导出
安装依赖
cnpm i xlsx --save
实现
定义公共组件Excel，该组件需要提供导出按钮，当点击时触发相应逻辑
组件可接收的参数如下
默认值如下
根据传入的type类型决定到底是显示导入、导出、预览按钮还是都显示
当点击导出按钮，触发回调
引入xlsx
导出逻辑
首先要做的就是校验是否用户自己实现了导出函数，以及传入的数据是否为数据且是否为空，由于不止导出要用，故放到untils中作公共函数，其他的辅助函数也从中导出
isVoid函数
getTable函数
getSheetHead函数
format函数
getCharCol函数
导出结果如下
改进
可能你也发现了，导出的结果是没有样式信息的,那么如何增加样式呢？答案是xlsx-style
安装依赖
cnpm i xlsx-style --save
npm install file-saver --save
xlsx-style导入报错
将报错文件copy一份，修改后放到assets目录下
找到umijs的webpack配置文件，新增如下配置
增加文字颜色和首行高亮处理
增加辅助函数calculateWidth
增加辅助函数addHeadlineStyle
导出方式使用filesave
效果如下
导入
现在，我们来完成导入功能，并且导入后需要使用表格进行分页预览
新增modal弹窗，用作预览界面
对应函数renderBody如下
对应函数renderButton如下
对应函数onPageChange如下
点击导入按钮，回调处理如下
新增的辅助函数如下
新增组件状态如下
导入预览效果如下
文档
如有问题，欢迎评论指正哦~~
最后，还有个很重要的事情，点个赞再走吧，客官~~