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><script>
import pdf from '@/components/PDF/index'export default {name: "Disaster",data() {return {pdfUrl: '',src: '',//......};},components: {//....pdf},methods: {previewFile (file) {this.src = fileconsole.log(file);// // 有时PDF文件地址会出现跨域的情况,这里最好处理一下// this.src = pdf.createLoadingTask(this.pdfUrl)this.fileOpen = true},//......}
};
</script>