|
|
@@ -2,9 +2,25 @@
|
|
|
<div class="reportBox">
|
|
|
<div class="outlineBox">
|
|
|
<div class="btnBox">
|
|
|
- <el-button type="success" size="mini" @click="exportPDF"
|
|
|
- >导出PDF</el-button
|
|
|
+ <el-dropdown
|
|
|
+ trigger="click"
|
|
|
+ @command="callFn"
|
|
|
+ popper-class="psarDropdown"
|
|
|
>
|
|
|
+ <el-button style="color: #05bb4c" size="small" type="text"
|
|
|
+ >导出
|
|
|
+ <el-icon><arrow-down /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item command="exportPDF">PDF</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="exportWord">WORD</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ <!-- <el-button type="success" size="mini" @click="exportPDF"
|
|
|
+ >导出PDF</el-button
|
|
|
+ > -->
|
|
|
</div>
|
|
|
<template v-if="reportTitle">
|
|
|
<p
|
|
|
@@ -24,7 +40,7 @@
|
|
|
})
|
|
|
"
|
|
|
>
|
|
|
- 国家能源集团宁夏新能源开发有限公司{{ reportTitle }}
|
|
|
+ {{ reportTitle }}
|
|
|
</p>
|
|
|
</template>
|
|
|
<el-tree
|
|
|
@@ -33,7 +49,7 @@
|
|
|
children: 'children',
|
|
|
label: 'label',
|
|
|
}"
|
|
|
- style="height: calc(100% - 62px - 40px); overflow-y: scroll"
|
|
|
+ style="height: calc(100% - 48px); overflow-y: scroll"
|
|
|
@node-click="nodeClick"
|
|
|
>
|
|
|
<template #default="{ node, data }">
|
|
|
@@ -85,6 +101,10 @@
|
|
|
|
|
|
<script>
|
|
|
import Get_PDF from "@tools/fixGetPDF";
|
|
|
+import docxtemplater from "docxtemplater";
|
|
|
+import { saveAs } from "file-saver";
|
|
|
+import JSZipUtils from "jszip-utils";
|
|
|
+import PizZip from "pizzip";
|
|
|
export default {
|
|
|
components: {},
|
|
|
|
|
|
@@ -134,6 +154,7 @@ export default {
|
|
|
content: [],
|
|
|
},
|
|
|
],
|
|
|
+ sourceData: {},
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -230,6 +251,7 @@ export default {
|
|
|
subUrl: "economy/analysis/2023/3", // 请求接口地址，必传项
|
|
|
timeout: 60000, // 请求超时时间，默认 3s ，可缺省
|
|
|
success({ data }) {
|
|
|
+ that.sourceData = data;
|
|
|
that.treeData.forEach((pEle) => {
|
|
|
const content = data[pEle.label] || [];
|
|
|
if (content.length) {
|
|
|
@@ -243,7 +265,12 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- // 导出PDF
|
|
|
+ // 下拉列表调用函数
|
|
|
+ callFn(command) {
|
|
|
+ this[command]();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导出 PDF
|
|
|
exportPDF() {
|
|
|
this.BASE.showLoading({
|
|
|
text: "正在导出...请稍后...",
|
|
|
@@ -251,11 +278,67 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
Get_PDF.getPdf(
|
|
|
document.querySelector(".contentBox .page"),
|
|
|
- "健康评价报告概述"
|
|
|
+ "2023年3月经济运行分析报告"
|
|
|
);
|
|
|
this.BASE.closeLoading();
|
|
|
}, 50);
|
|
|
},
|
|
|
+
|
|
|
+ // 导出 WORD
|
|
|
+ exportWord() {
|
|
|
+ let wordData = {};
|
|
|
+ for (let key in this.sourceData) {
|
|
|
+ if (key === "标题") {
|
|
|
+ wordData[key] = this.sourceData[key][0];
|
|
|
+ } else {
|
|
|
+ let dataItem = [];
|
|
|
+ this.sourceData[key].forEach((content) => {
|
|
|
+ dataItem.push({ content });
|
|
|
+ });
|
|
|
+ wordData[key] = dataItem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 读取并获得模板文件的二进制内容
|
|
|
+ JSZipUtils.getBinaryContent(
|
|
|
+ "./static/template/wordTemplate.docx",
|
|
|
+ function (error, content) {
|
|
|
+ if (error) {
|
|
|
+ throw error;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建一个PizZip实例，内容为模板的内容
|
|
|
+ let zip = new PizZip(content);
|
|
|
+ // 创建并加载docxtemplater实例对象
|
|
|
+ let doc = new docxtemplater(zip, { linebreaks: true });
|
|
|
+ // doc.attachModule(new ImageModule(opts));
|
|
|
+
|
|
|
+ doc.setData(wordData);
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 用模板变量的值替换所有模板变量
|
|
|
+ doc.render();
|
|
|
+ } catch (error) {
|
|
|
+ // 抛出异常
|
|
|
+ let e = {
|
|
|
+ message: error.message,
|
|
|
+ name: error.name,
|
|
|
+ stack: error.stack,
|
|
|
+ properties: error.properties,
|
|
|
+ };
|
|
|
+ throw error;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
|
|
|
+ let out = doc.getZip().generate({
|
|
|
+ type: "blob",
|
|
|
+ mimeType:
|
|
|
+ "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
|
+ });
|
|
|
+ // 将目标文件对象保存为目标类型的文件，并命名
|
|
|
+ saveAs(out, "2023年3月经济运行分析报告.docx");
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
watch: {},
|
|
|
@@ -398,4 +481,33 @@ export default {
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.el-popper.is-light.psarDropdown {
|
|
|
+ background: rgb(22, 30, 30);
|
|
|
+ border: 1px solid #05bb4c;
|
|
|
+
|
|
|
+ .el-scrollbar__wrap > ul {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown-menu {
|
|
|
+ padding: 0;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown-menu__item {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown-menu__item:hover {
|
|
|
+ color: #05bb4c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-popper__arrow {
|
|
|
+ &::before {
|
|
|
+ border-top-color: #05bb4c !important;
|
|
|
+ border-left-color: #05bb4c !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
Koishi