admin管理员组文章数量:1648908
下载插件
npm install --save vue-pdf
创建组件
<template>
<div class="ins-submit-docs-content ins-submit-docs-pdf">
<div v-if="loading" style="position: absolute; top: 40%; width: 100%;text-align: center;">
<el-loading type="spinner" color="#fc8955" />
</div>
<el-empty description="文档加载失败" v-if="loadingError" />
<div v-show="numPages <= 50">
<pdf ref="morePDF" :src="src" :page="i" v-for="i in numPages" :key="i"></pdf>
</div>
<div v-show="numPages > 50">
<pdf ref="PDF" :src="src" :page="currentPage" @num-pages="numPages=$event" @loaded="loadPdfHandler"></pdf>
<div class="ins-pdf-button-box">
<span @click.stop="prePage">上一页</span>
<span>{{currentPage}}/{{numPages}}</span>
<span @click.stop="nextPage">下一页</span>
</div>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';
export default {
name : 'ins-docs-pdf',
props : {
src : {
type : String, //默认值,选中值
default : ''
}
},
data(){
return {
loading : true, //加载中
loadingError : false, //加载失败
numPages : 0, //分页
currentPage : 1, //当前显示页数
}
},
watch : {
src : {
deep : true,
immediate: true,
handler(val){
if(val){
this.getPDFnums(val)
}
}
}
},
components: {
pdf
},
methods:{
//计算pdf页码总数
getPDFnums(url) {
this.loading = true
//let loadURL = pdf.createLoadingTask(url)
let loadURL = pdf.createLoadingTask({
url: url,//你的pdf地址
CMapReaderFactory
})
loadURL.promise.then(pdf => {
this.numPages = pdf.numPages
this.currentPage = 1
this.$set(this, 'docsPDF.numPages', pdf.numPages)
this.loading = false
}).catch(err => {
this.loading = false;
this.loadingError = true;
})
},
// 上一页
prePage() {
var page = this.currentPage
page = page > 1 ? page - 1 : this.numPages
this.currentPage = page
},
// 下一页
nextPage() {
var page = this.currentPage
page = page < this.numPages ? page + 1 : 1
this.currentPage = page
},
// 回调
loadPdfHandler(e) {
this.currentPage = e
}
}
}
</script>
<style scoped>
</style>
父类引用
<el-table-column label="总结报告" align="center" prop="disasterSummarize" min-width="150px" show-overflow-tooltip>
<template slot-scope="scope">
<el-link @click="previewFile('http://localhost:8080' + scope.row.disasterSummarize)">{{ scope.row.disasterSummarize }}</el-link>
</template>
</el-table-column>
<el-dialog title="文件预览" :visible.sync="fileOpen" width="800px" append-to-body>
<pdf :src="src" style="width:100%" ref="pdf"></pdf>
</el-dialog>
<script>
import pdf from '@/components/PDF/index'
export default {
name: "Disaster",
data() {
return {
pdfUrl: '',
src: '',
fileOpen:false,
//......
};
},
components: {
//....
pdf
},
methods: {
previewFile (file) {
this.src = file
console.log(file);
// // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
// this.src = pdf.createLoadingTask(this.pdfUrl)
this.fileOpen = true
},
//......
}
};
</script>
版权声明:本文标题:vue——预览PDF 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729504542a1203475.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论