|
@@ -1,25 +1,37 @@
|
|
|
<template>
|
|
|
<div class="pdfView-box">
|
|
|
<div class="pdfView">
|
|
|
- <pdf
|
|
|
+ <!-- <pdf
|
|
|
v-for="i in curQue.data.numPages"
|
|
|
ref="pdf"
|
|
|
:key="i"
|
|
|
:src="pdfSrc"
|
|
|
:page="i"
|
|
|
@progress="loadedRatio = $event"
|
|
|
- />
|
|
|
+ /> -->
|
|
|
+ <iframe
|
|
|
+ :src="curQue.data.newpath"
|
|
|
+ width="100%"
|
|
|
+ height="1000px"
|
|
|
+ id="ifm"
|
|
|
+ ></iframe>
|
|
|
</div>
|
|
|
- <div v-show="loadedRatio!==1" class="progress">
|
|
|
- <el-progress type="circle" :width="70" color="#53a7ff" :percentage="Math.floor(loadedRatio*100)" />
|
|
|
- <br>
|
|
|
+ <!-- <div v-show="loadedRatio !== 1" class="progress">
|
|
|
+ <el-progress
|
|
|
+ type="circle"
|
|
|
+ :width="70"
|
|
|
+ color="#53a7ff"
|
|
|
+ :percentage="Math.floor(loadedRatio * 100)"
|
|
|
+ />
|
|
|
+ <br />
|
|
|
<span>{{ remindShow }}</span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import pdf from "vue-pdf";
|
|
|
+const Base64 = require("js-base64").Base64;
|
|
|
|
|
|
export default {
|
|
|
// import引入的组件需要注入到对象中才能使用
|
|
@@ -32,45 +44,49 @@ export default {
|
|
|
numPages: null,
|
|
|
remindShow: "加载文件中,文件较大请耐心等待...",
|
|
|
loadedRatio: 0,
|
|
|
- pdfSrc: ''
|
|
|
+ pdfSrc: "",
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.getNumPages();
|
|
|
+ // this.getNumPages();
|
|
|
+ let path =
|
|
|
+ `http://docpreview.utschool.cn/onlinePreview?url=` +
|
|
|
+ Base64.encode(this.curQue.data.file_url);
|
|
|
+ this.curQue.data.newpath = path;
|
|
|
},
|
|
|
methods: {
|
|
|
- getNumPages() {
|
|
|
- let str = this.curQue.data.fileRelativePath;
|
|
|
- str.replace(process.env.VUE_APP_BASE_API, '');
|
|
|
- let loadingTask = pdf.createLoadingTask(`${process.env.VUE_APP_PDF}${str}`);
|
|
|
- loadingTask.promise
|
|
|
- .then(pdff => {
|
|
|
- console.log("拿到结果");
|
|
|
- this.pdfSrc = loadingTask;
|
|
|
- this.numPages = pdff.numPages;
|
|
|
- this.curQue.data.numPages = pdff.numPages;
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.error("pdf 加载失败", err);
|
|
|
- });
|
|
|
- },
|
|
|
+ // getNumPages() {
|
|
|
+ // let str = this.curQue.data.fileRelativePath;
|
|
|
+ // str.replace(process.env.VUE_APP_BASE_API, '');
|
|
|
+ // let loadingTask = pdf.createLoadingTask(`${process.env.VUE_APP_PDF}${str}`);
|
|
|
+ // loadingTask.promise
|
|
|
+ // .then(pdff => {
|
|
|
+ // console.log("拿到结果");
|
|
|
+ // this.pdfSrc = loadingTask;
|
|
|
+ // this.numPages = pdff.numPages;
|
|
|
+ // this.curQue.data.numPages = pdff.numPages;
|
|
|
+ // })
|
|
|
+ // .catch(err => {
|
|
|
+ // console.error("pdf 加载失败", err);
|
|
|
+ // });
|
|
|
+ // },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
/* @import url(); 引入css类 */
|
|
|
-.pdfView-box{
|
|
|
- width:100%;
|
|
|
+.pdfView-box {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
.pdfView {
|
|
|
width: 100%;
|
|
|
}
|
|
|
-.progress{
|
|
|
- position: absolute;
|
|
|
- right: 50%;
|
|
|
- top: 50%;
|
|
|
- text-align: center;
|
|
|
- width: 500px;
|
|
|
- margin-right: -250px;
|
|
|
+.progress {
|
|
|
+ position: absolute;
|
|
|
+ right: 50%;
|
|
|
+ top: 50%;
|
|
|
+ text-align: center;
|
|
|
+ width: 500px;
|
|
|
+ margin-right: -250px;
|
|
|
}
|
|
|
</style>
|