标签：numPages vue xuetangx pdf PDF open
第一步 引入vue-pdf
npm install --save vue-pdf
第二步 页面中使用
<template>
<div>
<button @click="open">打开PDF</button>
<el-dialog title="PDf预览" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
<pdf v-for="i in numPages" :key="i" :src="src" :page="i"></pdf>
</el-dialog>
</div>
</template>
<script>
import pdf from 'vue-pdf'
var loadingTask = pdf.createLoadingTask('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf');
export default {
components: {
pdf
},
data () {
return {
src: loadingTask,
numPages: undefined,
dialogVisible: true
}
},
mounted () {
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
},
methods: {
//https://blog.csdn.net/2201_75705263/article/details/134383308 vue-pdf使用
open () {
let pdfUrl = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
window.open(pdfUrl, '_blank');
}
}
}
</script>
标签：numPages,
vue,
xuetangx,
pdf,
PDF,
open
From： https://www.cnblogs.com/fkcqwq/p/18243392