DIV CSS 佈局教程網

本人是在實際項目中摸索出，JS讀寫Excel（模板）數據，包括怎麼用JS把圖片插入Excel中。
首先，添加一個公用的模板地址JS，如下：
AddZDaddress.js
復制代碼 代碼如下:
///////////////////////////////////////////////////////////////////////////////////////////////////
////DocName:信任站點地址添加--AddZDaddress.js
////Author:lify
////Company:Wavenet
////Date:2009-11-04
////EditDate:2010-03-11
////MainContent:Findings,Ajax And So On;
//////////////////////////////////////////////////////////////////////////////////////////////////
var BelieveAddress='172.18.1.25/psc1';////配置地址配置程序時需要的配置地址
////**********************************Excel 導入到WEB界面模板地址集合*******************************************//
//////////////////////////飛行檢測excel模板地址配置/////////////////////////////////////////////////////////////
var template_path_FxjcExcelDatasIntoSqlDatas = "http://%22+believeaddress+%22/NewReports/xls_template/飛行檢測城鎮污水廠進出水主要污染物濃度.xls";
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////***********************************************************************************************************//
////*********************************Excel 錄入模板導入地址集合**********************************************//
//////////////////////////月報導入excel地址配置//////////////////////////////////
var template_path_month = "http://%22+believeaddress+%22/NewReports/xls_template/上海市污水處理企業生產運行表.xls";
/////////////////////////////////////////////////////////////////////////////////
//////////////////////////年報導入excel地址配置//////////////////////////////////
var template_path_year = "http://%22+believeaddress+%22/NewReports/xls_template/上海市污水處理設施信息表.xls";
////*********************************************************************************************************//
//圖片地址
var pic_path="http://%22+believeaddress+%22/NewReports/";
/////////////////////////////////////////////////////////////////////////////////

