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

最新推荐文章于 2024-09-18 17:39:25 发布

卷毛崽

最新推荐文章于 2024-09-18 17:39:25 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_42221321/article/details/122446428

版权

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

摘要由CSDN通过智能技术生成

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