|
@@ -8,19 +8,28 @@
|
|
|
:title="modalTit"
|
|
|
:zIndex="1001"
|
|
|
destroyOnClose
|
|
|
- :bodyStyle="{padding: modalTit?'15px 15px 20px':'50px 32px 15px',background: '#f2f2f2'}"
|
|
|
@cancel="handleCommonCancel"
|
|
|
width="1024px">
|
|
|
<a-spin :spinning="spinning" tip="Loading...">
|
|
|
<div class="common-main">
|
|
|
- <vue-scroll :ops="ops" style="width: 100%;height: 70vh;">
|
|
|
- <!-- {{ page }} <span @click="page=page+1">下一页</span> -->
|
|
|
+ <div id="canvas"></div>
|
|
|
+ <div class="tools">
|
|
|
+ <div>
|
|
|
+ 调整比例:{{ Math.round(scalVal*100) }}%
|
|
|
+ <div><a-button size="small" @click="setScalVal(0)"><a-icon type="minus" /> 缩小</a-button></div>
|
|
|
+ <div><a-button size="small" @click="setScalVal(1)"><a-icon type="plus" /> 放大</a-button></div>
|
|
|
+ </div>
|
|
|
+ <!-- <div>
|
|
|
+ <div><a-button size="small" @click="handleDownload()"><a-icon type="download" /> 导出pdf</a-button></div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <vue-scroll :ops="ops" :style="{width: Math.round(scalVal*100)+'%',height: '70vh',margin:'0 auto'}">
|
|
|
<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
|
|
|
<pdf
|
|
|
ref="pdf"
|
|
|
v-for="(item,index) in pdfList"
|
|
|
:key="'pdf-'+index"
|
|
|
- style="width: 100%;"
|
|
|
+ :style="{width: '100%'}"
|
|
|
:src="getUrl('data:application/pdf;base64,' + item)"
|
|
|
:page="page"
|
|
|
:rotate="rotate"
|
|
@@ -77,6 +86,7 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ scalVal: 0.9,
|
|
|
isShow: this.openModal, // 是否打开弹框
|
|
|
show: true,
|
|
|
pdfList: [],
|
|
@@ -105,8 +115,18 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ setScalVal (t) {
|
|
|
+ this.scalVal = this.scalVal + (t ? 0.05 : -0.05)
|
|
|
+ if (this.scalVal > 1) {
|
|
|
+ this.scalVal = 1
|
|
|
+ }
|
|
|
+ if (this.scalVal < 0.5) {
|
|
|
+ this.scalVal = 0.5
|
|
|
+ }
|
|
|
+ },
|
|
|
getUrl (item) {
|
|
|
- return pdf.createLoadingTask({ url: item, CMapReaderFactory })
|
|
|
+ const src = pdf.createLoadingTask({ url: item, CMapReaderFactory })
|
|
|
+ return src
|
|
|
},
|
|
|
setData (data) {
|
|
|
// console.log(data)
|
|
@@ -141,10 +161,11 @@ export default {
|
|
|
this.$store.commit('SET_pdfPrintList', [])
|
|
|
this.$store.commit('SET_showPdfPrint', false)
|
|
|
this.$emit('cancel')
|
|
|
+ this.scalVal = 0.9
|
|
|
},
|
|
|
// 下载
|
|
|
handleDownload () {
|
|
|
-
|
|
|
+ console.log(this.$refs.pdf[0].pdf)
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -164,7 +185,24 @@ export default {
|
|
|
|
|
|
<style lang="less">
|
|
|
.common-pdfView-modal{
|
|
|
+ .ant-modal-body{
|
|
|
+ padding: 0 0 30px 0;
|
|
|
+ }
|
|
|
.common-main{
|
|
|
+ background-color: #fff;
|
|
|
+ .tools{
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ > div{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >div{
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.btn-box{
|
|
|
text-align: center;
|