再次，怎麼樣把頁面數據讀取到Excel中JS，如下：
YearReportLuRu.jsYearReportLuRu.js
復制代碼 代碼如下:
////DocName:污水處理設施信息表(年報)-錄入報表--YearReportLuRu.js
////Author:lify
////Company:Wavenet
////Date:2009-08-14
////EditDate:2009-08-14
////MainContent:Findings,Ajax And So On;
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////添加正則表達式類/////////////////////////////////////////////////////////////
document.write("<script language=\"javascript\" type=\"text/javascript\" src=\"js/RegularExpression.js\"><\/script>");
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function AutomateExcel3()
{
//alert(pic_path+document.getElementById("ImgUrl").value);//測試
var xls = new ActiveXObject("Excel.Application");
xls.Visible = true;
var newBook = xls.Workbooks.Open(template_path_year);//這裡的Add方法裡的參數是模板的路徑
var oSheet=newBook.ActiveSheet;
////////////////////////////////////////////寫入數據到模板中////////////////////////////////////////////////////////////
///////////////法人單位名稱/////////////////////////////////////////////////////////////////////////////////////////////
oSheet.Cells(2,3).value = Trim(PT.rows[0].cells[1].innerText);
///////////////法人單位代碼以及代表姓名/////////////////////////////////////////////////////////////////////////////////////////////////
oSheet.Cells(2,9).value = Trim(PT.rows[0].cells[3].innerText);
oSheet.Cells(2,13).value = Trim(PT.rows[0].cells[5].innerText);
//////////////進出口三張表/////////////////////////////////////////////////////////////////////////////////////////
oSheet.Cells(3,2).value=Trim(PT.rows[1].cells[1].innerText);
oSheet.Cells(3,6).value=Trim(PT.rows[1].cells[3].innerText);
oSheet.Cells(3,8).value=Trim(PT.rows[1].cells[5].innerText);
oSheet.Cells(3,10).value=Trim(PT.rows[1].cells[7].innerText);
oSheet.Cells(3,13).value=Trim(PT.rows[1].cells[9].innerText);
oSheet.Cells(4,2).value=Trim(PT.rows[2].cells[1].innerText);
oSheet.Cells(4,4).value=Trim(PT.rows[2].cells[3].innerText);
oSheet.Cells(4,6).value=Trim(PT.rows[2].cells[5].innerText);
oSheet.Cells(4,8).value=Trim(PT.rows[2].cells[7].innerText);
oSheet.Cells(4,10).value=Trim(PT.rows[2].cells[9].innerText);
oSheet.Cells(4,12).value=Trim(PT.rows[2].cells[11].innerText);
oSheet.Cells(4,14).value=Trim(PT.rows[2].cells[13].innerText);
oSheet.Cells(5,2).value=Trim(PT.rows[3].cells[1].innerText);
oSheet.Cells(5,5).value=Trim(PT.rows[3].cells[3].innerText);
oSheet.Cells(5,8).value=Trim(PT.rows[3].cells[5].innerText);
oSheet.Cells(5,10).value=Trim(PT.rows[3].cells[7].innerText);
oSheet.Cells(5,12).value=Trim(PT.rows[3].cells[9].innerText);
oSheet.Cells(5,14).value=Trim(PT.rows[3].cells[11].innerText);
//////////////年運行簡況///////////////////////
oSheet.Cells(6,4).value = Trim(PT.rows[4].cells[3].innerText);
oSheet.Cells(6,6).value = Trim(PT.rows[4].cells[5].innerText);
oSheet.Cells(6,8).value = Trim(PT.rows[4].cells[7].innerText);
oSheet.Cells(6,10).value = Trim(PT.rows[4].cells[9].innerText);
oSheet.Cells(6,12).value = Trim(PT.rows[4].cells[11].innerText);
oSheet.Cells(6,14).value = Trim(PT.rows[4].cells[13].innerText);
oSheet.Cells(7,4).value = Trim(PT.rows[5].cells[2].innerText);
oSheet.Cells(7,6).value = Trim(PT.rows[5].cells[4].innerText);
oSheet.Cells(7,8).value = Trim(PT.rows[5].cells[6].innerText);
oSheet.Cells(7,10).value = Trim(PT.rows[5].cells[8].innerText);
oSheet.Cells(7,12).value = Trim(PT.rows[5].cells[10].innerText);
oSheet.Cells(7,14).value = Trim(PT.rows[5].cells[12].innerText);
//////////////年處理水量///////////////////////
oSheet.Cells(8,2).value = Trim(PT.rows[6].cells[1].innerText);
oSheet.Cells(8,5).value = Trim(PT.rows[6].cells[3].innerText);
oSheet.Cells(8,8).value = Trim(PT.rows[6].cells[5].innerText);
oSheet.Cells(8,11).value = Trim(PT.rows[6].cells[7].innerText);
oSheet.Cells(8,14).value = Trim(PT.rows[6].cells[9].innerText);
//////////////污水廠工藝概況///////////////////////
oSheet.Cells(10,3).value = Trim(PT.rows[8].cells[1].innerText);
oSheet.Cells(10,4).value = Trim(PT.rows[8].cells[2].innerText);
oSheet.Cells(10,5).value = Trim(PT.rows[8].cells[3].innerText);
oSheet.Cells(10,7).value = Trim(PT.rows[8].cells[4].innerText);
oSheet.Cells(11,3).value = Trim(PT.rows[9].cells[1].innerText);
oSheet.Cells(11,4).value = Trim(PT.rows[9].cells[2].innerText);
oSheet.Cells(11,5).value = Trim(PT.rows[9].cells[3].innerText);
oSheet.Cells(11,7).value = Trim(PT.rows[9].cells[4].innerText);
oSheet.Cells(12,3).value = Trim(PT.rows[10].cells[1].innerText);
oSheet.Cells(12,4).value = Trim(PT.rows[10].cells[2].innerText);
oSheet.Cells(12,5).value = Trim(PT.rows[10].cells[3].innerText);
oSheet.Cells(12,7).value = Trim(PT.rows[10].cells[4].innerText);
//--------------------------運行費用分析-------------------------------------//
oSheet.Cells(13,3).value = Trim(PT.rows[11].cells[2].innerText);
oSheet.Cells(13,5).value = Trim(PT.rows[11].cells[4].innerText);
oSheet.Cells(13,7).value = Trim(PT.rows[11].cells[6].innerText);
oSheet.Cells(13,9).value = Trim(PT.rows[11].cells[8].innerText);
////////////////////////////////廠外輸送泵站示意圖////////////////////////////
//copy(document.getElementById("ImgUrl"));
//oSheet.Pictures.Insert(pic_path+document.getElementById("ImgUrl").value);///////.Cells(13,11)
var msoShaoeRectangle = 1;//AddShape(透明度，左，上，寬度，高度)
oSheet.Shapes.AddShape(msoShaoeRectangle, 560, 330, 200, 150).Fill.UserPicture(pic_path+document.getElementById("ImgUrl").value);
//oSheet.Cell(13,11).select();//選中excel的單元格
//oSheet.Pictures.Insert(PT.rows[11].cells[8].getElementById("ImgUrl").src);
//////////////////////////////////////////////////////////////////////////////
oSheet.Cells(14,3).value = Trim(PT.rows[12].cells[1].innerText);
oSheet.Cells(14,5).value = Trim(PT.rows[12].cells[3].innerText);
oSheet.Cells(14,7).value = Trim(PT.rows[12].cells[5].innerText);
oSheet.Cells(14,9).value = Trim(PT.rows[12].cells[7].innerText);
oSheet.Cells(15,3).value = Trim(PT.rows[13].cells[1].innerText);
oSheet.Cells(15,5).value = Trim(PT.rows[13].cells[3].innerText);
oSheet.Cells(15,7).value = Trim(PT.rows[13].cells[5].innerText);
oSheet.Cells(15,9).value = Trim(PT.rows[13].cells[7].innerText);
oSheet.Cells(16,5).value = Trim(PT.rows[14].cells[1].innerText);
oSheet.Cells(16,7).value = Trim(PT.rows[14].cells[3].innerText);
oSheet.Cells(16,9).value = Trim(PT.rows[14].cells[5].innerText);
oSheet.Cells(17,3).value = Trim(PT.rows[15].cells[1].innerText);
oSheet.Cells(17,5).value = Trim(PT.rows[15].cells[3].innerText);
oSheet.Cells(17,7).value = Trim(PT.rows[15].cells[5].innerText);
//---------------------------------------------------------------------------//
//////////////污水廠表下方信息///////////////////////
oSheet.Cells(18,2).value = Trim(RT.rows[0].cells[1].innerText);
oSheet.Cells(18,7).value = Trim(RT.rows[0].cells[3].innerText);
oSheet.Cells(18,11).value = Trim(RT.rows[0].cells[5].innerText);
oSheet.Cells(18,14).value = Trim(RT.rows[0].cells[7].innerText);
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
xls.Visible = true;
xls.UserControl = true;
xls = null;
idTmr = window.setInterval("Cleanup();",1);
//xls.quit();
}
function Cleanup()
{
window.clearInterval(idTmr);
CollectGarbage();
}
function copy(tabid){
var oControlRange = document.body.createControlRange();
oControlRange.add(tabid,0);
oControlRange.select();
document.execCommand("Copy");
}

