vue 怎么引入 pdf.js

Vue 引入 pdf.js 的步骤：安装 pdf.js、配置 webpack、引入 pdf.js 文件、创建 Vue 组件、使用组件显示 PDF 文件。其中，安装 pdf.js 是最关键的一步，确保你下载并正确安装了所需的库文件。以下是详细步骤。

一、安装 pdf.js

在 Vue 项目中使用 pdf.js，首先需要安装 pdf.js 库。可以通过 npm 或 yarn 进行安装。打开终端，并在你的 Vue 项目根目录下运行以下命令：

npm install pdfjs-dist 或者 yarn add pdfjs-dist

二、配置 Webpack

为了确保 pdf.js 能够正确加载，你可能需要在 Webpack 配置中添加一些设置。以下是一个基本的 Webpack 配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        include: /node_modules/pdfjs-dist/,
        use: 'babel-loader'
      }
    ]
  }
};

此配置确保 pdf.js 的代码经过 Babel 转译，以便在所有现代浏览器中运行。

三、引入 pdf.js 文件

在你的 Vue 组件中引入 pdf.js 库。你可以在 Vue 组件的 script 部分这样做：

import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

这段代码首先引入了 pdf.js 库，然后设置了 Web Worker 的路径，以便 pdf.js 能够在后台处理 PDF 文件。

四、创建 Vue 组件

创建一个新的 Vue 组件来处理 PDF 文件的显示。以下是一个基本的组件示例：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
export default {
  name: 'PdfViewer',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.src);
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1.5 });
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
    }
  }
};
</script>
<style scoped>
canvas {
  border: 1px solid black;
}
</style>

这个组件接受一个 src 属性，表示 PDF 文件的 URL。当组件挂载时，它会加载并渲染 PDF 的第一页到一个 <canvas> 元素上。

五、使用组件显示 PDF 文件

最后，在你的 Vue 应用中使用这个组件来显示 PDF 文件。以下是一个基本的使用示例：

<template>
  <div>
    <PdfViewer src="/path/to/your/pdf/file.pdf"></PdfViewer>
  </div>
</template>
<script>
import PdfViewer from './components/PdfViewer.vue';
export default {
  name: 'App',
  components: {
    PdfViewer
  }
};
</script>

这个例子展示了如何在一个 Vue 组件中使用 PdfViewer 组件，并传入 PDF 文件的路径。

六、优化与扩展

1、处理多页 PDF 文件

上面的示例只展示了 PDF 文件的第一页。如果你需要处理多页 PDF 文件，可以在 PdfViewer 组件中添加分页功能。以下是一个示例：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="prevPage" :disabled="pageNum <= 1">Previous</button>
    <button @click="nextPage" :disabled="pageNum >= numPages">Next</button>
  </div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
export default {
  name: 'PdfViewer',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pdf: null,
      pageNum: 1,
      numPages: 0
    };
  },
  async mounted() {
    await this.loadPdf();
    this.renderPage(this.pageNum);
  },
  methods: {
    async loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.src);
      this.pdf = await loadingTask.promise;
      this.numPages = this.pdf.numPages;
    },
    async renderPage(pageNum) {
      const page = await this.pdf.getPage(pageNum);
      const viewport = page.getViewport({ scale: 1.5 });
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
    },
    prevPage() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.renderPage(this.pageNum);
      }
    },
    nextPage() {
      if (this.pageNum < this.numPages) {
        this.pageNum++;
        this.renderPage(this.pageNum);
      }
    }
  }
};
</script>
<style scoped>
canvas {
  border: 1px solid black;
}
button {
  margin: 5px;
}
</style>

这个扩展版本的 PdfViewer 组件包含了“上一页”和“下一页”按钮，可以让用户浏览 PDF 文件的所有页面。

2、添加缩放功能

为了让用户能够缩放 PDF 页面，可以在组件中添加一个缩放功能。以下是一个示例：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="prevPage" :disabled="pageNum <= 1">Previous</button>
    <button @click="nextPage" :disabled="pageNum >= numPages">Next</button>
    <button @click="zoomIn">Zoom In</button>
    <button @click="zoomOut">Zoom Out</button>
  </div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
export default {
  name: 'PdfViewer',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pdf: null,
      pageNum: 1,
      numPages: 0,
      scale: 1.5
    };
  },
  async mounted() {
    await this.loadPdf();
    this.renderPage(this.pageNum);
  },
  methods: {
    async loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.src);
      this.pdf = await loadingTask.promise;
      this.numPages = this.pdf.numPages;
    },
    async renderPage(pageNum) {
      const page = await this.pdf.getPage(pageNum);
      const viewport = page.getViewport({ scale: this.scale });
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
    },
    prevPage() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.renderPage(this.pageNum);
      }
    },
    nextPage() {
      if (this.pageNum < this.numPages) {
        this.pageNum++;
        this.renderPage(this.pageNum);
      }
    },
    zoomIn() {
      this.scale += 0.25;
      this.renderPage(this.pageNum);
    },
    zoomOut() {
      if (this.scale > 0.5) {
        this.scale -= 0.25;
        this.renderPage(this.pageNum);
      }
    }
  }
};
</script>
<style scoped>
canvas {
  border: 1px solid black;
}
button {
  margin: 5px;
}
</style>

这个示例在 PdfViewer 组件中添加了“放大”和“缩小”按钮，用户可以使用这些按钮调整 PDF 页面显示的缩放比例。

3、使用项目团队管理系统

在开发团队中，项目管理和协作是非常重要的。为了更好地管理和协作，可以使用一些项目管理系统。推荐使用研发项目管理系统PingCode，和通用项目协作软件Worktile。这两个系统可以帮助团队更高效地进行项目管理和任务分配。

PingCode 是一款专为研发团队设计的项目管理系统，提供了强大的需求管理、缺陷管理、迭代管理等功能。Worktile 则是一款通用的项目协作软件，适用于各种类型的项目团队，提供了任务管理、文件共享、即时通讯等功能。

七、总结

通过以上步骤，我们详细介绍了如何在 Vue 项目中引入和使用 pdf.js 库来显示 PDF 文件。我们不仅介绍了基本的引入和使用方法，还扩展了多页浏览和缩放功能。此外，我们还推荐了适用于团队管理和协作的项目管理系统，以帮助团队更高效地进行项目开发。

希望这篇文章对你在 Vue 项目中使用 pdf.js 有所帮助。如果你有任何问题或建议，欢迎留言讨论。