DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化水印显示（减少对展示内容的影响）

Browse Source
This commit is contained in:
danshihao
2022-11-15 11:44:37 +08:00
parent 31b00d5cae
commit c27a4674eb
5 changed files with 49 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Report/ReportDetail.vue
+18 -5
View File
@@ -25,18 +25,22 @@
<span>报告详情</span>
<el-button type="primary" @click="downloadRow(row)">报告下载</el-button>
</div>
<div class="preview-box" v-watermark="{ text: watermarkText }">
<div class="preview-content" v-html="content"></div>
</div>
</div>
</template>
<script>
import {downloadFile} from "../../utils/downloadFile";
import {downloadFile} from "@/utils/downloadFile";
import {formatDate} from '@/utils/date'
export default {
name: "ReportDetail",
data(){
return {
content: '',
watermarkText: '', // 水印
content: '',
row: {},
}
},
@@ -47,6 +51,7 @@ export default {
this.$router.push({path: '/report/list', query: {id: this.$route.query.id}});
return
}
this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`;
this.row = JSON.parse(this.$route.query.row);
this.$api.report.reportGetReportHtmlId({id: this.row.id}).then(({data}) => {
this.content = data.content;
@@ -137,18 +142,26 @@ export default {
color: #262626;
}
}
.preview-box {
// 定位使水印不溢出元素
position: relative;
// 居中
width: calc(100% - 13px - 14px);
margin-left: 13px;
.preview-content {
margin: 0 14px 0 13px;
.preview-content {
//margin: 0 14px 0 13px;
padding-bottom: 11px;
img {
max-width: 100% !important;
}
table{
margin: 0 auto;
margin: 0 auto;
}
}
}
}
</style>
src/views/Report/ReportList.vue
+6 -7
View File
@@ -151,12 +151,11 @@
<div class="preview-dialog-body" :class="{'active': fullscreen}">
<!-- <img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !fullscreen">
<img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen"> -->
<el-scrollbar>
<!-- 这里用v-if是让水印更新 -->
<div class="preview-content"
v-if="dialogPreview"
v-watermark="{ text: watermarkText, width: 300, textColor: 'rgba(100, 100, 100, 0.6)', isFull: false }"
v-html="content"></div>
<!-- 这里用v-if是让水印更新 -->
<el-scrollbar
v-if="dialogPreview"
v-watermark="{ text: watermarkText }">
<div class="preview-content" v-html="content"></div>
</el-scrollbar>
</div>
</el-dialog>
@@ -164,7 +163,7 @@
</template>
<script>
import {downloadFile} from "../../utils/downloadFile";
import {downloadFile} from "@/utils/downloadFile";
import {formatDate} from '@/utils/date'
export default {
src/views/Report/ReportManager.vue
+5 -6
View File
@@ -365,12 +365,11 @@
<div class="preview-dialog-body" :class="{'active': fullscreen}">
<!-- <img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !fullscreen">
<img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen"> -->
<el-scrollbar>
<!-- 这里用v-if是让水印更新 -->
<div class="preview-content"
v-if="dialogPreview"
v-watermark="{ text: watermarkText, width: 300, textColor: 'rgba(100, 100, 100, 0.6)', isFull: false }"
v-html="content"></div>
<!-- 这里用v-if是让水印更新 -->
<el-scrollbar
v-if="dialogPreview"
v-watermark="{ text: watermarkText }">
<div class="preview-content" v-html="content"></div>
</el-scrollbar>
</div>
</el-dialog>