使用Vue.js集成pdf.js实现在线浏览PDF文件

PDF格式已成为在线共享文档和电子书籍的标准格式之一。在以Vue.js为主要开发框架的项目中，我们可以使用pdf.js实现在线浏览PDF文件的功能。pdf.js是基于JavaScript的PDF文档渲染库，可以在浏览器中直接渲染PDF文件而不需要插件。

一、安装依赖

在使用Vue.js集成pdf.js之前，我们需要安装相关依赖。

npm install pdfjs-dist

这将在项目中安装pdf.js的核心文件。

二、创建Vue组件

创建一个Vue组件来承载pdf.js渲染的PDF文件。

<template>
  <div class="pdf-viewer">
    <canvas ref="pdfCanvas" width="100%"/>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist';

export default {
  name: 'PdfViewer',
  props: ['src'],
  data() {
    return {
      pdf: null,
      currentPage: 1,
      totalPages: 0,
      scale: 1,
    };
  },
  async mounted() {
    this.pdf = await pdfjsLib.getDocument(this.src).promise;
    this.totalPages = this.pdf.numPages;
    this.renderPage(this.currentPage);
  },
  methods: {
    async renderPage(pageNumber) {
      const page = await this.pdf.getPage(pageNumber);
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      const viewport = page.getViewport({ scale: this.scale });

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

<style scoped>
.pdf-viewer {
  width: 100%;
}
</style>

以上代码中，我们首先在Vue组件的template中创建了一个<canvas>元素，用来显示PDF的内容。然后在mounted钩子函数中使用pdfjsLib.getDocument()方法加载PDF文件，获取PDF文件总页数并调用renderPage()方法渲染第一页。在methods中的renderPage()方法中使用pdf.getPage()方法获取指定页数的PDF页，使用canvas元素及renderContext渲染出页面视图。

三、使用PdfViewer组件

现在我们可以在Vue.js项目的其他组件中使用PdfViewer组件来展示PDF文件。请注意，必须使用Vue.js的v-bind属性来绑定PDF文件的URL，如下所示：

<template>
  <div>
    <PdfViewer :src="pdfUrl"/>
  </div>
</template>

<script>
import PdfViewer from './PdfViewer';

export default {
  name: 'App',
  components: { PdfViewer },
  data() {
    return {
      pdfUrl: './example.pdf',
    };
  },
};
</script>

以上代码使用PdfViewer组件来展示一个名为example.pdf的PDF文件。

四、控制PDF视图

我们可以通过使用currentPage和totalPages来控制PDF文件的视图。为了更好的用户体验，我们可以改变PDF文件的scale，使用户可以缩放并拖拽文档，观看文档的不同部分。

<template>
  <div class="pdf-viewer">
    <div class="pdf-controls">
      <button @click="prevPage">Previous</button>
      <span>{{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage">Next</button>
      <button @click="zoomOut">-</button>
      <button @click="zoomIn">+</button>
    </div>
    <canvas ref="pdfCanvas" width="100%"/>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist';

export default {
  name: 'PdfViewer',
  props: ['src'],
  data() {
    return {
      pdf: null,
      currentPage: 1,
      totalPages: 0,
      scale: 1,
    };
  },
  async mounted() {
    this.pdf = await pdfjsLib.getDocument(this.src).promise;
    this.totalPages = this.pdf.numPages;
    this.renderPage(this.currentPage);
  },
  methods: {
    async prevPage() {
      if (this.currentPage = this.totalPages) {
        return;
      }
      this.currentPage += 1;
      await this.renderPage(this.currentPage);
    },
    async renderPage(pageNumber) {
      const page = await this.pdf.getPage(pageNumber);
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      const viewport = page.getViewport({ scale: this.scale });

      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport,
      };
      await page.render(renderContext);
    },
    zoomIn() {
      this.scale += 0.1;
      this.renderPage(this.currentPage);
    },
    zoomOut() {
      this.scale -= 0.1;
      this.renderPage(this.currentPage);
    },
  },
};
</script>

<style scoped>
.pdf-viewer {
  width: 100%;
}

.pdf-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.pdf-controls button {
  font-size: 1rem;
  padding: 0.5rem;
}

.pdf-controls span {
  font-size: 1.25rem;
}
</style>

以上代码中，我们添加了一些控件来控制PDF的视图，如上一页、下一页、缩小、放大等功能。我们使用pdf.getPage()方法获取指定页数的PDF页，并使用scale控制PDF视图的缩放大小。

总结

在这篇文章中，我们探讨了如何使用pdf.js在Vue.js代码中集成并渲染PDF文件。我们创建了一个Vue.js组件来包含pdf.js，并且在页面上展示PDF文件，并且添加了控件，用于控制PDF文件的视图。我们希望这将帮助你在你的Vue.js项目中实现在线浏览PDF文件的功能。