vue-pdf只显示一页问题解决

原创已于 2024-04-09 20:17:25 修改 · 置顶 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #pdf #javascript

于 2024-04-09 20:16:36 首次发布

文章讲述了如何使用Vue-PDF库在单页应用中动态加载并显示多页PDF，通过v-for循环实现每页独立的PDF组件，解决了默认只展示首页的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <pdf src=""></pdf>
</template>
<script>
  import pdf from 'vue-pdf'
  exprot default {
    component: {
      pdf
    }
  }
</script>

这个时候，多页的PDF只会显示第一页，这时各位可以去查看一下vue-pdf的源码，我们可以发现，它的实现过程是将PDF按页绘制在canvas上的，其页码数oage默认值是1，展示第一页的canvas。所以我们主要使用两种方式处理。

解决方案：使用v-for循环加载所有页面

<template>
    <div>
        <pdf
            v-for="i in numPages"
            :key="i"
            :src="src"
            :page="i"
            style="display: inline-block; width: 25%"
        ></pdf>
    </div>
</template>
 
<script>
 
import pdf from 'vue-pdf'
 
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
 
export default {
    components: {
        pdf
    },
    data() {
        return {
            src: loadingTask,
            numPages: 1,
        }
    },
    mounted() {
 
        this.src.promise.then(pdf => {
 
            this.numPages = pdf.numPages;
        });
    }
}
 
</script>