pdfjs-dist pdf预览（打包正常）

最新推荐文章于 2026-04-27 10:00:29 发布

原创最新推荐文章于 2026-04-27 10:00:29 发布 · 1.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #css

本文介绍了如何在前端项目中通过pdfjs-dist库进行PDF预览。首先，详细说明了如何安装特定版本的pdfjs-dist，接着展示了用于显示PDF的showpdf组件。最后，探讨了如何将PDF数据传入组件以实现预览功能。

1、安装指定版本
“pdfjs-dist”: “^2.0.943”,
2、showpdf组件

<template>
	<!-- pdf base64显示 -->
	<div class="pdf" ref="pdf">
		<div class="button">
			<button @click="onPrevPage">上一页</button>
			<button @click="onNextPage">下一页</button>
			&nbsp;
			<span>Page: {{canvasNowPage}} / {{canvasTotalPage}}</span>
		</div>
		<div class="canvas" ref='canvas'>
			<canvas class="canvas" id="the-canvas" ref="canvas"></canvas>
		</div>
	</div>

</template>

<script>
	import PDFJS from 'pdfjs-dist'
	export default {
		data() {
			return {
				canvasNowPage: 1,
				canvasTotalPage: 1,
				pageNum: 1,
				pageRendering: false,
				pageNumPending: null,
				scale: 1.5
			};
		},
		props: ["pdfData"],
		mounted() {
			console.log("组件内")
			console.log(this.pdfData)
			// this.renderPage(this.pageNum)
		},
		methods: {
			renderPage(num) {
				var that = this;
				PDFJS.getDocument({
					data: atob(that.pdfData)
				}).then(res => {
					var pdfDoc = res
					// 页面显示总页数
					that.canvasTotalPage = pdfDoc.numPages
					// document.getElementById('page_count').textContent = pdfDoc.numPages;
					//默认获取第一页的数据对象
					pdfDoc.getPage(num).then(function(page) {
						// 获取第一页的视口对象
						var viewport = page.getViewport(that.scale);
						// 创建画布并设置缩放显示比列（将pdf缩放多少倍显示）
						var canvas = document.getElementById('the-canvas');
						var ctx = canvas.getContext('2d');
						canvas.height = viewport.height;
						canvas.width = viewport.width;
						var renderContext = {
							canvasContext: ctx,
							viewport: viewport
						};
						page.render(renderContext).then(res => {
							console.log("画布")
							console.log(res)
							that.pageRendering = false;
							if (that.pageNumPending !== null) {
								that.pageNumPending = null;
							}
							that.$nextTick(() => {
								that.$emit("canvasH", that.$refs.canvas.offsetHeight)
							})
						});
					});
				})
			},
			onPrevPage() { // 上一页
				if (this.canvasNowPage <= 1) {
					return;
				}
				this.canvasNowPage--;
				this.queueRenderPage(this.canvasNowPage);
			},
			onNextPage() { // 下一页
				if (this.canvasNowPage >= this.canvasTotalPage) {
					return;
				}
				this.canvasNowPage++;
				this.queueRenderPage(this.canvasNowPage);
			},
			queueRenderPage(num) { // 点击上一页或者下一页时，检测当前页有没有显示完成
				if (this.pageRendering) {
					this.pageNumPending = num;
				} else {
					this.renderPage(num);
				}
			}

		},
        watch:{
            pdfData(val){
                this.renderPage(this.pageNum)
            }
        }

	}
</script>

<style scoped>
	.pdf{
		width:100%;
	}
	.button{
		padding:.1rem;
	}
	.button span{
		font-size:.2rem;
	}
	.button button{
		font-size:.2rem;
		padding:.1rem .2rem;
		border-radius:.04rem;
		margin-right:.1rem;
	}
	.button button:hover{
		cursor: pointer;
	}
	.button button:active{
		background: #59A9FF;
		color:#FFF;
	}
	.canvas {
		padding:0;
		display: block;
		margin: 0 auto 0 auto;
	}
</style>