pdfjs-dist 实现pdf文件在线预览

最新推荐文章于 2025-04-10 17:09:09 发布

卷毛崽

最新推荐文章于 2025-04-10 17:09:09 发布

阅读量1.8w

点赞数 11

分类专栏： VUE 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_42221321/article/details/121995567

版权

本文介绍了如何使用pdfjs-dist库在前端实现PDF文件的在线预览，包括安装指定版本的pdfjs-dist，将PDF文件转化为base64数据，以及利用canvas展示PDF页面，并实现翻页功能。

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

pdfjs-dist 实现pdf文件在线预览

项目要求实现pdf文件在线预览，并且pdf预览通过上下页滚动pdf,且兼容ie浏览器
浏览器兼容参照了这位博主的文章，选择用pdfjs-dist 实现

实现效果

这是我随便写的一个pdf(一共2页)，可通过点击上下换页
谷歌浏览器
在这里插入图片描述

ie11
在这里插入图片描述

实现过程

（1）安装pdfjs-dist

npm install --save pdfjs-dist@2.0.943

这里需要指定2.0.943的版本，试过其他版本的都会多多少少在引入，执行行数时报错

（2）代码部分


<template>
  <div class="main-container">
    <input type="file" ref="fielinput" @change="uploadFile" />
    <div class="canvas-container">
      <canvas ref="myCanvas" class="pdf-container"> </canvas>
    </div>
    <div class="pagination-wrapper">
      <button @click="clickPre">上一页</button>
      <span>第{
   {
    pageNo }} / {
   {
    pdfPageNumber }}页</span>
      <button @click="clickNext">下一页</button>
    </div>
  </div>
</template>

<script>
const pdfJS = require("pdfjs-dist");

pdfJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry");
export default {
   
  mounted() {
   },
  data() {
   
    return {
   
      pageNo:

最低0.47元/天解锁文章