|
|
|
@ -19,7 +19,7 @@ |
|
|
|
<div class="edit-content "> |
|
|
|
<div class="pdf-layout"> |
|
|
|
<div class="pdf-content"> |
|
|
|
<pdf id="pdfBox" :page="pageNum" :src="pdfSrc" @progress="loadedRatio = $event" |
|
|
|
<pdf id="pdfBox" :page="pageNum" :src="pdfUrl" @progress="loadedRatio = $event" |
|
|
|
@num-pages="totalPages = $event"></pdf> |
|
|
|
</div> |
|
|
|
<div class="btn-layout" v-if="totalPages"> |
|
|
|
@ -31,7 +31,7 @@ |
|
|
|
class="el-icon-arrow-right el-icon--right"></i></el-button> |
|
|
|
</el-button-group> |
|
|
|
</div> |
|
|
|
<div ref="contentToPdf" v-show="showExportBtn" style="width: 100%; margin-top: 30px;"> |
|
|
|
<div ref="contentToPdf" v-show="showExportBtn" style="width: 100%; margin-top: 30px;"> |
|
|
|
<div class="content-title"> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="subtitle"> {{ $t('page.business.study.studyMethod.qmhz') }}</div> |
|
|
|
@ -54,11 +54,11 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { studyMethod_readList, studyMethod_export } from '@/api/business/study/studyMethod' |
|
|
|
import html2canvas from 'html2canvas'; |
|
|
|
import { PDFDocument } from 'pdf-lib' |
|
|
|
|
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import pdf from 'vue-pdf' |
|
|
|
import Yd from './Yd.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "Xq", |
|
|
|
components: { pdf, Yd }, |
|
|
|
@ -66,6 +66,7 @@ export default { |
|
|
|
return { |
|
|
|
showExportBtn: false, |
|
|
|
pdfSrc: '', |
|
|
|
pdfUrl: '', |
|
|
|
open: false, |
|
|
|
pageNum: 1, |
|
|
|
loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了 |
|
|
|
@ -77,7 +78,7 @@ export default { |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
'nickName','name' |
|
|
|
'nickName', 'name' |
|
|
|
]), |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -115,20 +116,40 @@ export default { |
|
|
|
|
|
|
|
// 获取PDF总页数 |
|
|
|
getPageNum() { |
|
|
|
let loadingTask = pdf.createLoadingTask(this.pdfSrc); |
|
|
|
loadingTask.promise |
|
|
|
.then((pdf) => { |
|
|
|
this.totalPages = pdf.numPages; |
|
|
|
this.loadPdfFromUrl() |
|
|
|
// this.$nextTick(() => { |
|
|
|
// this.setWatermarkContent(); |
|
|
|
// }); |
|
|
|
|
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
this.$message.msgError("pdf加载失败"); |
|
|
|
}); |
|
|
|
// this.pdfUrl = pdf.createLoadingTask({ |
|
|
|
// url: this.pdfSrc, |
|
|
|
// cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.8.69/cmaps/', |
|
|
|
// cMapPacked: true, |
|
|
|
// }) |
|
|
|
// let loadingTask = pdf.createLoadingTask(this.pdfSrc); |
|
|
|
// loadingTask.promise |
|
|
|
// .then((pdf) => { |
|
|
|
// this.totalPages = pdf.numPages; |
|
|
|
// //this.loadPdfFromUrl() |
|
|
|
// // this.$nextTick(() => { |
|
|
|
// // this.setWatermarkContent(); |
|
|
|
// // }); |
|
|
|
|
|
|
|
// }) |
|
|
|
// .catch((err) => { |
|
|
|
// console.log(err) |
|
|
|
// }); |
|
|
|
|
|
|
|
const loadingTask = pdf.createLoadingTask({ |
|
|
|
url: this.pdfSrc, |
|
|
|
withCredentials: false, |
|
|
|
cMapUrl: 'https://unpkg.com/pdfjs-dist@2.16.105/cmaps/', |
|
|
|
cMapPacked: true, |
|
|
|
}) |
|
|
|
|
|
|
|
loadingTask.promise.then(pdf => { |
|
|
|
this.pdfDoc = pdf |
|
|
|
this.totalPages = pdf.numPages |
|
|
|
}).catch(err => { |
|
|
|
console.error('PDF加载失败:', err) |
|
|
|
}) |
|
|
|
|
|
|
|
this.pdfUrl = loadingTask |
|
|
|
}, |
|
|
|
// 上一页 |
|
|
|
prePage() { |
|
|
|
@ -148,10 +169,11 @@ export default { |
|
|
|
|
|
|
|
closeYd(val) { |
|
|
|
this.form.zt = val |
|
|
|
this.cancel() |
|
|
|
}, |
|
|
|
|
|
|
|
handleExport() { |
|
|
|
studyMethod_export({studyMethodId: this.form.id}).then(response => { |
|
|
|
studyMethod_export({ studyMethodId: this.form.id }).then(response => { |
|
|
|
let fileUrl = response.data.fileUrl |
|
|
|
this.$download.saveAs(process.env.VUE_APP_FILE_DOMAIN + fileUrl, this.form.ffmc + ".pdf"); |
|
|
|
}) |
|
|
|
|
luojie
2 months ago