sheetjs+bs5+vue3
vue component: excel upload & parse
by cactus77kiki
HTML
<script src="https://unpkg.com/[email protected]"></script>
<!--file process-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.2/xlsx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<!--style-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<div id="appcontainer">
<div class="row g-3" style="margin:5px;display:none;">
<div class="col-auto">
<label>新增年月 </label>
<input type="text" class="form-control-sm" placeholder="YYYYMM">
</div>
<div class="col-auto">
<select id="skind" class="form-select form-select-sm" >
<option selected>- 選擇類型 -</option>
<option value="2">2.第二類</option>
<option value="3">3.第三類</option>
<option value="4">4.第四類</option>
<option value="5">5.第五類</option>
<option value="7">7.第七類</option>
</select>
</div>
</div>
<div class="row g-3" style="margin:5px;">
<div class = "col-auto">
<!--file upload-->
<h6>【一sheet，一組二維資料解析】</h6>
<xls-upload-comp :parsetype="parsexlstype1" :titles="null" :sheetcnt="null" :cells="null" :cellrange="null" :getdata="getSimpleData"></xls-upload-comp>
<h6>【多sheet，一組二維資料解析】</h6>
<xls-upload-comp :parsetype="parsexlstype2" :titles="null" :sheetcnt="2" :cells="null" :cellrange="null" :getdata="getMultiSheet"></xls-upload-comp>
<h6>【一sheet，解析多組單一儲存格、一組二維資料】</h6>
<xls-upload-comp :parsetype="parsexlstype3" :titles="rangetitle" :sheetcnt="null" :cells="parsecells" :cellrange="datarange"...CSS
/*
ref1: https://bootstrap5.hexschool.com/docs/5.1/forms/layout/
ref2: https://fontawesome.com/v4/icons/
ref3: https://stackoverflow.com/questions/35948669/how-to-check-if-a-value-exists-in-an-object-using-javascript (判斷object是否有內容)
*/JavaScript
/*定義解析excel檔案之型態(呼叫端設定參考)
OneSheet-General: 二維資料,單一工作表
MultiSheet-General: 二維資料,多工作表
OneSheet-Complex: 複雜資料(個別cell/range cell data),單一工作表
MultiSheet-Complex: 複雜資料(個別cell/range cell data),多工作表
*/
/*各種呼叫情境需要傳入之資料及範例
1.二維資料,單一工作表
(1)必要參數:parsetype,getdata. 選擇參數:titles
parsetype=字串,參考ParseType
titles=null或字串陣列(ex: ['A','B','C']),請按照順序
getdata=函式(ex:getData(returnobj){})
(2)範例
<xls-upload-comp :parsetype="字串" :titles="null" :sheetcnt="null" :cells="null" :cellrange="null" :getdata="函式名稱"></xls-upload-comp>
2.二維資料,多工作表
(1)必要參數:parsetype,sheetcnt,getdata.選擇參數:titles
parsetype=字串,參考ParseType
sheetcnt=數值
titles=null或陣列(ex: [{sheet: 0, title: []},{sheet: 1, title: []}]),參考TitleObj
getdata=函式(ex:getData(returnobj){})
(2)範例
<xls-upload-comp :parsetype="字串" :titles="null" :sheetcnt="欲解析工作表數量" :cells="null" :cellrange="null" :getdata="函式"></xls-upload-comp>
3.複雜資料,單一工作表
(0)註:excel內之二維資料可能無資料標題欄;若需要解析某範圍資料,提供titles才可將解析後資料順利對應並轉為json型態
(1)必要參數:parsetype,getdata. 選擇參數:titles,cells,cellrange
parsetype=字串,參考ParseType
titles=陣列(ex: ['A','B','C'])
cells=null或陣列,儲存格位址(ex:['A1','B2','C3']).(不需要解析單一儲存格=null)
cellrange=null或物件(ex:{ s: { c: 欄起始位置, r: 列起始位置 }, e: { c: 欄結束位置, r: 列結束位置 } })(不需要解析range資料=null)
getdata=函式(ex:getData(returnobj){})
(2)範例
<xls-upload-comp :parsetype="字串" :titles="(二維資料)標題清單" :sheetcnt="null" :cells="(單一)儲存格清單" :cellrange="儲存格範圍" :getdata="函式"></xls-upload-comp>
*/
/*資料型態參考*/
const ParseType = ['OneSheet-General','MultiSheet-General','OneSheet-Complex','MultiSheet-Complex'];
/*定義多個worksheet之title型態(呼叫端設定參考)*/
const TitleObj = { sheet: 0, title: [] }; //sheet位置由0起始;title array 為字串一維陣列
/*定義多個worksheet解析後之data型態(呼叫端解析參考)
jsondata:二維陣列資料,僅提供一組,
celldata:CellObj型態,多組資料產生之集合
*/
const ResultObj = { sheet: 0, jsondata: [], celldata: []};
/*定義worksheet之cell解析後之data型態(呼叫端解析參考)*/
const CellObj = { cell: '', value: '' };
/*定義worksheet之待解析cell range*/
const RangeObj= { s: { c: 0, r: 3 }, e: { c: 3, r: 5 }...