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>
相关推荐
掘金安东尼8 小时前
Caddyfile:用最简单的方式配置最现代的 Web 服务器
运维·服务器·前端
菠萝+冰8 小时前
React-Window 虚拟化滚动
前端·react.js·前端框架
皓月Code8 小时前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节
云中雾丽8 小时前
react中 所有给 children 传值的方式
前端
加蓓努力我先飞8 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
豆苗学前端8 小时前
企业级用户登录Token存储最佳实践,吊打面试官
前端·javascript·后端
李剑一8 小时前
vite框架下大屏适配方案
前端·vue.js·响应式设计
胖虎2658 小时前
从零搭建 Vue3 富文本编辑器:基于 Quill可扩展方案
vue.js
有点笨的蛋8 小时前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
文心快码BaiduComate8 小时前
冰城码力全开,共赴AI Coding英雄之旅!CEDxCNCC百度文心快码Meetup圆满落幕!
前端·后端·程序员