vue-pdf实现在线预览本地pdf文件

Vue-PDF是一个用于Vue.js的库，它允许你在浏览器中嵌入并预览PDF文件，即使它们存储在本地而非服务器上。使用Vue-PDF，你可以轻松地将用户的本地PDF添加到你的网站上，并提供交互式的查看体验。以下是基本的步骤：

1. 安装依赖：首先需要安装`vue-pdf`插件。在项目中运行`npm install vue-pdf`或`yarn add vue-pdf`。

2. 配置引入：在你的Vue组件中，通过`<script>`标签引入`vue-pdf`的组件，并注册它。

<template>
  <div>
    <vue-pdf :src="pdfUrl" />
  </div>
</template>

<script>
import Vue from 'vue';
import VuePdf from 'vue-pdf';

Vue.use(VuePdf);

export default {
  components: {
    VuePdf,
  },
  data() {
    return {
      pdfUrl: '/path/to/your/local/pdf.pdf', // 替换为你的本地PDF文件路径
    };
  },
};
</script>

3. 设置PDF源：你需要提供一个URL指向你的PDF文件，这里用的是本地文件系统路径，但在实际生产环境中，你应该使用服务器地址。

4. 使用`@load`事件：为了监听PDF加载完成，可以使用`@load`事件处理函数。

<template>
  <vue-pdf :src="pdfUrl" @load="onLoadComplete"></vue-pdf>
</template>

<script>
// ... (其他部分保持不变)

methods: {
  onLoadComplete(pdf) {
    console.log('PDF loaded:', pdf);
    // 可在此处处理PDF加载后的操作，比如初始化缩放、导航等
  },
},
</script>