This commit is contained in:
linfso 2024-05-29 16:49:13 +08:00
parent 45b75c8e0d
commit d83818cf80
3 changed files with 15 additions and 87 deletions

View File

@ -98,6 +98,7 @@
"vue-meta": "2.4.0",
"vue-okr-tree": "^1.0.17",
"vue-pdf": "^4.2.0",
"vue-pdf-signature": "^4.2.7",
"vue-print-nb": "^1.7.5",
"vue-property-decorator": "^9.1.2",
"vue-router": "3.4.9",

View File

@ -1,89 +1,13 @@
<template>
<div id="container">
<div class="tools">
<!-- <el-button type="text" @click="FirstPage()">
<el-tooltip class="item" effect="light" content="第一页" placement="top">
<i class="el-icon-d-arrow-left"></i>
</el-tooltip>
</el-button>
<el-button type="text" @click="changePdfPage(0)">
<el-tooltip class="item" effect="light" content="上一页" placement="top">
<i class="el-icon-arrow-left"></i>
</el-tooltip>
</el-button>
<el-button type="text" @click="changePdfPage(1)">
<el-tooltip class="item" effect="light" content="下一页" placement="top">
<i class="el-icon-arrow-right"></i>
</el-tooltip>
</el-button>
<el-button type="text" @click="lastPage()">
<el-tooltip class="item" effect="light" content="最后一页" placement="top">
<i class="el-icon-d-arrow-right"></i>
</el-tooltip>
</el-button>
<el-button type="text" @click="setIsExit()" v-show="!isExit" style="margin-right:10px;">
<el-tooltip class="item" effect="light" content="页码选择" placement="top">
<i class="el-icon-setting"></i>
</el-tooltip>
</el-button>
<el-tooltip class="item" effect="light" content="页码选择" placement="top" v-show="isExit">
<el-select v-model="value" placeholder="请选择" @change="pageSelect" size="mini">
<el-option v-for="item in pageCount" :key="item" :label="'第 '+item+' 页'" :value="item"></el-option>
</el-select>
</el-tooltip>
<el-button type="text" @click="scaleD()">
<el-tooltip class="item" effect="light" content="放大" placement="top">
<i class="el-icon-zoom-in"></i>
</el-tooltip>
</el-button>
<el-button type="text" @click="scaleX()">
<el-tooltip class="item" effect="light" content="缩小" placement="top">
<i class="el-icon-zoom-out"></i>
</el-tooltip>
</el-button>
<el-button type="text" @click="clock()">
<el-tooltip class="item" effect="light" content="顺时针旋转" placement="top">
<i class="el-icon-refresh-right"></i>
</el-tooltip>
</el-button>
<el-button type="text" @click="counterClock()">
<el-tooltip class="item" effect="light" content="逆时针旋转" placement="top">
<i class="el-icon-refresh-left"></i>
</el-tooltip>
</el-button> -->
<div style="width:100%;text-align: right;">
<el-button type="text" @click="downPDF">
<el-tooltip class="item" effect="light" content="下载" placement="top">
<i class="el-icon-download"></i>
</el-tooltip>
</el-button>
<el-button type="text" @click="printPDF">
<el-tooltip class="item" effect="light" content="打印" placement="top">
<i class="el-icon-printer"></i>
</el-tooltip>
</el-button>
<el-button title="下载" type="primary" icon="el-icon-download" @click="downPDF">下载</el-button>
<el-button title="打印" type="primary" icon="el-icon-printer" @click="printPDF">打印</el-button>
</div>
<!-- <p class="total">
<el-tooltip class="item" effect="light" content="当前页" placement="top">
<b style="color:#F56C6C;cursor:pointer;">{{ currentPage }}</b> </el-tooltip>&nbsp;/&nbsp;
<el-tooltip class="item" effect="light" content="总页数" placement="top">
<b style="color:#67C23A;cursor:pointer;">{{ pageCount }}</b></el-tooltip>
</p> -->
</div>
<div class="main">
<div class="pdfview">
<pdf
v-for="i in pageCount" :key="i"
ref="pdf" id="pdf"
:page="i"
:src="pdfLoadUrl"
style="width: 100%;margin-bottom: 10px;"
@num-pages="currentPage=$event">
</pdf>
</div>
<!-- <pdf ref="pdf" id="pdf" :src="src" :page="currentPage" :rotate="pageRotate" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf> -->
<iframe style="width: 100%; height: 100%;" :src="pdfLoadUrl" frameborder="0"></iframe>
</div>
</div>
</template>
@ -126,7 +50,9 @@ export default {
pdfUrl(newVal) {
console.log(this.pdfUrl)
if(this.pdfUrl){
this.src=this.pdfUrl;
// this.src=this.pdfUrl;
this.pdfLoadUrl='/static/pdfjs/4.2.67/web/viewer.html?file=' + encodeURIComponent(this.pdfUrl)
console.log(this.pdfLoadUrl)
}
},
},
@ -253,9 +179,10 @@ export default {
.tools {
display: flex;
background: #e1e1e1;
width: 100%;
z-index:9999;
z-index: 9999;
position: absolute;
top: 20px;
right: 30px;
}
.total {

View File

@ -53,10 +53,10 @@
</div>
</div>
<el-dialog class="printPreDialog" title="预览" :visible.sync="openPdfView" width="70%" :close-on-click-modal="false" v-dialogDrag append-to-body>
<div style="height: 800px;width:100%;overflow: auto;">
<PdfViewer :pdfUrl="pdfUrl" style="width:100%" @onPrint="batchPrint" ></PdfViewer>
</div>
<el-dialog class="printPreDialog" title="预览" :visible.sync="openPdfView" width="95%" :close-on-click-modal="false" v-dialogDrag append-to-body>
<div style="height: 1600px;width:100%;overflow: auto;">
<PdfViewer :pdfUrl="pdfUrl" style="width:100%" @onPrint="batchPrint" ></PdfViewer>
</div>
</el-dialog>
</div>