pdf导出改为打印

pull/1/head
LiuJiaNan 2024-02-21 17:31:16 +08:00
parent 8bf89a3736
commit b82fce61b9
2 changed files with 173 additions and 175 deletions

View File

@ -1,7 +1,10 @@
<template>
<layout-card>
<div class="pdf-page">
<div class="pdf-cover">
<div class="tr">
<el-button v-print="'#printContainer'" type="primary"></el-button>
</div>
<div id="printContainer">
<div class="cover print_use page_break">
<div class="top">
<h1>{{ data.cpd.CORP_NAME }}</h1>
<h1>秦安双重预防机制建设平台</h1>
@ -11,12 +14,9 @@
<h1>{{ data.cpd.CORP_NAME }}</h1>
<h1>{{ dayjs(startDate).format("YYYY年MM月") }}</h1>
</div>
<img src="/src/assets/images/print/cover-bg.png" alt="" />
</div>
<div class="pdf-print">
<!-- TODO"-->
<el-button type="primary">PDF导出</el-button>
</div>
<div class="pdf-content">
<div class="content">
<h1>1.概述</h1>
<p>
{{ data.cpd.CORP_NAME }}公司统一社会信用代码为{{
@ -60,7 +60,7 @@
</p>
</div>
<div class="pdf-content">
<div class="content">
<h1>3.隐患排查</h1>
<h4>3.1清单管理</h4>
<p>
@ -152,7 +152,7 @@
data.yys_count
}}已超期{{ data.cq_count }}
</p>
<p class="pdf-subtitle">隐患治理情况见表2</p>
<p class="subtitle">隐患治理情况见表2</p>
<table class="print_table">
<thead>
<tr>
@ -175,15 +175,20 @@
<td>{{ item.DEPARTMENT_NAME }}</td>
<td>{{ item.HIDDENDESCR }}</td>
<td>{{ item.RECTIFYDESCR }}</td>
<td v-if="item.STATE === '-1'"></td>
<td v-if="item.STATE === '1'">
<td>
<span v-if="item.STATE === '1'">
{{
item.HIDDENLEVEL === "hiddenLevel0001" ? "待整改" : "整改中"
}}
</span>
<span v-else-if="item.STATE === '3'"> 已整改 </span>
<span v-else-if="item.STATE === '4'"> 已验收 </span>
<span v-else-if="item.STATE === '-1'"> 已超期 </span>
<span v-else-if="item.STATE === '10'"> 验收打回 </span>
<span v-else-if="item.STATE === '100'"> 暂存 </span>
<span v-else-if="item.STATE === '101'"> 待指派 </span>
<span v-else-if="item.STATE === '102'"> 指派中 </span>
</td>
<td v-if="item.STATE === '2'"></td>
<td v-if="item.STATE === '3'"></td>
<td v-if="item.STATE === '4'"></td>
<td>
<viewer :images="[VITE_FILE_URL + item.HD_IMGS]">
<img
@ -210,7 +215,7 @@
</table>
</div>
<div class="pdf-content">
<div class="content">
<h1>4.风险分析记录</h1>
<p>改进信息显示风险辨识台账更新记录</p>
<table class="print_table">
@ -238,7 +243,7 @@
</table>
</div>
<div class="pdf-content">
<div class="content">
<h1>5.教育培训情况</h1>
<h4>5.1教育培训</h4>
<p>
@ -314,7 +319,7 @@
</p>
</div>
<div class="pdf-content">
<div class="content">
<h1>6.特殊作业管理</h1>
<p>
{{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
@ -333,7 +338,7 @@
</p>
</div>
<div class="pdf-content">
<div class="content">
<h1>7.绩效考核</h1>
<p>
{{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
@ -449,7 +454,7 @@
</table>
</div>
<div class="pdf-content">
<div class="content">
<h1>8.结论建议</h1>
<p>
{{ data.corp_advice.ADVICE }}
@ -676,26 +681,9 @@ const fnConclusion = () => {
</script>
<style scoped lang="scss">
.pdf-page {
width: 100%;
border: 1px solid var(--el-border-color);
padding: 20px;
.cover {
position: relative;
.pdf-print {
float: right;
}
.pdf-cover {
top: -1523px;
position: absolute;
width: 100%;
height: 1497px;
background: #fff url("/src/assets/images/print/cover-bg.png") no-repeat 0
bottom;
background-size: 100% 630px;
.top {
padding-top: 400px;
@ -706,19 +694,29 @@ const fnConclusion = () => {
}
.bot {
padding-top: 700px;
padding-top: 200px;
h1 {
font-size: 18px;
text-align: center;
}
}
}
.pdf-content {
img {
position: absolute;
left: 0;
right: 0;
bottom: -100px;
height: 407px;
width: 100%;
z-index: -1;
}
}
.content {
position: relative;
.pdf-subtitle {
.subtitle {
text-align: center;
text-indent: 0;
margin-bottom: 1em;
@ -739,7 +737,6 @@ const fnConclusion = () => {
margin: 0 0 0.2em;
line-height: 1.6;
}
}
}
img {

View File

@ -1,15 +1,15 @@
<template>
<div>
<layout-card>
<div class="pdf-page">
<div class="pdf-cover">
<div id="printContainer">
<div class="cover print_use page_break">
<div class="top">
<h1>{{ info.CREATOR_NAME }}</h1>
<h1>
{{ dayjs(info.CREATTIME).format("YYYY") }}年度风险管控动态评估报告
</h1>
</div>
<div style="padding-top: 200px; margin: auto; width: 400px">
<div style="margin: auto; width: 400px">
<div style="display: flex">
<h1>编制</h1>
<div style="border-bottom: 1px solid #606266; width: 80%" />
@ -19,12 +19,12 @@
<div style="border-bottom: 1px solid #606266; width: 80%" />
</div>
</div>
<div class="bot" style="padding-top: 300px">
<div class="bot">
<h1>{{ info.CREATOR_NAME }}</h1>
<h1>{{ dayjs(info.CREATTIME).format("YYYY年MM月DD日") }}</h1>
</div>
<img src="/src/assets/images/print/cover-bg.png" alt="" />
</div>
<div class="pdf-content">
<table class="print_table">
<tr v-for="(item, index) in list" :key="index">
<td
@ -89,13 +89,17 @@
</tr>
</table>
</div>
</div>
<div class="tc mt-10">
<el-button v-if="type !== 'view'" type="primary" @click="fnSubmit">
确定
</el-button>
<!-- TODO"-->
<el-button v-if="type === 'view'" type="primary">PDF</el-button>
<el-button
v-if="type === 'view'"
v-print="'#printContainer'"
type="primary"
>
打印
</el-button>
</div>
</layout-card>
<assessment-results
@ -222,21 +226,9 @@ const fnSubmit = debounce(
</script>
<style scoped lang="scss">
.pdf-page {
width: 100%;
padding: 20px;
.cover {
position: relative;
.pdf-cover {
top: -1523px;
position: absolute;
width: 100%;
height: 1497px;
background: #fff url("/src/assets/images/print/cover-bg.png") no-repeat 0
bottom;
background-size: 100% 630px;
.top {
padding-top: 400px;
@ -247,13 +239,22 @@ const fnSubmit = debounce(
}
.bot {
padding-top: 700px;
padding-top: 200px;
h1 {
font-size: 18px;
text-align: center;
}
}
img {
position: absolute;
left: 0;
right: 0;
bottom: -100px;
height: 407px;
width: 100%;
z-index: -1;
}
}
</style>