vue项目中pdfjs-dist实现在线浏览PDF文件

1. 安装 pdfjs-dist

首先,通过 npm 安装 pdfjs-dist

bash 复制代码
npm install pdfjs-dist@2.5.207 --save

2. 配置 Worker 文件路径

pdfjs-dist 需要一个 Worker 文件来处理 PDF 的加载和渲染。需要指定 Worker 文件的路径:

js 复制代码
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry'; // 确保 worker 文件被引入

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url
).toString();

3. 创建 PDF 查看器组件

在 Vue 组件中,使用 pdfjs-dist 加载并渲染 PDF 文件:

vue 复制代码
<template>
  <div>
    <canvas v-for="page in pages" :key="page" :id="`pdf-canvas-${page}`" class="pdf-page" />
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url
).toString();

export default {
  data() {
    return {
      pdfUrl: 'http://example.com/path/to/your.pdf', // PDF 文件路径
      pages: 0, // PDF 总页数
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      const pdf = await loadingTask.promise;
      this.pages = pdf.numPages; // 获取 PDF 总页数

      for (let i = 1; i <= this.pages; i++) {
        this.renderPage(pdf, i);
      }
    },
    renderPage(pdf, pageNumber) {
      pdf.getPage(pageNumber).then((page) => {
        const canvas = document.getElementById(`pdf-canvas-${pageNumber}`);
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1.5 }); // 设置缩放比例
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        const renderContext = {
          canvasContext: context,
          viewport,
        };
        page.render(renderContext);
      });
    },
  },
};
</script>

<style>
.pdf-page {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>
相关推荐
小*-^-*九2 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
AI视觉网奇4 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1234 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
wyzqhhhh7 小时前
less和sass
前端·less·sass
Nan_Shu_6148 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel9 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
老华带你飞10 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始10 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible10 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫10 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js