vue实现pdf文件预览

Vue.js 可以通过一些第三方库来实现 PDF 文件的在线预览。其中比较流行的是`vue-pdf`和`jspdf-autotable`等库。下面是简单的步骤：

1. **安装依赖**：
首先需要在项目中安装对应的库，例如使用`vue-pdf`：

   npm install vue-pdf --save

2. **引入并注册组件**：
在 Vue 组件中，导入 `VuePdf` 或者 `PDFViewer` 组件，并注册它：

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

   <script>
   import { VuePdf } from 'vue-pdf';
   
   export default {
     components: {
       VuePdf,
     },
     data() {
       return {
         pdfUrl: 'path/to/your/pdf/file.pdf', // 替换为实际的PDF文件路径
       };
     },
   }
   </script>

3. **配置文件路径**：
确保你的 PDF 文件路径是相对于组件的源文件或者是服务器上可访问的。

4. **事件监听**：
如果你想控制打开、关闭或者其他操作，可以监听 PDF 元素的事件，如 `@load` 或者 `@fullscreen`.

<template>
  <div>
    <button @click="toggleFullscreen">Toggle Fullscreen</button>
    <vue-pdf ref="pdf" :src="pdfUrl" @load="onLoad"></vue-pdf>
  </div>
</template>

<script>
export default {
  methods: {
    onLoad(pdf) {
      this.$refs.pdf.addEventListener('fullscreenchange', () => {
        console.log(pdf.isFullscreen); // 判断是否全屏
      });
    },
    toggleFullscreen() {
      this.$refs.pdf.toggleFullscreen();
    },
  },
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
    };
  },
};
</script>