❶ 輸入框校驗點
例：電話號碼輸入框：
1）正春圓則校驗11位數字，且第一位以1開頭，且第二位大於2
2）不允許輸入非數字類型的任何（耐讓包含回車、空格、特殊字元）內容
3）需要對非法字元做檢驗，並做提示框信息提示：提示文案越詳細越好
4）校驗復制粘貼操作，是否能輸入非法字昌森局符
5）建議這些校驗規則在server端和前端同時進行處理
6）根據具體交互規則在做相應調整
❷ 求前端驗證js代碼
這是一般表單中會用到的 1. 長度限制
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert(」不能超過50個字元！」);
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit=」return test()」>
<textarea name=」b」 cols=」40″ wrap=」VIRTUAL」 rows=」6″></textarea>
<input type=」submit」 name=」Submit」 value=」check」>
</form>
2. 只能是漢字
<input onkeyup=」value=」/oblog/value.replace(/[^\u4E00-\u9FA5]/g,」)」>
3.」 只能是英文
<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>
<input onkeydown=」onlyEng();」>
4. 只能是數字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考慮小鍵盤上的數字鍵
event.returnvalue=false;
}
</script>
<input onkeydown=」onlyNum();」>
5. 只能是英文字元和數字
<input onkeyup=」value=」/oblog/value.replace(/[\W]/g,」」) 「onbeforepaste=」clipboardData.setData(』text』,clipboardData.getData(』text』).replace(/[^\d]/g,」))」>
6. 驗證郵箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert(」oh」);
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>
7. 屏蔽關鍵字(這里屏蔽***和****)
<script language=」javascript1.2″>
function test() {
if((a.b.value.indexOf (」***」) == 0)||(a.b.value.indexOf (」****」) == 0)){
alert(」:)」);
a.b.focus();
return false;}
}
</script>
<form name=a onsubmit=」return test()」>
<input type=text name=b>
<input type=」submit」 name=」Submit」 value=」check」>
</form>
8. 兩次輸入密碼是否相同
<FORM METHOD=POST ACTION=」">
<input type=」password」 id=」input1″>
<input type=」password」 id=」input2″>
<input type=」button」 value=」test」 onclick=」check()」>
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert(」false」)
input1.value = 「」;
input2.value = 「」;
}
else document.forms[0].submit();
}
}
</script>
夠了吧 :)
屏蔽右鍵 很酷
oncontextmenu=」return false」 ondragstart=」return false」 onselectstart=」return false」
加在body中
二
2.1 表單項不能為空
<script language=」javascript」>
<!–
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert(」請輸入您姓名!」);
document.form.name.focus();
return false;
}
return true;
}
–>
</script>
2.2 比較兩個表單項的值是否相同
<script language=」javascript」>
<!–
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert(」您兩次輸入的密碼不一樣！請重新輸入.」);
document.ADDUser.PWD.focus();
return false;
}
return true;
}
–>
</script>
2.3 表單項只能為數字和」_」,用於電話/銀行帳號驗證上,可擴展到域名注冊等
<script language=」javascript」>
<!–
function isNumber(String)
{
var Letters = 」1234567890-」; //可以自己增加可輸入值
var i;
var c;
if(String.charAt( 0 )==』-')
return false;
if( String.charAt( String.length - 1 ) == 』-』 )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert(」您的電話號碼不合法！」);
document.form.TEL.focus();
return false;
}
return true;
}
–>
</script>
2.4 表單項輸入數值/長度限定
<script language=」javascript」>
<!–
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert(」輸入數值不能小於零大於100!」);
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)
{
alert(」輸入文字小於10!」);
document.form.MESSAGE.focus();
return false;
}
return true;
}
//–>
</script>
2.5 中文/英文/數字/郵件地址合法性判斷
<SCRIPT LANGUAGE=」javascript」>
<!–
function isEnglish(name) //英文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}
function isChinese(name) //中文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E-mail值檢測
{
if(! isEnglish(name))
return false;
i = name.indexOf(」 at 」);
j = name dot lastIndexOf(」 at 」);
if(i == -1)
return false;
if(i != j)
return false;
if(i == name dot length)
return false;
return true;
}
function isNumber(name) //數值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < 」0″ || name.charAt(i) > 」9″)
return false;
}
return true;
}
function CheckForm()
{
if(! isMail(form.Email.value)) {
alert(」您的電子郵件不合法！」);
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) {
alert(」英文名不合法！」);
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) {
alert(」中文名不合法！」);
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert(」郵政編碼不合法！」);
form.PublicZipCode.focus();
return false;
}
return true;
}
//–>
</SCRIPT>
2.6 限定表單項不能輸入的字元
<script language=」javascript」>
<!–
function contain(str,charset)// 字元串包含測試函數
{
var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}
function CheckForm()
{
if ((contain(document.form.NAME.value, 」%\(\)><」)) || (contain(document.form.MESSAGE.value, 」%\(\)><」)))
{
alert(」輸入了非法字元」);
document.form.NAME.focus();
return false;
}
return true;
}
//–>
</script>
1. 檢查一段字元串是否全由數字組成
—————————————
<script language=」Javascript」><!–
function checkNum(str){return str.match(/\D/)==null}
alert(checkNum(」1232142141″))
alert(checkNum(」123214214a1″))
// –></script>
2. 怎麼判斷是否是字元
—————————————
if (/[^\x00-\xff]/g.test(s)) alert(」含有漢字」);
else alert(」全是字元」);
3. 怎麼判斷是否含有漢字
—————————————
if (escape(str).indexOf(」%u」)!=-1) alert(」含有漢字」);
else alert(」全是字元」);
4. 郵箱格式驗證
—————————————
//函數名：chkemail
//功能介紹：檢查是否為Email Address
//參數說明：要檢查的字元串
//返回值：0：不是 1：是
function chkemail(a)
{ var i=a.length;
var temp = a.indexOf(』@');
var tempd = a.indexOf(』.');
if (temp > 1) {
if ((i-temp) > 3){
if ((i-tempd)>0){
return 1;
}
}
}
return 0;
}
5. 數字格式驗證
—————————————
//函數名：fucCheckNUM
//功能介紹：檢查是否為數字
//參數說明：要檢查的數字
//返回值：1為是數字，0為不是數字
function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp=」0123456789″;
if ( NUM.length== 0)
return 0
for (i=0;i<NUM.length;i++)
{
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//說明有字元不是數字
return 0;
}
}
//說明是數字
return 1;
}
6. 電話號碼格式驗證
—————————————
//函數名：fucCheckTEL
//功能介紹：檢查是否為電話號碼
//參數說明：要檢查的字元串
//返回值：1為是合法，0為不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp=」0123456789-()# 「;
for (i=0;i<TEL.length;i++)
{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//說明有字元不合法
return 0;
}
}
//說明合法
return 1;
}
7. 判斷輸入是否為中文的函數
—————————————
function ischinese(s){
var ret=true;
for(var i=0;i<s.length;i++)
ret=ret && (s.charCodeAt(i)>=10000);
return ret;
}
8. 綜合的判斷用戶輸入的合法性的函數
—————————————
<script language=」javascript」>
//限制輸入字元的位數開始
//m是用戶輸入，n是要限制的位數
function issmall(m,n)
{
if ((m<n) && (m>0))
{
return(false);
}
else
{return(true);}
}
9. 判斷密碼是否輸入一致
—————————————
function issame(str1,str2)
{
if (str1==str2)
{return(true);}
else
{return(false);}
}
10. 判斷用戶名是否為數字字母下滑線
—————————————
function notchinese(str){
var reg=/[^A-Za-z0-9_]/g
if (reg.test(str)){
return (false);
}else{
return(true); }
}
2.8. form文本域的通用校驗函數
—————————————
作用：檢測所有必須非空的input文本，比如姓名，賬號，郵件地址等等。
該校驗現在只針對文本域，如果要針對form裡面的其他域對象，可以改變判斷條件。
使用方法：在要檢測的文本域中加入title文字。文字是在提示信息，你要提示給用戶的該欄位的中文名。比如要檢測用戶名
html如下<input name=」txt_1″ title=」姓名」>,當然，最好用可視化工具比如dreamweaver什麼的來編輯域。
如果要檢測數字類型數據的話，再把域的id統一為sz.
javascript判斷日期類型比較麻煩，所以就沒有做日期類型校驗的程序了.高手可以補充。
程序比較草，只是提供一個思路。拋磚引玉！ ：）
哦，對了，函數調用方法：
< form onsubmit=」return dovalidate()」>
function dovalidate()
{
fm=document.forms[0] //只檢測一個form,如果是多個可以改變判斷條件
for(i=0;i<fm.length;i++)
{
//檢測判斷條件，根據類型不同可以修改
if(fm[i].tagName.toUpperCase()==」INPUT」 &&fm[i].type.toUpperCase()==」TEXT」 && (fm[i].title!=」"))
if(fm[i].value=」/blog/=」")//
{
str_warn1=fm[i].title+」不能為空!」;
alert(str_warn1);
fm[i].focus();
return false;
}
if(fm[i].id.toUpperCase()==」SZ」)//數字校驗
{
if(isNaN(fm[i].value))
{ str_warn2=fm[i].title+」格式不對」;
alert(str_warn2);
fm[i].focus();
return false;
}
}
}
return true;
}
❸ Jquery.validate.js實現前端表單驗證
jquery.validate.js表單驗證
官方網站： http://bassistance.de/jquery-plugins/jquery-plugin-validation/
API: http://jquery.bassistance.de/api-browser/plugins.html
當前版本：1.5.5
需要JQuery版本：1.2.6+, 兼容 1.3.2
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
(1)required:true 必輸欄位
(2)remote:"check.php" 使用ajax方法調用check.php驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件
(4)url:true 必須輸入正確格式的網址
(5)date:true 必須配銷輸入正確格式的日期
(6)dateISO:true 必須輸入正確格式的日森賣拍期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true 必須輸入合法的數字(負數，小數)
(8)digits:true 必須輸入整數
(9)creditcard: 必須輸入合法的信用卡號
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法後綴名的字元串（上傳文件的後綴）
(12)maxlength:5 輸入長度最多是5的字元串(漢字算一個字元)
(13)minlength:10 輸入長度最小是此羨10的字元串(漢字算一個字元)
(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字元串")(漢字算一個字元)
(15)range:[5,10] 輸入值必須介於 5 和 10 之間
(16)max:5 輸入值不能大於5
(17)min:10 輸入值不能小於10
例子：自定義密碼驗證的規則
❹ 前端規范一（命名規范）
前端規范一（命名規范）
1、小駝峰命名法（lowerCamelCase） ：第一個單詞以小寫字母開始，第二個單詞的首字母大寫，例如：firstName、lastName。
2、大駝峰命名法（CamelCase） ：每一個單詞的首字母都採用大寫字母，例如：FirstName、LastName。
3、下劃線命名法（snake_case）：下劃線命名法也叫蛇形法，全由小寫字母和下劃線組成，在兩個單詞之間用下滑線連接。例如：first_name。
4、中劃線命名法（kebab-case）：中劃線命名法也叫串式命名法，各個單詞之間通過下劃線「-」連接。例如：first-name。
強制使用：中劃線命名法
命名規則：1、文件名不得含有空格
2、文件名建議只使用小寫字母，不使用大寫字母
3、文件名包含多個單詞時，單詞之間建議連詞線 ( - ) 分隔
4、有復數結構式，要使用復數
示例：login 、 error-page、 icons
強制使用：全部大寫字母
為了醒目，某些說明文件的文件名，可以使用大寫字母
示例：README
補充說明: README 標准
◎ 項目簡介。
◎ 注意事項。
◎ 線上的示例地址（測試、正式）。
◎ 支持運行的環境。
◎ 必要的依賴准備，以及如何搭建。
◎ 項目的安裝指南。
◎ 相關的文檔鏈接。
◎ 相關人員的聯系方式。
README.md 示例：
強制使用：小駝峰命名法
命名規則：前綴為動詞，見名知意
1、onXxx 監聽事件的回調
2、handleXxx 處理事件
3、getXxx 獲取某個值
4、setXxx 設置某個值
常見場景：
a、事件處理：
(1).事件主動監聽採用 onXxx ,被動處理使用handleXxx
示例：onXxxSubmit: '提交表單'
handleXxxSizeChange: '處理分頁頁數改變'
handleXxxPageChange: '處理分頁每頁大小改變'
onXxxKeydown: '按下鍵'
(2). 其他命名：元素+click、 元素+change、select+范圍
示例：selectAllXxx: '選擇所有'
xxxCellClick: '當某個單元格被點擊時會觸發該事件'
xxxSortChange: '當表格的排序條件發生變化的時候會觸發該事件'
b、增刪改查處理：
增: addXxx 添加子項
createXxx 創建大項
刪: deleteXxx 真刪除
removeXxx 偽刪除
改：updateXxx
查: getXxx 獲取原始數據需要修改
fetchXxx 原始數據
示例：getUserList: '獲取用戶列表', fetchToken: '取得Token', deleteUser: '刪除用戶', removeTag: '移除標簽', updateUserInfo: '更新用戶信息', addUser: '添加用戶', createAccount: '創建賬戶'
c、API介面函數：
get: getXxxApi
post: postXxxApi
patch: patchXxxApi
delect: delectXxxApi
域名：xxxUrl
一般屬性變數 強制使用：小駝峰命名法
1、布爾值
命名規則：前綴為判斷性動詞
hasXxx 判斷是否含有某個值。true：含有此值； false：不含有此值
isXxx 判斷是否為某個值。true：為某個值； false：不為某個值
示例：isShow: '是否顯示', isLoading: '是否處於載入中'， hasToken: '是否包含Token',
2、數組命名
命名規則：使用名詞+List組合
示例: userList: '用戶列表'
3、私有屬性變數
命名規則：前綴為下劃線(_)後面和變數命名一樣。
4、枚舉變數 \textcolor{red}{強制使用：大駝峰命名法}
枚舉的屬性使用全大寫字母，單詞間用下劃線隔開。
示例：let TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 };
5、常量： 強制使用：使用全大寫字母，單詞間用下劃線隔開
強制使用：大駝峰命名法
命名規則： 可參考vue官網風格指南
例如： 1、按照功能來命名
2、應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V。
3、組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。
示例：components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
強制使用: 中劃線命名法
命名規則：
1.class、id 、標簽、屬性的命名應該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統一使用中劃線 「-」 連接
2.class必須代表相應模塊或部件的內容或功能，不得以樣式信息進行命名。
3.元素 id 必須保證頁面唯一。
4.禁止創建無樣式信息的 class
示例：
1、盡量不要縮寫、簡寫的單詞。除了 template => tmp、message => msg、image => img、property => prop 這些單詞已經被公認的縮寫
2、可讀性強的命名優先於簡短的命名
3、命名長度最好在 20 個字元以內，避免多長帶來的閱讀不便
4、命名要有具體的含義，避免使用一些泛指和無具體含義的詞
5、不要使用拼音，更不要使用中文
6、正則表達式用 Exp 結尾
7、ref：使用Ref結尾
❺ javax 是如何實現依賴
參數校驗是我們程序開發中必不可少的過程。用戶在前端頁面上填寫表單時，前端js程序會校驗參數的合法性，當數據到了後端，為了防止惡意操作，保持程序的健壯性，後端同樣需蘆畢寬要對數據進行校驗。後端參數校驗最簡單的做法是直接在業務方法裡面進行判斷，當判斷成功之後再繼續往下執行。但這樣帶給我們的是代碼的耦合，冗餘。當我們多個地方需要校驗時，我們就需要在每一個地方調用校驗程序,導致代碼很冗餘，且不美觀。
那麼如何優雅的對參數進行校驗呢？JSR303就是為了解決這個問題出現的，本篇文章主要是介紹 JSR303，Hibernate Validator等校驗工具的使用，以及自定義校驗註解的使用。
校驗框架介紹
JSR303 是一套JavaBean參數校驗的標准，它定義了很多常用的校驗註解，我們可以直接將這些註解加在我們JavaBean的屬性上面，就可以在需要校驗的時候進行校驗了。註解如下：
❻ 前端基礎（問答21）
keywords: jQuery、常用方法、Ajax。
$(document).ready() 和 window.onload 的作用類似，都是在頁面載入完成後調用綁定的函數，但也有一些區別。
$node.html()： 獲取集合中第一個匹配元素的 html 內容，或設置每一個元素的html內容。
$node.text()： 獲取匹配元素集合中每個元素的合並文本，包括它們的後代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。
ps：.text()方法不能使用在 input 元素或scripts元素上。input或textarea需要使用 .val() 方法獲取或設置文本值。得到scripts元素的值，使用.html()方法
作用：將兩個或更多對象的內容合並到第一個對象。
用法：
jQuery 的鏈式調用是指執行完一個方法之後就返回當前對象，被返回的對象繼續執行後面的方法。
通過對$.ajax()中傳入的cache控制，具體規則如下：
.data()：在匹配元素上存儲任意相關數據 或 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
用法：
DEMO：
1、給元素 $node 添加 class active，給元素 $noed 刪除 class active
添加class：$node.addClass('.active')
移除class：$node.removeClass('active')
切換class：$node.toggleClass('active')
2、展示元素$node, 隱藏元素$node
顯示：$node.show()
隱藏：$node.hide()
切換顯示/隱藏：$node.toggle()
3、獲取元素$node的屬性: id、src、title， 修改以上屬性
獲取：$node.attr('id'),$node.attr('src'),$node.attr('title')
修改：
修改一處屬性：$node.attr('id','header')
修改多處屬性：$node.attr({'id':'header','title':'task16'})
4、給$node 添加自定義屬性data-src
$node('data-src','images/01.jpg')
5、在$ct 內部最開頭添加元素$node
$ct.prepend($node)
6、在$ct 內部最末尾添加元素$node
$ct.append($node)
7、刪除$node
$node.remove()
8、把$ct里內容清空
$node.empty()
$ct.text("")
$ct.html("")
9、在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10、獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
獲取：1、$node.width()、$node.height()
2、$node.innerWidth()、$node.innerHeight()
3、$node.outerWidth()、$node.outerHeight()
4、$node.outerWidth(true)、$node.outerHeight(true)
11、獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
12、獲取$node 到根節點水平、垂直偏移距離
水平：$node.offset().left
垂直：$node.offset().top
13、修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({
color:'red',
font-size:ཊpx'
})
14、遍歷節點，把每個節點裡面的文本內容重復一遍
$node.each(function() {
console.log($(this).text())
})
15、從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
16、獲取$ct 裡面的所有孩子
$ct.children()
17、對於$node，向上找到 class 為』.ct』的父親，再從該父親找到』.panel』的孩子
$node.parent('.ct').children('.panel')
18、獲取選擇元素的數量
$nodes.length
19、獲取當前元素在兄弟中的排行
$node.index()
1、當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
2、當窗口滾動時，獲取垂直滾動距離
3、當滑鼠放置到$div 上，把$div 背景色改為紅色，移出滑鼠背景色變為白色
4、當滑鼠激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制台展示輸入框里的文字
5、當選擇 select 後，獲取用戶選擇的內容
效果
效果
❼ npm的xlsx前端導出excel怎麼合並單元格呢
創建@/vendor/Export2Excel.js：
require('script-loader!file-saver');
require('script-loader!@/vendor/Blob');//在vendor文件加下建立Blob.js，代碼在最下方
importXLSXfrom'xlsx'
functiondatenum(v,date1904){
if(date1904)v+=1462;
varepoch=Date.parse(v);
return(epoch-newDate(Date.UTC(1899,11,30)))/(24*60*60*1000);
}
functionsheet_from_array_of_arrays(data,opts){
varws={};
varrange={s:{c:10000000,r:10000000},e:{c:0,r:0}};
for(varR=0;R!=data.length;++R){
for(varC=0;C!=data[R].length;++C){
if(range.s.r>R)range.s.r=R;
if(range.s.c>C)range.s.c=C;
if(range.e.r
if(range.e.c
varcell={v:data[R][C]};
if(cell.v==null)continue;
varcell_ref=XLSX.utils.encode_cell({c:C,r:R});
if(typeofcell.v==='number')cell.t='n';
elseif(typeofcell.v==='boolean')cell.t='b';
elseif(cell.vinstanceofDate){
cell.t='n';
cell.z=XLSX.SSF._table[14];
cell.v=datenum(cell.v);
}
elsecell.t='s';
ws[cell_ref]=cell;
}
}
if(range.s.c<10000000)ws['!ref']=XLSX.utils.encode_range(range);
returnws;
}
functionWorkbook(){
if(!(thisinstanceofWorkbook))returnnewWorkbook();
this.SheetNames=[];
this.Sheets={};
}
functions2ab(s){
varbuf=newArrayBuffer(s.length);
varview=newUint8Array(buf);
for(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFF;
returnbuf;
}
//單列合並數據加工
//在tableData數據中對colName列進行加工(header:['xx','yy',...],mergeRule:[2,1,1,3,2,1...])
//返回格式newTableDatas=[[列頭s],["abc","ss","yyy",0],[null,"xx","y",1],["bca","xxx","yy",1],[null,"xxx","yy",1]]
//返回格式newMergeRules=[{"e":{"r":2,"c":0},"s":{"r":1,"c":0}},{"e":{"r":4,"c":0},"s":{"r":3,"c":0}}]
functionformatTableData(header,tableDatas,mergeRules,colIndex,colName){
varnewTableDatas=[header]//第一行為列頭,
varnewMergeRules=[]//加工合並規則
varcurrRowIndex=1//因為第一行為列頭所以起始為1
varmergeIndexs=[currRowIndex]//因為第一行為列頭所以起始為1,為創建newTableDatas使用
for(vari=0;i
varendRowIndex=currRowIndex+mergeRules[i]-1
varmerge={"e":{"r":endRowIndex,"c":colIndex},"s":{"r":currRowIndex,"c":colIndex}}
newMergeRules.push(merge)
currRowIndex=currRowIndex+mergeRules[i]
mergeIndexs.push(currRowIndex)
}
for(vari=0;i
varcurrRow=tableDatas[i]
if(mergeIndexs.indexOf(i+1)===-1){
currRow[colName]=null//合並的數據但不是第一行時，此列賦值null
}
varnewTabRow=[]
for(varjincurrRow){
newTabRow.push(currRow[j])
}
newTableDatas.push(newTabRow)
}
return[newTableDatas,newMergeRules]
}
@/vendor/Blob.js：
exportfunctionexport_data_to_excel(header,tableDatas,mergeRules,colIndex,colName,excelName){
varoo=formatTableData(header,tableDatas,mergeRules,colIndex,colName);
varranges=oo[1];
/*originaldata*/
vardata=oo[0];
varws_name="SheetJS";
varwb=newWorkbook(),ws=sheet_from_array_of_arrays(data);
/*addrangestoworksheet*/
//ws['!cols']=['apple','banan'];
ws['!merges']=ranges;
/*addworksheettoworkbook*/
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name]=ws;
varwbout=XLSX.write(wb,{bookType:'xlsx',bookSST:false,type:'binary'});
saveAs(newBlob([s2ab(wbout)],{type:"application/octet-stream"}),excelName+".xlsx")
}
(function(view){
"usestrict";
view.URL=view.URL||view.webkitURL;
if(view.Blob&&view.URL){
try{
newBlob;
return;
}catch(e){}
}
//
//
varBlobBuilder=view.BlobBuilder||view.WebKitBlobBuilder||view.MozBlobBuilder||(function(view){
var
get_class=function(object){
returnObject.prototype.toString.call(object).match(/^[objects(.*)]$/)[1];
}
,FakeBlobBuilder=functionBlobBuilder(){
this.data=[];
}
,FakeBlob=functionBlob(data,type,encoding){
this.data=data;
this.size=data.length;
this.type=type;
this.encoding=encoding;
}
,FBB_proto=FakeBlobBuilder.prototype
,FB_proto=FakeBlob.prototype
,FileReaderSync=view.FileReaderSync
,FileException=function(type){
this.code=this[this.name=type];
}
,file_ex_codes=(
"NOT_FOUND_ERRSECURITY_ERRABORT_ERRNOT_READABLE_ERRENCODING_ERR"
+"NO_MODIFICATION_ALLOWED_ERRINVALID_STATE_ERRSYNTAX_ERR"
).split("")
,file_ex_code=file_ex_codes.length
,real_URL=view.URL||view.webkitURL||view
,real_create_object_URL=real_URL.createObjectURL
,real_revoke_object_URL=real_URL.revokeObjectURL
,URL=real_URL
,btoa=view.btoa
,atob=view.atob
,ArrayBuffer=view.ArrayBuffer
,Uint8Array=view.Uint8Array
;
FakeBlob.fake=FB_proto.fake=true;
while(file_ex_code--){
FileException.prototype[file_ex_codes[file_ex_code]]=file_ex_code+1;
}
if(!real_URL.createObjectURL){
URL=view.URL={};
}
URL.createObjectURL=function(blob){
var
type=blob.type
,data_URI_header
;
if(type===null){
type="application/octet-stream";
}
if(blobinstanceofFakeBlob){
data_URI_header="data:"+type;
if(blob.encoding==="base64"){
returndata_URI_header+";base64,"+blob.data;
}elseif(blob.encoding==="URI"){
returndata_URI_header+","+decodeURIComponent(blob.data);
}if(btoa){
returndata_URI_header+";base64,"+btoa(blob.data);
}else{
returndata_URI_header+","+encodeURIComponent(blob.data);
}
}elseif(real_create_object_URL){
returnreal_create_object_URL.call(real_URL,blob);
}
};
URL.revokeObjectURL=function(object_URL){
if(object_URL.substring(0,5)!=="data:"&&real_revoke_object_URL){
real_revoke_object_URL.call(real_URL,object_URL);
}
};
FBB_proto.append=function(data/*,endings*/){
varbb=this.data;
//decodedatatoabinarystring
if(Uint8Array&&(datainstanceofArrayBuffer||datainstanceofUint8Array)){
var
str=""
,buf=newUint8Array(data)
,i=0
,buf_len=buf.length
;
for(;i
str+=String.fromCharCode(buf[i]);
}
bb.push(str);
}elseif(get_class(data)==="Blob"||get_class(data)==="File"){
if(FileReaderSync){
varfr=newFileReaderSync;
bb.push(fr.readAsBinaryString(data));
}else{
//asyncFileReaderwon'tworkasBlobBuilderissync
thrownewFileException("NOT_READABLE_ERR");
}
}elseif(datainstanceofFakeBlob){
if(data.encoding==="base64"&&atob){
bb.push(atob(data.data));
}elseif(data.encoding==="URI"){
bb.push(decodeURIComponent(data.data));
}elseif(data.encoding==="raw"){
bb.push(data.data);
}
}else{
if(typeofdata!=="string"){
data+="";//
}
//decodeUTF-16tobinarystring
bb.push(unescape(encodeURIComponent(data)));
}
};
FBB_proto.getBlob=function(type){
if(!arguments.length){
type=null;
}
returnnewFakeBlob(this.data.join(""),type,"raw");
};
FBB_proto.toString=function(){
return"[objectBlobBuilder]";
};
FB_proto.slice=function(start,end,type){
varargs=arguments.length;
if(args<3){
type=null;
}
returnnewFakeBlob(
this.data.slice(start,args>1?end:this.data.length)
,type
,this.encoding
);
};
FB_proto.toString=function(){
return"[objectBlob]";
};
FB_proto.close=function(){
this.size=this.data.length=0;
};
returnFakeBlobBuilder;
}(view));
view.Blob=functionBlob(blobParts,options){
vartype=options?(options.type||""):"";
varbuilder=newBlobBuilder();
if(blobParts){
for(vari=0,len=blobParts.length;i
builder.append(blobParts[i]);
}
}
returnbuilder.getBlob(type);
};
}(typeofself!=="undefined"&&self||typeofwindow!=="undefined"&&window||this.content
作者：paperss
鏈接：https://www.jianshu.com/p/b440106eb8a2
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
❽ 一個app項目單點登錄，前端要做什麼，後端要做什麼。
前端需要做你那個用戶姓名，密碼一些驗證什麼的，然逗橡野後有山喊前如春端打包數據到後再去處理，進行
邏輯判斷
就可以了。