Vue pdf 多文件全部页面显示使用笔记

关注

原创最新推荐文章于 2026-07-02 15:31:48 发布 6.8k 阅读 AI 写同款· GEO 优化 ›

vue2中使用pdf.js浏览pdf文件，包括pdf显示、跳转指定页面、高亮关键词等功能里面有很多的版本，高版本的可能浏览器不兼容或者还要考虑手机上面的，最好下载低版本的，这里是v2.16.105版本。出现这个错误就是跨域的问题，找到pdfjs/web/viewer.js文件，注销跨域代码就可以。利用 web里面的viewer.html就可以直接打开pdf,里面有默认的一个pdf文档。在本地static里面创建文件夹pdfjs，然后将下载包里面的文件放进pdfjs。根据pdf.js内置函数，可直接修改当前页面，没有太大的跳动，利用Iframe。比如按照以上步骤方法为。阅读详情

pdf 多文件页面全部显示

最早发布于博客园

参考链接

https://github.com/FranckFreiburger/vue-pdf#createloadingtasksrc

单个文件

安装

npm install --save vue-pdf

单个pdf文件显示全部，我是直接复制的参考链接

<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: undefined,
		}
	},
	mounted() {

		this.src.promise.then(pdf => {

			this.numPages = pdf.numPages;
		});
	}
}

</script>

多个pdf文件全部显示

效果预览

多pdf文件全部预览

有几个点要注意

一本地pdf文件的话，pdf文件必须放置在 public （vue-cli 4+）或者 static （vue-cli < 3）文件夹下, 如果放置src/assets下，会读取报错，下面demo pdf文件放置在public下
二使用线上的pdf文件时，需要后台配合处理跨域，否则读取不了pdf文件。
三得使用async/await语法糖取出promise对象里面的pdf总页数。

<template>
    <div class="about">
        <template v-for="item in handelPdfList">
            <pdf
                    v-for="i in item.numPages"
                    :key="i"
                    :src="item.src"
                    :page="i"
                    style="display: inline-block; width: 25%"
            ></pdf>
        </template>
    </div>
</template>
<script>
    import pdf from 'vue-pdf'


    export default {
        name: "about",
        components: {
            pdf
        },
        data() {
            return {
                // src: loadingTask,
                numPages: undefined,
                pdfList: [
                    {
                        src: '/test.pdf'
                    },
                    {
                        src: '/test.pdf'
                    }
                ],
                handelPdfList: []
            }
        },
        mounted() {
            this.handelPdf()
        },
        methods: {
            async handelPdf() {
                for (let info of this.pdfList) {
                    // 测试使用本地的pdf文件 (必须放到public(vue-cli 4+)或者static文件里面)
                    // info.src = '/test.pdf'
                    // 测试使用 自己搭建 已跨域的pdf文件
                    // info.src = 'http://127.0.0.1:8010/assets/test.pdf'
                    info['numPages'] = await pdf.createLoadingTask(info.src).promise.then(pdf => {
                        return pdf.numPages
                    })
                }
                // 数据处理完毕后  再复制
                this.handelPdfList = this.pdfList
            }
        }
    }
</script>