{ | { | ||||
"name": "etc-project", | "name": "etc-project", | ||||
"version": "0.0.0", | "version": "0.0.0", | ||||
"lockfileVersion": 2, | "lockfileVersion": 2, | ||||
"resolved": "https://registry.npmmirror.com/vue-fragment/-/vue-fragment-1.5.2.tgz", | "resolved": "https://registry.npmmirror.com/vue-fragment/-/vue-fragment-1.5.2.tgz", | ||||
"integrity": "sha512-KEW0gkeNOLJjtXN4jqJhTazez5jtrwimHkE5Few/VxblH4F9EcvJiEsahrV5kg5uKd5U8du4ORKS6QjGE0piYA==", | "integrity": "sha512-KEW0gkeNOLJjtXN4jqJhTazez5jtrwimHkE5Few/VxblH4F9EcvJiEsahrV5kg5uKd5U8du4ORKS6QjGE0piYA==", | ||||
"requires": {} | "requires": {} | ||||
<<<<<<< HEAD | |||||
}, | }, | ||||
"vue-json-excel": { | "vue-json-excel": { | ||||
"version": "0.3.0", | "version": "0.3.0", | ||||
"requires": { | "requires": { | ||||
"downloadjs": "^1.4.7" | "downloadjs": "^1.4.7" | ||||
} | } | ||||
======= | |||||
>>>>>>> 05e8dcf02b7218c7482505d4c3b09a35b5152e7d | |||||
}, | }, | ||||
"vue-loader": { | "vue-loader": { | ||||
"version": "16.8.3", | "version": "16.8.3", |
<template> | |||||
<div class="app-content"> | |||||
<el-button ref="hwcell" size="small" type="primary" @click="exportExcel" v-if="isShow">文件导出</el-button> | |||||
<el-table :data="tableData" style="width: 100%" border> | |||||
<el-table-column type="index" label="序号" width="60" /> | |||||
<el-table-column prop="etcCardNumber" label="ETC卡号" width="190" /> | |||||
<el-table-column prop="licensePlateNumber" label="车牌号" width="100" /> | |||||
<el-table-column prop="consumptionType" label="消费类型" width="90" /> | |||||
<el-table-column prop="entranceTime" label="入口时间" width="110" /> | |||||
<el-table-column prop="entryStationName" label="入口站名" width="110" /> | |||||
<el-table-column prop="exportTime" label="出口时间" width="110" /> | |||||
<el-table-column prop="exitStationName" label="出口站名" width="110" /> | |||||
<el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" /> | |||||
<el-table-column prop="transactionAmount" label="交易金额(元)" width="125" /> | |||||
<el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | |||||
</el-table> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import * as XLSX from "xlsx"; | |||||
export default { | |||||
data() { | |||||
return { | |||||
isShow:false, | |||||
fileData: "" ,// 保存选择的文件数据, | |||||
tableData:[ | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
{ | |||||
etcCardNumber: '52011328220200481698', | |||||
licensePlateNumber: '贵A710AE', | |||||
consumptionType: '省内流水', | |||||
entranceTime: '2019-12-27 20:14:02', | |||||
entryStationName: '贵阳西主线站', | |||||
exportTime: '2019-12-27 20:18:20', | |||||
exitStationName: '贵阳西主线站', | |||||
balanceBeforeTransaction: '38.25', | |||||
transactionAmount: '0.00', | |||||
postransactionalance: '38.25', | |||||
}, | |||||
] | |||||
}; | |||||
}, | |||||
create() { | |||||
console.log(XLSX); | |||||
}, | |||||
methods: { | |||||
//导出文件 | |||||
exportExcel() { | |||||
if (!this.tableData.length) { | |||||
this.$message.warning("暂无数据导出"); | |||||
return false; | |||||
} | |||||
import("@/utils/Export2Excel").then(excel => { | |||||
//导出表格头部内容(要与下面字段对照) | |||||
const tHeader = ['ETC卡号', '车牌号', '消费类型', '入口时间', '入口站名', '出口时间', '出口站名', '交易前余额(元)', '交易金额(元)', '交易后金额(元)']; | |||||
const filterVal = [ "etcCardNumber", "licensePlateNumber", "consumptionType", "entranceTime", "entryStationName", "exportTime", "exitStationName", "balanceBeforeTransaction", "transactionAmount", "postransactionalance"]; | |||||
const data = this.formatJson(filterVal); | |||||
//保存excel | |||||
excel.export_json_to_excel({ | |||||
header: tHeader, | |||||
data, | |||||
//导出的文件名 | |||||
filename: "通行流水数据表" | |||||
}); | |||||
}); | |||||
}, | |||||
//格式转换 | |||||
formatJson(filterVal) { | |||||
return this.tableData.map(v => | |||||
// obj = { | |||||
// name:'', | |||||
// age:'' | |||||
// } | |||||
filterVal.map(j => { | |||||
// obj[name] | |||||
// obj[age] | |||||
console.log(v[j]); | |||||
return v[j]; | |||||
}) | |||||
); | |||||
// [[name,age],[name,age],[name,age]] | |||||
}, | |||||
} | |||||
}; | |||||
</script> | |||||
<style> | |||||
</style> |
/* eslint-disable */ | |||||
import { | |||||
saveAs | |||||
} from 'file-saver'; | |||||
import * as XLSX from 'xlsx'; | |||||
function generateArray(table) { | |||||
var out = []; | |||||
var rows = table.querySelectorAll('tr'); | |||||
var ranges = []; | |||||
for (var R = 0; R < rows.length; ++R) { | |||||
var outRow = []; | |||||
var row = rows[R]; | |||||
var columns = row.querySelectorAll('td'); | |||||
for (var C = 0; C < columns.length; ++C) { | |||||
var cell = columns[C]; | |||||
var colspan = cell.getAttribute('colspan'); | |||||
var rowspan = cell.getAttribute('rowspan'); | |||||
var cellValue = cell.innerText; | |||||
if (cellValue !== "" && cellValue === +cellValue) cellValue = +cellValue; | |||||
//Skip ranges | |||||
ranges.forEach(function (range) { | |||||
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) { | |||||
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null); | |||||
} | |||||
}); | |||||
//Handle Row Span | |||||
if (rowspan || colspan) { | |||||
rowspan = rowspan || 1; | |||||
colspan = colspan || 1; | |||||
ranges.push({ | |||||
s: { | |||||
r: R, | |||||
c: outRow.length | |||||
}, | |||||
e: { | |||||
r: R + rowspan - 1, | |||||
c: outRow.length + colspan - 1 | |||||
} | |||||
}); | |||||
} | |||||
//Handle Value | |||||
outRow.push(cellValue !== "" ? cellValue : null); | |||||
//Handle Colspan | |||||
if (colspan) | |||||
for (var k = 0; k < colspan - 1; ++k) outRow.push(null); | |||||
} | |||||
out.push(outRow); | |||||
} | |||||
return [out, ranges]; | |||||
} | |||||
function datenum(v, date1904) { | |||||
if (date1904) v += 1462; | |||||
var epoch = Date.parse(v); | |||||
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); | |||||
} | |||||
function sheet_from_array_of_arrays(data, opts) { | |||||
var ws = {}; | |||||
var range = { | |||||
s: { | |||||
c: 10000000, | |||||
r: 10000000 | |||||
}, | |||||
e: { | |||||
c: 0, | |||||
r: 0 | |||||
} | |||||
}; | |||||
for (var R = 0; R != data.length; ++R) { | |||||
for (var C = 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 < R) range.e.r = R; | |||||
if (range.e.c < C) range.e.c = C; | |||||
var cell = { | |||||
v: data[R][C] | |||||
}; | |||||
if (cell.v == null) continue; | |||||
var cell_ref = XLSX.utils.encode_cell({ | |||||
c: C, | |||||
r: R | |||||
}); | |||||
if (typeof cell.v === 'number') cell.t = 'n'; | |||||
else if (typeof cell.v === 'boolean') cell.t = 'b'; | |||||
else if (cell.v instanceof Date) { | |||||
cell.t = 'n'; | |||||
cell.z = XLSX.SSF._table[14]; | |||||
cell.v = datenum(cell.v); | |||||
} else cell.t = 's'; | |||||
ws[cell_ref] = cell; | |||||
} | |||||
} | |||||
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); | |||||
return ws; | |||||
} | |||||
function Workbook() { | |||||
if (!(this instanceof Workbook)) return new Workbook(); | |||||
this.SheetNames = []; | |||||
this.Sheets = {}; | |||||
} | |||||
function s2ab(s) { | |||||
var buf = new ArrayBuffer(s.length); | |||||
var view = new Uint8Array(buf); | |||||
for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; | |||||
return buf; | |||||
} | |||||
export function export_table_to_excel(id) { | |||||
var theTable = document.getElementById(id); | |||||
var oo = generateArray(theTable); | |||||
var ranges = oo[1]; | |||||
/* original data */ | |||||
var data = oo[0]; | |||||
var ws_name = "SheetJS"; | |||||
var wb = new Workbook(), | |||||
ws = sheet_from_array_of_arrays(data); | |||||
/* add ranges to worksheet */ | |||||
// ws['!cols'] = ['apple', 'banan']; | |||||
ws['!merges'] = ranges; | |||||
/* add worksheet to workbook */ | |||||
wb.SheetNames.push(ws_name); | |||||
wb.Sheets[ws_name] = ws; | |||||
var wbout = XLSX.write(wb, { | |||||
bookType: 'xlsx', | |||||
bookSST: false, | |||||
type: 'binary' | |||||
}); | |||||
saveAs(new Blob([s2ab(wbout)], { | |||||
type: "application/octet-stream" | |||||
}), "test.xlsx") | |||||
} | |||||
export function export_json_to_excel({ | |||||
multiHeader = [], | |||||
header, | |||||
data, | |||||
filename, | |||||
merges = [], | |||||
autoWidth = true, | |||||
bookType = 'xlsx' | |||||
} = {}) { | |||||
/* original data */ | |||||
filename = filename || 'excel-list' | |||||
data = [...data] | |||||
data.unshift(header); | |||||
for (let i = multiHeader.length - 1; i > -1; i--) { | |||||
data.unshift(multiHeader[i]) | |||||
} | |||||
var ws_name = "Sheet1"; | |||||
var wb = new Workbook(), | |||||
ws = sheet_from_array_of_arrays(data); | |||||
if (merges.length > 0) { | |||||
if (!ws['!merges']) ws['!merges'] = []; | |||||
merges.forEach(item => { | |||||
ws['!merges'].push(XLSX.utils.decode_range(item)) | |||||
}) | |||||
} | |||||
if (autoWidth) { | |||||
/*设置worksheet每列的最大宽度*/ | |||||
const colWidth = data.map(row => row.map(val => { | |||||
/*先判断是否为null/undefined*/ | |||||
if (val == null) { | |||||
return { | |||||
'wch': 10 | |||||
}; | |||||
} | |||||
/*再判断是否为中文*/ | |||||
else if (val.toString().charCodeAt(0) > 255) { | |||||
return { | |||||
'wch': val.toString().length * 2 | |||||
}; | |||||
} else { | |||||
return { | |||||
'wch': val.toString().length | |||||
}; | |||||
} | |||||
})) | |||||
/*以第一行为初始值*/ | |||||
let result = colWidth[0]; | |||||
for (let i = 1; i < colWidth.length; i++) { | |||||
for (let j = 0; j < colWidth[i].length; j++) { | |||||
if (result[j]['wch'] < colWidth[i][j]['wch']) { | |||||
result[j]['wch'] = colWidth[i][j]['wch']; | |||||
} | |||||
} | |||||
} | |||||
ws['!cols'] = result; | |||||
} | |||||
/* add worksheet to workbook */ | |||||
wb.SheetNames.push(ws_name); | |||||
wb.Sheets[ws_name] = ws; | |||||
var wbout = XLSX.write(wb, { | |||||
bookType: bookType, | |||||
bookSST: false, | |||||
type: 'binary' | |||||
}); | |||||
saveAs(new Blob([s2ab(wbout)], { | |||||
type: "application/octet-stream" | |||||
}), `${filename}.${bookType}`); | |||||
} |
proxy.$request | proxy.$request | ||||
.post('api/user',{}, | .post('api/user',{}, | ||||
{ | { | ||||
baseURL: 'http://localhost:8080', | |||||
baseURL: 'http://192.168.101.123:8080', | |||||
} | } | ||||
) | ) | ||||
.then((res: {}) => { | .then((res: {}) => { |
<div class="topstyle"> | <div class="topstyle"> | ||||
<el-button type="success" :icon="Search" @click="search">搜索</el-button> | <el-button type="success" :icon="Search" @click="search">搜索</el-button> | ||||
<el-button type="warning" :icon="Refresh" @click="reset">重置</el-button> | <el-button type="warning" :icon="Refresh" @click="reset">重置</el-button> | ||||
<el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button> | <el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button> | ||||
<el-button type="primary" plain @click="exportAll">导出所有</el-button> | <el-button type="primary" plain @click="exportAll">导出所有</el-button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div style="padding-top: 12px"> | <div style="padding-top: 12px"> | ||||
<el-table :data="tableData1" style="width: 100%" border> | |||||
<exportTable ref="exportTS"></exportTable> | |||||
<!-- <el-table :data="tableData1" style="width: 100%" border> | |||||
<el-table-column type="index" label="序号" width="60" /> | <el-table-column type="index" label="序号" width="60" /> | ||||
<el-table-column prop="etcCardNumber" label="ETC卡号" width="190" /> | <el-table-column prop="etcCardNumber" label="ETC卡号" width="190" /> | ||||
<el-table-column prop="licensePlateNumber" label="车牌号" width="100" /> | <el-table-column prop="licensePlateNumber" label="车牌号" width="100" /> | ||||
<el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" /> | <el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" /> | ||||
<el-table-column prop="transactionAmount" label="交易金额(元)" width="125" /> | <el-table-column prop="transactionAmount" label="交易金额(元)" width="125" /> | ||||
<el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | <el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | ||||
</el-table> | |||||
</el-table> --> | |||||
</div> | </div> | ||||
<div style="padding-top: 12px" class="as-gravity-center-end"> | <div style="padding-top: 12px" class="as-gravity-center-end"> | ||||
<el-pagination :page-sizes="[10, 20, 30, 40]" :total="1000" /> | <el-pagination :page-sizes="[10, 20, 30, 40]" :total="1000" /> | ||||
import { useRoute, useRouter } from 'vue-router' | import { useRoute, useRouter } from 'vue-router' | ||||
import { Calendar, Search, Refresh } from '@element-plus/icons-vue' | import { Calendar, Search, Refresh } from '@element-plus/icons-vue' | ||||
import type { ElTable } from 'element-plus' | import type { ElTable } from 'element-plus' | ||||
import exportTable from'../../../components/exportTable/exportTable.vue' | |||||
const { proxy }: any = getCurrentInstance() | const { proxy }: any = getCurrentInstance() | ||||
startDate: '', //开始日期 | startDate: '', //开始日期 | ||||
endDate: '', //结束日期 | endDate: '', //结束日期 | ||||
}) | }) | ||||
const exportTS = ref() | |||||
const tableData = reactive({ | const tableData = reactive({ | ||||
title: "xx公司表格", | title: "xx公司表格", | ||||
serialNumber: '', //序号 | serialNumber: '', //序号 | ||||
formData.endDate = '' | formData.endDate = '' | ||||
} | } | ||||
//导出当前页 | //导出当前页 | ||||
function exportCurrentPage() { | |||||
console.log('导出当前页的表格数据') | |||||
const exportCurrentPage=()=>{ | |||||
exportTS.value.exportExcel() | |||||
// childRef.value.exportExcel() | |||||
console.log('导出当前页的表格数据') | |||||
} | } | ||||
//导出所有 | //导出所有 | ||||
function exportAll() { | function exportAll() { | ||||
proxy.$refs.exportTable.exportExcel(); | |||||
console.log('导出所有数据') | console.log('导出所有数据') | ||||
} | } | ||||
<el-table | <el-table | ||||
style="margin:20px 0;" | style="margin:20px 0;" | ||||
:data="outputs" | :data="outputs" | ||||
border | |||||
:header-cell-style="{background:'#f1f1f1',color:'#606266'}" | :header-cell-style="{background:'#f1f1f1',color:'#606266'}" | ||||
> | > | ||||
<el-table-column label="姓名" prop="name"></el-table-column> | <el-table-column label="姓名" prop="name"></el-table-column> | ||||
<script> | <script> | ||||
// import XLSX from "xlsx"; | |||||
import * as XLSX from "xlsx"; | |||||
export default { | export default { | ||||
data() { | data() { | ||||
this.$message.warning("暂无数据导出"); | this.$message.warning("暂无数据导出"); | ||||
return false; | return false; | ||||
} | } | ||||
import("@/vendor/Export2Excel").then(excel => { | |||||
import("@/utils/Export2Excel").then(excel => { | |||||
//导出表格头部内容(要与下面字段对照) | //导出表格头部内容(要与下面字段对照) | ||||
const tHeader = ["姓名", "年龄"]; | const tHeader = ["姓名", "年龄"]; | ||||
const filterVal = ["name", "age"]; | const filterVal = ["name", "age"]; |