在当今的前端开发中,PDF文档的展示和交互是一个常见的需求。Vue.js作为一款流行的JavaScript框架,提供了强大的功能来帮助我们实现这一需求。本文将深入探讨如何在Vue.js项目中使用PDF.js库来展示PDF文档,并实现一些基本的交互功能,如跳转页面、高亮关键词等。

1. 准备工作

首先,确保你的项目中已经安装了Vue.js和PDF.js。以下是安装PDF.js的步骤:

1.1 下载PDF.js

访问下载最新版本的PDF.js。考虑到兼容性问题,推荐下载低版本的PDF.js,如v2.16.105。

1.2 引入PDF.js到项目中

在本地项目的static文件夹中创建一个名为pdfjs的文件夹,然后将下载的PDF.js文件放入该文件夹中。

2. 实现PDF预览

2.1 创建Vue组件

创建一个名为PdfViewer.vue的新组件,用于展示PDF文档。

<template>
  <div>
    <iframe id="pdfIframe" :src="pdfUrl" width="100%" height="600px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: ''
    };
  },
  mounted() {
    this.pdfUrl = this.$route.query.file;
  }
};
</script>

2.2 路由配置

在Vue Router中配置路由,将PDF文件路径作为查询参数传递给PdfViewer.vue组件。

const router = new VueRouter({
  routes: [
    {
      path: '/pdf',
      name: 'PdfViewer',
      component: PdfViewer,
      query: {
        file: 'path/to/your/pdf/document.pdf'
      }
    }
  ]
});

2.3 显示PDF文档

现在,当用户访问/pdf路由时,PDF文档将在iframe中显示。

3. 实现交互功能

3.1 跳转到指定页面

要实现跳转到指定页面,需要使用PDF.js提供的API。

// 获取iframe内容
const iframe = document.getElementById('pdfIframe');
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

// 跳转到第10页
function goToPage(pageNumber) {
  const pdfjsLib = require('pdfjs-dist/legacy/build/pdf.js');
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdfjs/build/pdf.worker.js';

  pdfjsLib.getDocument(iframeDocument.src).promise.then(pdf => {
    pdf.getPage(pageNumber).then(page => {
      const scale = 1.5;
      const viewport = page.getViewport({ scale: scale });
      const canvas = document.createElement('canvas');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const context = canvas.getContext('2d');
      page.render({ canvasContext: context, viewport: viewport }).promise.then(() => {
        iframeDocument.body.appendChild(canvas);
      });
    });
  });
}

// 使用示例
goToPage(10);

3.2 高亮关键词

要高亮关键词,需要使用PDF.js提供的文本搜索API。

// 搜索关键词
function highlightKeyword(keyword) {
  const iframeDocument = document.getElementById('pdfIframe').contentDocument;
  const pdfjsLib = require('pdfjs-dist/legacy/build/pdf.js');
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdfjs/build/pdf.worker.js';

  pdfjsLib.getDocument(iframeDocument.src).promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const textContent = page.getTextContent();
      const regex = new RegExp(keyword, 'g');
      const highlightedText = textContent.items.map(item => {
        if (regex.test(item.str)) {
          return { str: item.str.replace(regex, `<span class="highlight">${keyword}</span>`), ...item };
        }
        return item;
      });
      page.updateTextContent(highlightedText);
    });
  });
}

// 使用示例
highlightKeyword('Vue.js');

3.3 修改页面大小为实际大小

要修改页面大小为实际大小,可以使用以下代码:

function setActualSize() {
  const iframe = document.getElementById('pdfIframe');
  const pdfjsLib = require('pdfjs-dist/legacy/build/pdf.js');
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdfjs/build/pdf.worker.js';

  pdfjsLib.getDocument(iframe.src).promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const scale = 1.5;
      const viewport = page.getViewport({ scale: scale });
      const canvas = document.createElement('canvas');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const context = canvas.getContext('2d');
      page.render({ canvasContext: context, viewport: viewport }).promise.then(() => {
        iframeDocument.body.appendChild(canvas);
        iframe.style.width = `${viewport.width}px`;
        iframe.style.height = `${viewport.height}px`;
      });
    });
  });
}

// 使用示例
setActualSize();

通过以上步骤,你可以在Vue.js项目中轻松实现PDF文档的交互式展示。希望本文对你有所帮助!