yaoyuan/exceljs_practice
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add scripts

Browse Source
This commit is contained in:
Cody Zhang
2020-10-08 17:31:39 +08:00
parent 9463e1dcbd
commit ff9710dc08
8 changed files with 21044 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
test.html
View File

@@ -3,248 +3,129 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測試檔案</title>
<style>
table {
border: solid black 1px;
}
tr {
border: solid black 1px;
}
th {
border: solid black 1px;
}
td {
border: solid black 1px;
}
</style>
<!-- <script src="scripts/polyfill.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.11.5/dist/polyfill.js"
integrity="sha256-zMiIDM5XypPGREBv9Hmb5fNhRS727Fuldppe2Gv565Y=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs@3.8.0/dist/exceljs.min.js"
integrity="sha256-FnNb+CH5ZwjbWvJBzN+0phddfKPBgExLcXGBMRhuYc8=" crossorigin="anonymous"></script>
<script src="scripts/excelJS_helper.js"></script>
<script>
document.onreadystatechange = function () {
if (document.readyState == "complete") {
document.getElementById("btnExcel").onclick = function () {
var elt = document.getElementById("table-javascript");
var wb = exhelper.tableToBook(elt);
exhelper.addTitle(wb.worksheets[0], "title test");
//wb.worksheets[0].spliceRows(1, 7);
console.log(wb);
// save file
exhelper.saveXlsx("test.xlsx", wb);
/*
wb.xlsx.writeBuffer().then(
function (result) {
exhelper.saveBlob("test.xlsx", result);
},
function (err) {
console.log("error: ", err);
}
);
*/
}
}
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
<!-- ExcelJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.js"></script>
<!-- 因為 3.8.0 之後的版本有新加的功能，造成 IE 無法載入，所以如果要相容 IE 就先使用 3.8.0 版的，之後如果有需要新的功能，再想辦法透過 polyfill 處理 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.8.0/exceljs.js"
integrity="sha512-vwSn7EltjzuN+K9iDCs+g39sPCoOxGjrJw7XoTELF8gg8r54+Pm+arEBxhJUkbd8jigd7g9hXJ0ja+mWJJbW6w=="
crossorigin="anonymous"></script>
</head>
<body>
<div class="page-content">
<table class="table table-javascript">
<thead>
<tr role="row">
<th data-title="支付工具" data-data="PaymentAgent" class="sorting_disabled" rowspan="1" colspan="1"
style="width: 256px;">支付工具</th>
<th data-title="通路名稱" data-data="StoreName" class="sorting_disabled" rowspan="1" colspan="1"
style="width: 336px;">通路名稱</th>
<th data-title="儲值筆數" data-data="DepositCount" class="sorting_disabled" rowspan="1"
style="width: 256px;">儲值筆數</th>
<th data-title="本次儲值金額" data-data="TransAmount" class="sorting_disabled" colspan="1"
style="width: 368px;">本次儲值金額</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<th rowspan="2" tabindex="0">委外代收</th>
<td>貝克漢健康事業</td>
<td>1</td>
<td>20,000</td>
</tr>
<tr class="group">
<td>總計</td>
<td>1</td>
<td>20,000</td>
</tr>
<tr role="row" class="even">
<th rowspan="2" tabindex="0">其他</th>
<td>橘子支活動獎勵</td>
<td>2</td>
<td>200</td>
</tr>
<tr class="group">
<td>總計</td>
<td>2</td>
<td>200</td>
</tr>
<tr role="row" class="odd">
<th rowspan="2" tabindex="0">null</th>
<td></td>
<td>3</td>
<td>4,100</td>
</tr>
<tr class="group">
<td>總計</td>
<td>3</td>
<td>4,100</td>
</tr>
</tbody>
</table>
<div class="card-content">
<div id="search-result">
<div id="table-javascript_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="dt-buttons">
<button id="btnExcel" class="btn btn-info btn-sm" tabindex="0" aria-controls="table-javascript">
<span>excel</span>
</button>
</div>
<div id="table-javascript_processing" class="dataTables_processing panel panel-default"
style="display: none;">處理中...</div>
<table id="table-javascript"
class="table table-striped table-no-bordered table-hover table-responsive display no-wrap dataTable no-footer dtr-inline"
cellspacing="0" style="width: 100%;" role="grid" aria-describedby="table-javascript_info">
<thead>
<tr role="row">
<th data-title="支付工具" data-data="PaymentAgent" class="sorting_disabled" rowspan="1"
colspan="1" style="width: 225px;">支付工具</th>
<th data-title="通路名稱" data-data="StoreName" class="sorting_disabled" rowspan="1" colspan="1"
style="width: 304px;">通路名稱</th>
<th data-title="儲值筆數" data-data="DepositCount" class="sorting_disabled" rowspan="1"
colspan="1" style="width: 226px;">儲值筆數</th>
<th data-title="儲值金額" data-data="TransAmount" class="sorting_disabled" rowspan="1"
colspan="1" style="width: 227px;">儲值金額</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<th rowspan="3" tabindex="0">其他</th>
<td colspan="2">3</td>
<td>4,100</td>
</tr>
<tr role="row" class="even">
<td tabindex="0" colspan="3">橘子支活動獎勵</td>
</tr>
<tr class="group">
<th>總計</th>
<th colspan="2">5</th>
</tr>
<tr role="row" class="odd">
<th rowspan="2" tabindex="0">委外代收</th>
<td>貝克漢健康事業</td>
<td>1</td>
<td>20,000</td>
</tr>
<tr class="group">
<th>總計</th>
<th>1</th>
<th>20,000</th>
</tr>
<tr class="totalSum">
<th>總計</th>
<th></th>
<th>6</th>
<th>24,300</th>
</tr>
</tbody>
</table>
<div class="dataTables_info" id="table-javascript_info" role="status" aria-live="polite">顯示第 1 至 3 項結果，共
3 項</div>
</div>
</div>
</div>
<div>
<button id="btnDownload" type="button" value="download">Download</button>
</div>
<script type="text/javascript">
$("#btnDownload").click(function () {
exportExcel($(".table-javascript"), "test.xlsx");
});
function exportExcel(tableElem, fileName) {
// 建立 ExcelJS 物件
const workbook = new ExcelJS.Workbook();
let now = new Date();
workbook.creator = "Gamapay";
workbook.lastModifiedBy = "Gamapay";
workbook.created = now;
workbook.modified = now;
workbook.lastPrinted = now;
// set workbook dates to 1904 date system
workbook.properties.date1904 = true;
// add worksheet
const sheet = workbook.addWorksheet("Sheet1");
// 建立 header
let headerTrs = tableElem.children("thead").children("tr");
for (var i = 0; i < headerTrs.length; i++) {
let headerThs = $(headerTrs[i]).children("th");
let totalColspan = 0;
for (var j = 0; j < headerThs.length; j++) {
// 現在的行數
let currRow = sheet.getRow(i);
// 現在的格子
let currCell = {
c: j + totalColspan,
r: i
};
// 目前的 th 物件
let elemTh = $(headerThs[j]);
// colspan
let colspan = !elemTh.attr("colspan") ? "2" : elemTh.attr("colspan");
// rowspan
let rowspan = !elemTh.attr("rowspan") ? "1" : elemTh.attr("rowspan");
// 合併欄位
if (colspan != 1) {
let mergeStart = currCell;
let mergeEnd = {
c: currCell.c + parseInt(colspan) - 1,
r: currCell.r
};
sheet.mergeCells(parseCellString(mergeStart) + ":" + parseCellString(mergeEnd));
totalColspan++;
}
let cell = sheet.getCell(parseCellString(currCell));
console.log(elemTh.text());
console.log(elemTh);
currRow.getCell(currCell.c + 1).value = elemTh.text();
// cell.value = elemTh.val();
// console.log(parseCellString(currCell));
// console.log(headerThs[j]);
// console.log(colspan);
// console.log(rowspan);
// console.log($(headerThs[j]).text());
}
}
console.log(sheet);
// sheet.addTable({
// name: "Test",
// ref: "A1",
// headerRow: true,
// totalsRow: false,
// columns: [{
// name: "支付工具"
// },
// {
// name: "通路名稱"
// },
// {
// name: "儲值筆數"
// },
// {
// name: "本次儲值金額"
// }
// ],
// rows: [
// ["委外代收", "貝克漢健康事業", 1, 20000],
// ["", "總計", 1, 20000],
// ["其它", "橘子支付活動獎勵", 2, 200],
// ["", "總計", 2, 200],
// ["null", "", 3, 4100],
// ["", "總計", 3, 4100]
// ]
// });
}
function parseCellString(cellElem) {
// 目前先定義A-Z，之後有需要再加
var colArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
"S", "T", "U", "V", "W", "X", "Y", "Z"
];
var r = cellElem.r + 1;
return colArray[cellElem.c + 1] + r;
}
function saveByteArray(reportName, byte) {
var blob = new Blob([byte], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
var filename = reportName;
link.download = filename;
link.click();
};
function saveFile(fileName, byte) {
var blob = new Blob([byte], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
})
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// for IE
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
// other browsers
var a = $("<a style='display: none;'/>");
var url = window.URL.createObjectURL(blob, {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
a.attr("href", url);
a.attr("download", fileName);
$("body").append(a);
a[0].click();
window.URL.revokeObjectURL(url);
a.remove();
}
}
</script>
</body>
</html>
</html>