vue——预览PDF

下载插件

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.numPagesthis.currentPage = 1this.$set(this, 'docsPDF.numPages', pdf.numPages)this.loading = false}).catch(err => {this.loading = false;this.loadingError = true;})},// 上一页prePage() {var page = this.currentPagepage = page > 1 ? page - 1 : this.numPagesthis.currentPage = page},// 下一页nextPage() {var page = this.currentPagepage = page < this.numPages ? page + 1 : 1this.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 = fileconsole.log(file);// // 有时PDF文件地址会出现跨域的情况,这里最好处理一下// this.src = pdf.createLoadingTask(this.pdfUrl)this.fileOpen = true},//......}
};
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！