本文目錄一覽：
- 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如下
點擊導入按鈕，回調處理如下
新增的輔助函數如下
新增組件狀態如下
導入預覽效果如下
文檔
如有問題，歡迎評論指正哦~~
最後，還有個很重要的事情，點個贊再走吧，客官~~
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/219905.html
微信掃一掃 
支付寶掃一掃 