|
|
|
|
@ -1,17 +1,17 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="statistic"> |
|
|
|
|
<el-button type="primary">导出数据统计</el-button> |
|
|
|
|
<div class="contentContainer"> |
|
|
|
|
<div class="section" v-for="(item,index) in list" :key="index"> |
|
|
|
|
<div class="sectionTitle">{{item.title}}</div> |
|
|
|
|
<div class="content"> |
|
|
|
|
<div v-for="(p,i) in item.data" class="sectionDesc"> |
|
|
|
|
<el-button type="primary" @click="exportToWord">导出数据统计</el-button> |
|
|
|
|
<div class="contentContainer" id="table" ref="pdfContent"> |
|
|
|
|
<div class="section" style=" display: flex;align-items: center;margin: 40px 0;" v-for="(item,index) in list" :key="index"> |
|
|
|
|
<div class="sectionTitle" style=" font-size: 18px;font-weight: bold;width: 160px;flex-shrink: 0;">{{item.title}}</div> |
|
|
|
|
<div class="content" style="display: flex;"> |
|
|
|
|
<div v-for="(p,i) in item.data" class="sectionDesc" style="width:200px;"> |
|
|
|
|
<div class="item">{{p.name}}</div> |
|
|
|
|
<div class="num" v-if="index==0">{{huitong[p.countText]}}</div> |
|
|
|
|
<div class="num" v-if="index==1">{{welfare[p.countText]}}</div> |
|
|
|
|
<div class="num" v-if="index==2">{{consume[p.countText]}}</div> |
|
|
|
|
<div class="num" v-if="index==3">{{contribution[p.countText]}}</div> |
|
|
|
|
<div class="num" v-if="index==4">{{share_point[p.countText]}}</div> |
|
|
|
|
<div class="num" style="font-size: 24px;margin-top: 8px;" v-if="index==0">{{huitong[p.countText]}}</div> |
|
|
|
|
<div class="num" style="font-size: 24px;margin-top: 8px;" v-if="index==1">{{welfare[p.countText]}}</div> |
|
|
|
|
<div class="num" style="font-size: 24px;margin-top: 8px;" v-if="index==2">{{consume[p.countText]}}</div> |
|
|
|
|
<div class="num" style="font-size: 24px;margin-top: 8px;" v-if="index==3">{{contribution[p.countText]}}</div> |
|
|
|
|
<div class="num" style="font-size: 24px;margin-top: 8px;" v-if="index==4">{{share_point[p.countText]}}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -19,7 +19,12 @@ |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
import {getStatisticList} from '@/api/statistic' |
|
|
|
|
import {getStatisticList} from '@/api/statistic'; |
|
|
|
|
import htmlDocx from 'html-docx-js/dist/html-docx'; |
|
|
|
|
import FileSaver from 'file-saver'; |
|
|
|
|
|
|
|
|
|
// import html2canvas from 'html2canvas'; |
|
|
|
|
// import jsPDF from 'jspdf'; |
|
|
|
|
export default{ |
|
|
|
|
data(){ |
|
|
|
|
return{ |
|
|
|
|
@ -111,6 +116,37 @@ export default{ |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods:{ |
|
|
|
|
exportToWord() { |
|
|
|
|
// 获取需要转换的HTML内容 |
|
|
|
|
const htmlContent = document.querySelector('#table').outerHTML; |
|
|
|
|
// // 转换HTML为Docx文档 |
|
|
|
|
// const docxContent = htmlDocx.asBlob(htmlContent); |
|
|
|
|
|
|
|
|
|
// // 创建下载链接 |
|
|
|
|
// const downloadLink = document.createElement('a'); |
|
|
|
|
// downloadLink.href = URL.createObjectURL(docxContent); |
|
|
|
|
// downloadLink.download = '数据统计.docx'; |
|
|
|
|
|
|
|
|
|
// // 触发下载 |
|
|
|
|
// downloadLink.click(); |
|
|
|
|
const fullHtmlContent = ` |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html> |
|
|
|
|
<head> |
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
|
|
|
</head> |
|
|
|
|
<body> |
|
|
|
|
${htmlContent} |
|
|
|
|
</body> |
|
|
|
|
</html> |
|
|
|
|
`; |
|
|
|
|
|
|
|
|
|
// 使用 html-docx-js 将 HTML 转换为 Word 文档的 Blob 对象 |
|
|
|
|
const converted = htmlDocx.asBlob(fullHtmlContent); |
|
|
|
|
|
|
|
|
|
// 使用 file-saver 保存 Blob 对象为 Word 文档文件 |
|
|
|
|
FileSaver.saveAs(converted, '数据统计.docx'); |
|
|
|
|
}, |
|
|
|
|
getStatisticListHandle(){ |
|
|
|
|
getStatisticList().then(res=>{ |
|
|
|
|
|
|
|
|
|
@ -121,7 +157,29 @@ export default{ |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// exportPDF() { |
|
|
|
|
// const title = 'PDF导出示例'; |
|
|
|
|
// const content = this.$refs.pdfContent; |
|
|
|
|
|
|
|
|
|
// // 使用html2canvas将DOM元素转换为画布 |
|
|
|
|
// html2canvas(content).then(canvas => { |
|
|
|
|
// // 新建一个jspdf实例 |
|
|
|
|
// const pdf = new jsPDF(); |
|
|
|
|
|
|
|
|
|
// // 将canvas转换为图片 |
|
|
|
|
// const imgData = canvas.toDataURL('image/png'); |
|
|
|
|
|
|
|
|
|
// // 添加图像到PDF |
|
|
|
|
// const imgProps= pdf.getImageProperties(imgData); |
|
|
|
|
// const pdfWidth = pdf.internal.pageSize.getWidth(); |
|
|
|
|
// const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; |
|
|
|
|
// pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); |
|
|
|
|
|
|
|
|
|
// // 保存生成的PDF |
|
|
|
|
// pdf.save(title + '.pdf'); |
|
|
|
|
// }); |
|
|
|
|
// } |
|
|
|
|
}, |
|
|
|
|
created(){ |
|
|
|
|
this.getStatisticListHandle() |
|
|
|
|
|
liudan
8 months ago