参考官方示例: 官方地址:vue-pdf - npm <template> <div class="main"> <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="width: 100%" ></pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data() { return { src: '', numPages: undefined } }, mounted() { }, beforeRouteEnter(to, from, next) { // 路由守卫刚刚进入是没有实例化界面的,不能使用this const queryParam = to.query next(vm => { vm.src = pdf.createLoadingTask(queryParam.url) vm.src.promise.then(pdf => { vm.numPages = pdf.numPages }) }) } } </script> <style> .main { width: 80%; margin: 0 auto; padding: 5px; } </style>
使用路由打开新界面 queryParam.url 中可以是真实的后台文件服务器地址,也可以是通过二进制流返回后使用
var blob = new Blob([res], { type: 'application/pdf' }) const urlObj = URL.createObjectURL(blob)
创建的url ,直接打开就可以访问pdf,通过滚轮可以浏览全部文档