最後，如何讀取到Excel模板中數據到頁面上共客戶編輯數據再保存到數據庫中（此步可以用xml發送至後台交互，在此不進一步說明）JS，如下：
Fxjc_ExcelDatasIntoSqlDatas.js
復制代碼 代碼如下:
////DocName:導入模板數據功能--Fxjc_ExcelDatasIntoSqlDatas.js
////Author:lify
////Company:Wavenet
////Date:2010-03-12
////EditDate:2010-03-12
////MainContent:Findings,Ajax And So On;
//////////////////////////////////////////////////////////////////////////////////////////////////
var excelFileName=""; //本地EXCEL地址
var oWB;
var idTmr="";
function AutomateExcel3()
{
//刪除PT表的除前2行的所有行
DeleteTablePT();
//alert(pic_path+document.getElementById("ImgUrl").value);//測試
var xls=null;
var newBook;
try{
xls = new ActiveXObject("Excel.Application");
}catch(e){openBg(0);openTS(0);
alert("請您打開ActiveX控件，具體操作：單擊IE中的“工具”裡“Internet 選項”，單擊“安全”中的“自定義級別”中“ActiveX控件和插件”中，請選擇第三項為啟用即可。詳細錯誤："+e.message);
return ;
}
if (xls == null){openBg(0);openTS(0);
alert("創建Excel文件失敗,可能是您的計算機上沒有正確安裝Microsoft Office Excel軟件或浏覽器的安全級別設置過高!");
return;
}
try{
newBook = xls.Workbooks.Open(excelFileName);//這裡的Add方法裡的參數是模板的路徑
}catch(e){openBg(0);openTS(0);
alert("加載的Excel文件路徑有錯誤!詳細："+e.message);
return ;
}
var oSheet=newBook.ActiveSheet;
////////////////////////////////////////////模板寫入數據到WEB頁面中////////////////////////////////////////////////////////////
var xhnum=0;
//alert("oSheet.Cells(3,18).value="+oSheet.Cells(3,18).value+"|"+(oSheet.Cells(3,5).value=="<30")+"|oSheet.Cells(3,20).value="+oSheet.Cells(3,20).value);
for(var i=3;i<108;i++)
{
if(oSheet.Cells(i,1).value)
{
xhnum++;
var newRow = document.getElementById("PT").insertRow(-1);
var newCell;
newRow.align = "center";
newRow.height = "35px";
for(var j=0;j<28;j++)
{
if(j==4)
{
//什麼都不做
}
else if(j<4)
{
newCell = newRow.insertCell(j);
if(j==0) newCell.innerHTML = (xhnum).toString();//序號
else if(j==1)
{
if(!oSheet.Cells(i,1).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,1).value=="——"||oSheet.Cells(i,1).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,1).value==""?" ":oSheet.Cells(i,1).value);
}
else if(j==2)
{
if(!oSheet.Cells(i,2).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,2).value=="——"||oSheet.Cells(i,2).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,2).value==""?" ":oSheet.Cells(i,2).value);
//newCell.innerHTML = (oSheet.Cells(i,2).value==""?" ":oSheet.Cells(i,2).value);
}
else if(j==3)
{
if(!oSheet.Cells(i,4).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,4).value=="——"||oSheet.Cells(i,4).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,4).value==""?" ":oSheet.Cells(i,4).value);
//newCell.innerHTML = (oSheet.Cells(i,4).value==""?" ":oSheet.Cells(i,4).value);
}
else if(j==9)
{
if(!oSheet.Cells(i,j+1).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,j+1).value=="<30")
newCell.innerHTML = "30";
else if(oSheet.Cells(i,j+1).value=="——"||oSheet.Cells(i,j+1).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,j+1).value==""?" ":oSheet.Cells(i,j+1).value);
}
else
{
if(!oSheet.Cells(i,j+1).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,j+1).value=="<30")
newCell.innerHTML = "30";
else if(oSheet.Cells(i,j+1).value=="<DL")
newCell.innerHTML = " ";
else if(oSheet.Cells(i,j+1).value=="——"||oSheet.Cells(i,j+1).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,j+1).value==""?" ":oSheet.Cells(i,j+1).value);
}
}
else
{
newCell = newRow.insertCell(j-1);//少一個就可以了,少樣品編號插入
if(j==0) newCell.innerHTML = (xhnum).toString();//序號
else if(j==1)
{
if(!oSheet.Cells(i,1).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,1).value=="——"||oSheet.Cells(i,1).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,1).value==""?" ":oSheet.Cells(i,1).value);
}
else if(j==2)
{
if(!oSheet.Cells(i,2).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,2).value=="——"||oSheet.Cells(i,2).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,2).value==""?" ":oSheet.Cells(i,2).value);
//newCell.innerHTML = (oSheet.Cells(i,2).value==""?" ":oSheet.Cells(i,2).value);
}
else if(j==3)
{
if(!oSheet.Cells(i,4).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,4).value=="——"||oSheet.Cells(i,4).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,4).value==""?" ":oSheet.Cells(i,4).value);
//newCell.innerHTML = (oSheet.Cells(i,4).value==""?" ":oSheet.Cells(i,4).value);
}
else if(j==9)
{
if(!oSheet.Cells(i,j+1).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,j+1).value=="<30")
newCell.innerHTML = "30";
else if(oSheet.Cells(i,j+1).value=="——"||oSheet.Cells(i,j+1).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,j+1).value==""?" ":oSheet.Cells(i,j+1).value);
}
else
{
if(!oSheet.Cells(i,j+1).value)
newCell.innerHTML = " ";
else if(oSheet.Cells(i,j+1).value=="<30")
newCell.innerHTML = "30";
else if(oSheet.Cells(i,j+1).value=="<DL")
newCell.innerHTML = " ";
else if(oSheet.Cells(i,j+1).value=="——"||oSheet.Cells(i,j+1).value=="--")
newCell.innerHTML = " ";
else
newCell.innerHTML = (oSheet.Cells(i,j+1).value==""?" ":oSheet.Cells(i,j+1).value);
}
}
}
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
newBook.Close();
newBook=null;
xls = null;
openBg(0);openTS(0);
///////////////////////////////開啟編輯和保存按鈕功能///////////////////////////////////
OnOrOffBtn(1);
////////////////////////////////////////////////////////////////////////////////////////
idTmr = window.setInterval("Cleanup();",1);
////////////////////////////////表格數字和字符轉化//////////////////////////////////////
TableIntoDatas();////表格數字和字符轉化
////////////////////////////////////////////////////////////////////////////////////////
}

其實做報表很痛苦，但是從中也能經歷不少。很高興以此文章讓那些報表高手前來指導和拍磚。謝謝了！
以上為針對excel模板總結的一些方法，歡迎各位前來拍磚！也歡迎大家來交流交流！