1、安装
cnpm i vue-json-excel --save
2、使用
1、引入
import JsonExcel from 'vue-json-excel'
2、注册
components: {
downloadExcel:JsonExcel,
},
3、页面使用
data：{
return {
excelName:`每日火化量统计${new Date().valueOf()}.xls`,
json_fields:{
"类型":'类型',
"合计":'合计',
},
}
}
<el-form-item>
<download-excel
class = "export-excel-wrapper"
v-if="multipleSelection.length > 0"
:data="multipleSelection"
:fields="json_fields"
:name ='excelName'>
<el-button type="primary" >导出Excel</el-button>
</download-excel>
<el-button v-else type="primary" @click="openExecl">导出Excel
</el-button>
</el-form-item>
3、页面代码
<template>
<div class="dailyCremationVolume h100" v-loading="loading">
<div class="PageContent">
<el-form :model="ruleForm" :inline="true" label-width="80px" class="PageItem PageItems margintop20">
<el-row :gutter="5" ref="fileSearch" class="fileSearch">
<el-form-item label="结算日期:">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.staTime"
format="yyyy-MM-dd" ></el-date-picker>
-
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.endTime"
format="yyyy-MM-dd" ></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('search')">查询</el-button>
</el-form-item>
<el-form-item>
<download-excel
class = "export-excel-wrapper"
v-if="multipleSelection.length > 0"
:data="multipleSelection"
:fields="json_fields"
:name ='excelName'>
<el-button type="primary" >导出Excel</el-button>
</download-excel>
<el-button v-else type="primary" @click="openExecl">导出Excel
</el-button>
</el-form-item>
</el-row>
<el-table
ref="filetable"
id="res_table"
:data="tableData"
:header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
stripe
:height="tableHeight"
@selection-change="handleSelectionChange"
border>
<el-table-column
type="selection"
v-if="tableData.length > 0"
width="55">
</el-table-column>
<el-table-column
:prop="item"
align='center'
:label="item"
:key="item"
v-for="item in columns"
>
</el-table-column>
</el-table>
</el-form>
</div>
</div>
</template>
<script>
import * as Type from '@/api/service'
import {dataFormatetmd} from '@/utils/index'
import FileSaver from "file-saver";
import XLSX from "xlsx";
import download from "@/api/download"
import JsonExcel from 'vue-json-excel'
export default {
name: "dailyCremationVolume",
components: {
downloadExcel:JsonExcel,
},
data() {
return {
excelName:`每日火化量统计${new Date().valueOf()}.xls`,
json_fields:{
"类型":'类型',
"合计":'合计',
},
loading: false,
dictionary:{},
multipleSelection: [],
tableHeight: 0,
type: [],
ruleForm: {
staTime:new Date(),
endTime:new Date(),
},
pager: {
pageSize: 20,
total: 1,
currentPage: 1
},
tableData: [],
keys:[],
columns:[]
//按钮权限
}
},
created () {
},
//载入按钮
mounted() {
this.$store
.dispatch("user/getdictionary")
.then((res) => {
this.dictionary=res
})
this.btnRight = this.$route.meta.buttons;
//遍历属性赋值将true与false字符串转换成布尔型的值
for (let key of Object.keys(this.btnRight)) {
this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;
}
this.onSubmit()
var that = this
window.onresize = function () {
var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
that.tableHeight = dom - search - 60
}
},
//注销window.onresize事件
destroyed() {
window.onresize = null;
},
updated() {
this.$nextTick(() => {
var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
this.tableHeight = dom - search - 80
})
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
async onSubmit() {
this.loading = true
this.json_fields={
"类型":'类型',
"合计":'合计',
}
var postData = {
staTime:this.ruleForm.staTime?this.$dayjs(new Date(this.ruleForm.staTime)).format('YYYY-MM-DD'):'',
endTime:this.ruleForm.endTime?this.$dayjs(new Date(this.ruleForm.endTime)).format('YYYY-MM-DD'):'',
}
//查询火化档案的接口
let res = await Type['loadDailyStatisticsData'](postData)
this.loading=false;
if(res.code!==1) return this.$message.error(res.message)
if(res.data){
this.tableData = res.data.val;
this.columns = res.data.keys;
res.data.keys.forEach((item,index)=>{
console.log(item,'0')
this.json_fields[item] = res.data.keys[index]
})
}else{
this.tableData=[]
}
},
//加法
plus(){
let r1, r2, m
try{r1 = arguments[0].toString().split(".")[1].length}catch(e){r1 = 0}
try{r2 = arguments[1].toString().split(".")[1].length}catch(e){r2 = 0}
m = Math.pow(10,Math.max(r1,r2))
if(arguments.length > 2) {
return this.plus((arguments[0] * m + arguments[1] * m) / m, ...(Array.from(arguments).slice(2)))
}else{
return ((arguments[0] * m + arguments[1] * m) / m).toFixed(2)
}
},
transformData(data) {
const keys = Object.keys(data);
const values = Object.values(data);
console.log(values,'7411')
this.keys=values[0].length
const result = [];
for (let i = 0; i < values.length; i++) {
const obj = {};
obj[0] = keys[i];
let totalCost = 0;
for (let j = 0; j < values[i].length; j++) {
obj[j + 1] = values[i][j];
totalCost += parseInt(values[i][j]);
}
obj[values[i].length + 1] = totalCost;
result.push(obj);
}
return result;
},
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pager.pageSize = size;
this.onSubmit()
},
handleCurrentChange: function (currentPage) {
this.pager.currentPage = currentPage;
this.onSubmit()
},
openExecl() {
// var postData = {
// itemName:this.ruleForm.itemName,
// staTime: dataFormatetmd(new Date(this.ruleForm.staTime)),
// endTime: dataFormatetmd(new Date(this.ruleForm.endTime)),
// }
// // download.exportExcel("http://localhost:8001/fmis/test/export-excel-file",{title:"title","rowNum":23},"逝者火化档案_"+download.getDateTime()+".xls");
// download.exportExcel(Type['loadCommodityDataExport'], postData, "小商品日销售统计_" + download.getDateTime() + ".xlsx");
if(this.multipleSelection.length==0&&this.tableData.length>0){
let xlsxParam = { raw: true };
let name ='每日火化量统计'
let wb={}
if(this.tableData.length==0){
return this.$message('暂无数据可导出')
}
wb= XLSX.utils.table_to_book(
document.querySelector("#res_table"),
xlsxParam
);
/* 从表生成工作簿对象 */
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
`${name}${(new Date()).valueOf()}.xlsx`
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}else {
}
},//打开逝者档案
},
}
</script>
<style>
.dailyCremationVolume .PageContent .PageItems .el-input, .dailyCremationVolume .PageContent .PageItems .el-select {
width: 8vw;
min-width: 100px;
}
/* .dailyCremationVolume .el-dialog__header {
background-color: cornflowerblue !important;
} */
.dailyCremationVolume .el-dialog__title, .dailyCremationVolume .el-dialog__headerbtn .el-dialog__close {
color: white;
}
.dailyCremationVolume .el-dialog {
min-width: 300px !important;
}
.dailyCremationVolume .PageItems .el-input, .dailyCremationVolume .PageItems .el-select {
width: 8vw;
min-width: 100px;
}
.dailyCremationVolume .detail .el-form-item {
margin-bottom: 5px;
}
</style>
<style scoped>
/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
::v-deep .el-table thead.is-group th {
background: none;
padding: 0px;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none; /*中间的横线去掉*/
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
text-align: right; /*上边文字靠右*/
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
text-align: left; /*下边文字靠左*/
}
/*核心代码*/
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 100px; /*斜线的长度*/
top: 0;
left: 0;
background-color: grey;
opacity: 0.2;
display: block;
/* transform: rotate(-43deg); */
/* transform: rotate(-70deg); */
transform: rotate(-50deg);
-webkit-transform-origin: top;
transform-origin: top;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 100px; /*斜线的长度*/
bottom: 0;
right: 0;
background-color: grey;
opacity: 0.2;
display: block;
/* transform: rotate(-45deg); */
transform: rotate(-50deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
height: 27.4px;
}
</style>