㈠ 怎麼用js將excel中的數據讀取後顯示到網頁中的表格
1、進入Internet屬性。
2、點擊安全。
3、選擇自定義級別。
4、把ActiveX控制項和插件下的所有選項都改成啟用。
5、伺服器生成html格式的Excel,然後設置
㈡ node.js解析excel大文件的問題
問題:使用 koa-bodyparser 可以解析post提交的問題,但是發現獲取不到formdata上傳的文件。
後經查資料,改用 koa-body 解決:
constkoaBody = require('koa-body'); app.use(koaBody({ multipart:true, formidable: { maxFileSize:200*1024*1024//設置上傳文件大小最大限制,默認2M} }))
然後就可以在 ctx.request.files 裡面獲取到上傳的 文件信息了。ctx.request.files 為一個對象,裡麵包含一個 file 欄位(為你前端上傳定義的值),值為文件信息,主要是文件name和path,path為臨時存儲路徑。
二、解析xlsx文件信息
主要使用模塊 node-xlsx :npm i xlsx --save
1、載入模塊
使用模塊:fs--主要用於寫入文件;node-xlsx主要用於轉換xlsx數據和讀取xlsx的文件數據;
constfs = require('fs')constxlsx = require('node-xlsx');//讀寫xlsx的插件
2、讀取功能
讀取功能相對簡單,直接使用模塊的 prase(路徑) 方法就能讀取
let list = xlsx.parse("./doc/hello.xlsx");
返回結果,name:表名,data:二維數組。(由於Excel以表格的形式表示,因此表格的數據都是通過二維數組進行接收。)
需要注意的是:data里的第一行數組為表頭的信息
[ { name:'firstSheet', data: [ [Array], [Array] ] }, { name:'secondSheet', data: [ [Array], [Array] ] } ]
3、寫入功能
寫入功能,對應的寫入數據與上面讀取功能的返回格式需要一致,以數組的形式,name:表名,data:二維數組(Excel每行每列的數據)
如下面代碼,生成一個Excel文件,分別兩張表,表名分別是firstSheet,secondSheet
let xlsxObj =[ { name:'firstSheet', data: [ [1,2,3], [4,5,6] ], }, { name:'secondSheet', data: [ [7,8,9], [10,1,12] ], } ]
生成Excel文件:
fs.writeFileSync(路徑,Buffer數據)
xlsx.build(xlsxObj) 會將數組轉換為Buffer數據
執行下面代碼就會生成對應的Excel文件
fs.writeFileSync('./doc/hello.xlsx', xlsx.build(xlsxObj),"binary")
㈢ JS讀取excel,獲取其中的單元格佔多少行/列
獲取行/列
var colcount=wb.Worksheets(1).UsedRange.Cells.Rows.Count ;
var colcolumn=wb.Worksheets(1).UsedRange.Columns.Count;
讀取本地Excel文件內容的javascript代碼:
<script type="text/javascript">
function read_excel(){
var filePath="D:\abcd9.com.xls"; //要讀取的xls
var sheet_id=2; //讀取第2個表
var row_start=3; //從第3行開始讀取
var tempStr='';
try{
var oXL = new ActiveXObject("Excel.application"); //創建Excel.Application對象
}catch(err)
{
alert(err);
}
var oWB = oXL.Workbooks.open(filePath);
oWB.worksheets(sheet_id).select();
var oSheet = oWB.ActiveSheet;
var colcount=oXL.Worksheets(sheet_id).UsedRange.Cells.Rows.Count ;
for(var i=row_start;i<=colcount;i++){
if (typeof(oSheet.Cells(i,8).value)=='date'){ //處理第8列部分單元格內容是日期格式時的讀取問題
d= new Date(oSheet.Cells(i,8).value);
temp_time=d.getFullYear()+"-"+(d.getMonth() + 1)+"-"+d.getDate();
}
else
temp_time=$.trim(oSheet.Cells(i,7).value.toString());
tempStr+=($.trim(oSheet.Cells(i,2).value)+" "+$.trim(oSheet.Cells(i,4).value)+" "+$.trim(oSheet.Cells(i,6).value.toString())+" "+temp_time+"\n");
//讀取第2、4、6、8列內容
}
return tempStr; //返回
oXL.Quit();
CollectGarbage();
}
</script>
㈣ js怎麼獲取 excel的數據
js怎麼獲取 excel的數據
在一個html頁面生成的時候,js就已經把dom樹創建好了
只要這棵樹上有的數據,我們都可以通過js來獲取使用
那麼這個問題就變成js如何去查詢dom樹的節點了
js內置了以下幾個查詢節點的方法
document.getElementById("id") //通過id來獲取一個dom元素
document.getElementsByName("name") //通過name屬性來獲取一個集合
document.getElementsByTagName("tag") //通過標簽來獲取一個集合
如果要查找的元素本身有id,通過第一個方法可以直接獲取,當我們得到了這個dom節點的時候就可以輸出他的一系列數據了
舉個栗子
var dom = document.getElementById("id");
//如果是圖片
alert(dom.src);
//如果該dom有class
alert(dom.className);
//如果該dom有value
alert(dom.value);
//如果該dom有文本
alert(dom.innerHTML);
//輸出dom的style
alert(dom.style.width);
//等等
當dom沒有id的時候,我們就要依靠一些條件去找到我們想要的dom了
//尋找所有class為bold的div
var c = document.getElementsByTagName("div"), len = c.length, r = [];
for(var i=0;i<len;i++){
if(c[i].className == 'bold'){
r.push(c[i]);
}
}
//當得到了這些dom節點後,就可以用上面提到的方法繼續訪問每個dom的數據啦
㈤ js宏怎麼打開指定excel文件就是有路徑
用dir把所有文件檢索出來,然後Workboooks.open打開就是了
㈥ 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導入報錯
將報錯文件一份,修改後放到assets目錄下
找到umijs的webpack配置文件,新增如下配置
增加文字顏色和首行高亮處理
增加輔助函數calculateWidth
增加輔助函數addHeadlineStyle
導出方式使用filesave
效果如下
導入
現在,我們來完成導入功能,並且導入後需要使用表格進行分頁預覽
新增modal彈窗,用作預覽界面
對應函數renderBody如下
對應函數renderButton如下
對應函數onPageChange如下
點擊導入按鈕,回調處理如下
新增的輔助函數如下
新增組件狀態如下
導入預覽效果如下
文檔
https://www.npmjs.com/package/xlsx-style
https://github.com/eligrey/FileSaver.js
https://www.npmjs.com/package/xlsx?activeTab=readme
如有問題,歡迎評論指正哦~~
最後,還有個很重要的事情,點個贊再走吧,客官~~
㈦ 怎麼用js將excel中的數據讀取後顯示到網頁中的表格
以前讀書的時候絕不會想到會用客戶端腳本來實現這些功能,現在卻一開始就要用上了,而且還覺得挺實用的。
參考《Windows腳本技術》,應該會有一點收獲。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<script language="javascript" type="text/javascript">
function importXLS(fileName)
{
objCon = new ActiveXObject("ADODB.Connection");
objCon.Provider = "Microsoft.Jet.OLEDB.4.0";
objCon.ConnectionString = "Data Source=" + fileName + ";Extended Properties=Excel 8.0;";
objCon.CursorLocation = 1;
objCon.Open;
var strQuery;
//Get the SheetName
var strSheetName = "Sheet1$";
var rsTemp = new ActiveXObject("ADODB.Recordset");
rsTemp = objCon.OpenSchema(20);
if(!rsTemp.EOF)
strSheetName = rsTemp.Fields("Table_Name").Value;
rsTemp = null
rsExcel = new ActiveXObject("ADODB.Recordset");
strQuery = "SELECT * FROM [" + strSheetName + "]";
rsExcel.ActiveConnection = objCon;
rsExcel.Open(strQuery);
while(!rsExcel.EOF)
{
for(i = 0;i<rsExcel.Fields.Count;++i)
{
alert(rsExcel.Fields(i).value);
}
rsExcel.MoveNext;
}
// Close the connection and dispose the file
objCon.Close;
objCon =null;
rsExcel = null;
}
</script>
</head>
<body>
<input type="file" id="f" />
<input type="button" id="b" value="import" onclick="if(f.value=='')alert('請選擇xls文件');else importXLS(f.value)" />
</body>
</html>
trackback:http://hi..com/netcorner/blog/item/4c35a818788f670635fa41d3.html
通過Javascript操作Excel
function AutomateExcel()
{
// Start Excel and get Application object.
var oXL = new ActiveXObject("Excel.Application");
oXL.Visible = true;
// Get a new workbook.
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
// Add table headers going cell by cell.
oSheet.Cells(1, 1).Value = "First Name";
oSheet.Cells(1, 2).Value = "Last Name";
oSheet.Cells(1, 3).Value = "Full Name";
oSheet.Cells(1, 4).Value = "Salary";
// Format A1:D1 as bold, vertical alignment = center.
oSheet.Range("A1", "D1").Font.Bold = true;
oSheet.Range("A1", "D1").VerticalAlignment = -4108; //xlVAlignCenter
// Create an array to set multiple values at once.
// Fill A2:B6 with an array of values (from VBScript).
oSheet.Range("A2", "B6").Value = CreateNamesArray();
// Fill C2:C6 with a relative formula (=A2 & " " & B2).
var oRng = oSheet.Range("C2", "C6");
oRng.Formula = "=A2 & " " & B2";
// Fill D2:D6 with a formula(=RAND()*100000) and apply format.
oRng = oSheet.Range("D2", "D6");
oRng.Formula = "=RAND()*100000";
oRng.NumberFormat = "$0.00";
// AutoFit columns A:D.
oRng = oSheet.Range("A1", "D1");
oRng.EntireColumn.AutoFit();
// Manipulate a variable number of columns for Quarterly Sales Data.
DispalyQuarterlySales(oSheet);
// Make sure Excel is visible and give the user control
// of Excel's lifetime.
oXL.Visible = true;
oXL.UserControl = true;
}
<HTML>
<HEAD>
<TITLE>將頁面中指定表格的數據導入到Excel中</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
function AutomateExcel()
{
var oXL = new ActiveXObject("Excel.Application"); //創建應該對象
var oWB = oXL.Workbooks.Add();//新建一個Excel工作簿
var oSheet = oWB.ActiveSheet;//指定要寫入內容的工作表為活動工作表
var table = document.all.data;//指定要寫入的數據源的id
var hang = table.rows.length;//取數據源行數
var lie = table.rows(0).cells.length;//取數據源列數
// Add table headers going cell by cell.
for (i=0;i<hang;i++){//在Excel中寫行
for (j=0;j<lie;j++){//在Excel中寫列
//定義格式
oSheet.Cells(i+1,j+1).NumberFormatLocal = "@";
//!!!!!!!上面這一句是將單元格的格式定義為文本
oSheet.Cells(i+1,j+1).Font.Bold = true;//加粗
oSheet.Cells(i+1,j+1).Font.Size = 10;//字體大小
oSheet.Cells(i+1,j+1).value = table.rows(i).cells(j).innerText;//向單元格寫入值
}
}
oXL.Visible = true;
oXL.UserControl = true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<table border="0" width="300" id="data" bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td>編號</td>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tr bgcolor="white">
<td>0001</td>
<td>張三</td>
<td>22</td>
<td>女</td>
</tr>
<tr bgcolor="white">
<td>0002</td>
<td>李四</td>
<td>23</td>
<td>男</td>
</tr>
</table>
<input type="button" name="out_excel" onclick="AutomateExcel();" value="導出到excel">
</BODY>
</HTML>
以前讀書的時候絕不會想到會用客戶端腳本來實現這些功能,現在卻一開始就要用上了,而且還覺得挺實用的。
參考《Windows腳本技術》,應該會有一點收獲。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<script language="javascript" type="text/javascript">
function importXLS(fileName)
{
objCon = new ActiveXObject("ADODB.Connection");
objCon.Provider = "Microsoft.Jet.OLEDB.4.0";
objCon.ConnectionString = "Data Source=" + fileName + ";Extended Properties=Excel 8.0;";
objCon.CursorLocation = 1;
objCon.Open;
var strQuery;
//Get the SheetName
var strSheetName = "Sheet1$";
var rsTemp = new ActiveXObject("ADODB.Recordset");
rsTemp = objCon.OpenSchema(20);
if(!rsTemp.EOF)
strSheetName = rsTemp.Fields("Table_Name").Value;
rsTemp = null
rsExcel = new ActiveXObject("ADODB.Recordset");
strQuery = "SELECT * FROM [" + strSheetName + "]";
rsExcel.ActiveConnection = objCon;
rsExcel.Open(strQuery);
while(!rsExcel.EOF)
{
for(i = 0;i<rsExcel.Fields.Count;++i)
{
alert(rsExcel.Fields(i).value);
}
rsExcel.MoveNext;
}
// Close the connection and dispose the file
objCon.Close;
objCon =null;
rsExcel = null;
}
</script>
</head>
<body>
<input type="file" id="f" />
<input type="button" id="b" value="import" onclick="if(f.value=='')alert('請選擇xls文件');else importXLS(f.value)" />
</body>
</html>
trackback:http://hi..com/netcorner/blog/item/4c35a818788f670635fa41d3.html
通過Javascript操作Excel
function AutomateExcel()
{
// Start Excel and get Application object.
var oXL = new ActiveXObject("Excel.Application");
oXL.Visible = true;
// Get a new workbook.
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
// Add table headers going cell by cell.
oSheet.Cells(1, 1).Value = "First Name";
oSheet.Cells(1, 2).Value = "Last Name";
oSheet.Cells(1, 3).Value = "Full Name";
oSheet.Cells(1, 4).Value = "Salary";
// Format A1:D1 as bold, vertical alignment = center.
oSheet.Range("A1", "D1").Font.Bold = true;
oSheet.Range("A1", "D1").VerticalAlignment = -4108; //xlVAlignCenter
// Create an array to set multiple values at once.
// Fill A2:B6 with an array of values (from VBScript).
oSheet.Range("A2", "B6").Value = CreateNamesArray();
// Fill C2:C6 with a relative formula (=A2 & " " & B2).
var oRng = oSheet.Range("C2", "C6");
oRng.Formula = "=A2 & " " & B2";
// Fill D2:D6 with a formula(=RAND()*100000) and apply format.
oRng = oSheet.Range("D2", "D6");
oRng.Formula = "=RAND()*100000";
oRng.NumberFormat = "$0.00";
// AutoFit columns A:D.
oRng = oSheet.Range("A1", "D1");
oRng.EntireColumn.AutoFit();
// Manipulate a variable number of columns for Quarterly Sales Data.
DispalyQuarterlySales(oSheet);
// Make sure Excel is visible and give the user control
// of Excel's lifetime.
oXL.Visible = true;
oXL.UserControl = true;
}
<HTML>
<HEAD>
<TITLE>將頁面中指定表格的數據導入到Excel中</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
function AutomateExcel()
{
var oXL = new ActiveXObject("Excel.Application"); //創建應該對象
var oWB = oXL.Workbooks.Add();//新建一個Excel工作簿
var oSheet = oWB.ActiveSheet;//指定要寫入內容的工作表為活動工作表
var table = document.all.data;//指定要寫入的數據源的id
var hang = table.rows.length;//取數據源行數
var lie = table.rows(0).cells.length;//取數據源列數
// Add table headers going cell by cell.
for (i=0;i<hang;i++){//在Excel中寫行
for (j=0;j<lie;j++){//在Excel中寫列
//定義格式
oSheet.Cells(i+1,j+1).NumberFormatLocal = "@";
//!!!!!!!上面這一句是將單元格的格式定義為文本
oSheet.Cells(i+1,j+1).Font.Bold = true;//加粗
oSheet.Cells(i+1,j+1).Font.Size = 10;//字體大小
oSheet.Cells(i+1,j+1).value = table.rows(i).cells(j).innerText;//向單元格寫入值
}
}
oXL.Visible = true;
oXL.UserControl = true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<table border="0" width="300" id="data" bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td>編號</td>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tr bgcolor="white">
<td>0001</td>
<td>張三</td>
<td>22</td>
<td>女</td>
</tr>
<tr bgcolor="white">
<td>0002</td>
<td>李四</td>
<td>23</td>
<td>男</td>
</tr>
</table>
<input type="button" name="out_excel" onclick="AutomateExcel();" value="導出到excel">
</BODY>
</HTML>
㈧ js讀取沒有表頭的excel
在Excel表格里,添上表頭。
第一,打開表格,點擊列印預覽。第二,除了第一頁外,都需要列印。第三,打開菜單欄里的頁面布局選項卡,點擊列印標題。第四,會彈出頁面設置對話框。第五,在列印標題下面有頂端標題行與左端標題列,點擊右邊小圖標。第六,選中的表格第一頁標題行,再點右邊的小圖標,確定,表頭就添加上了。