Vue 应用中实现 PDF 文件预览在 Vue 应用中实现 PDF 文件预览可以使用 vue-pdf 插件（实际上是

在 Vue 应用中实现 PDF 文件预览可以使用 vue-pdf 插件（实际上是 pdfjs-dist 和 vue-pdf 的组合）。vue-pdf 是一个 Vue 组件，封装了 pdfjs-dist 库，提供了简单的接口来展示 PDF 文档。

以下是如何在 Vue 应用中使用 vue-pdf 插件实现 PDF 预览的详细步骤。

1. 安装依赖

首先，你需要安装 vue-pdf 和 pdfjs-dist。

npm install vue-pdf pdfjs-dist

2. 设置 Vue 组件

以下是一个基本的 Vue 组件示例，展示了如何使用 vue-pdf 来预览 PDF 文件。

2.1 创建 Vue 组件

PDFViewer.vue

<template>
  <div>
    <pdf :src="pdfSrc" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { PDF } from 'vue-pdf';

export default defineComponent({
  components: {
    PDF
  },
  setup() {
    const pdfSrc = ref('path/to/your/pdf-file.pdf'); // PDF 文件的路径

    return {
      pdfSrc
    };
  }
});
</script>

<style scoped>
/* 添加一些样式来控制 PDF 预览的大小 */
.pdf-container {
  width: 100%;
  height: 100vh;
}
</style>

3. 配置 Vue 项目

3.1 配置 `pdfjs-dist`

有时你可能需要配置 pdfjs-dist，以确保 vue-pdf 正常工作。你可以在 main.js 或 main.ts 中进行配置。

main.js

import { createApp } from 'vue';
import App from './App.vue';
import { PDFJS } from 'vue-pdf';

// 配置 pdfjs-dist
PDFJS.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.16.105/es5/pdf.worker.min.js';

createApp(App).mount('#app');

4. 使用自定义 PDF 预览组件

如果你希望使用 vue-pdf 插件的更多功能，或自定义组件的行为，你可以按照以下步骤进行：

4.1 使用 PDF 页码和缩放功能

CustomPDFViewer.vue

<template>
  <div class="pdf-container">
    <pdf
      :src="pdfSrc"
      :page="currentPage"
      :scale="scale"
      @page-rendered="onPageRendered"
    />
    <div class="controls">
      <button @click="prevPage">Previous</button>
      <button @click="nextPage">Next</button>
      <input type="number" v-model="scale" min="0.5" max="3" step="0.1" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { PDF } from 'vue-pdf';

export default defineComponent({
  components: {
    PDF
  },
  setup() {
    const pdfSrc = ref('path/to/your/pdf-file.pdf');
    const currentPage = ref(1);
    const scale = ref(1);

    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    };

    const nextPage = () => {
      currentPage.value++;
    };

    const onPageRendered = () => {
      console.log('Page rendered');
    };

    return {
      pdfSrc,
      currentPage,
      scale,
      prevPage,
      nextPage,
      onPageRendered
    };
  }
});
</script>

<style scoped>
.pdf-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.controls {
  margin-top: 10px;
}

.controls button {
  margin: 0 5px;
}

.controls input {
  width: 60px;
  text-align: center;
}
</style>

5. 配置和调试

路径设置：确保 pdfSrc 指向正确的 PDF 文件路径，可以是本地路径或远程 URL。
样式调整：根据需要调整 .pdf-container 和 .controls 的样式，使其符合你的设计要求。

6. 总结

使用 vue-pdf 插件来实现 PDF 预览非常简单。通过以下步骤，你可以轻松地将 PDF 文件嵌入到 Vue 应用中：

安装 vue-pdf 和 pdfjs-dist。
创建一个 Vue 组件来使用 vue-pdf。
配置 pdfjs-dist（如果需要）。
自定义组件功能以满足特定需求。

以上示例展示了如何使用 vue-pdf 实现基本和自定义的 PDF 预览功能。根据你的需求，可以进一步扩展功能，例如支持文本搜索、页面缩放等。

Vue 应用中实现 PDF 文件预览