vue 项目手写类似查看pdf的功能 左侧为目录 右侧是pdf显示

要在Vue项目中实现类似查看PDF的功能，你可以使用一些现有的JavaScript库来帮助你处理PDF文件的显示和操作。其中一个常用的库是 `pdf.js`，它是Mozilla开发的用于在网页中显示PDF文件的JavaScript库。

以下是实现这个功能的大致步骤：

1. 安装 `pdf.js` 库：
在你的Vue项目中使用 npm 或 yarn 安装 `pdf.js` 库：

   npm install pdfjs-dist

2. 创建一个PDF查看组件：
在Vue项目中创建一个组件，用于显示PDF文件。例如，你可以创建一个名为 `PdfViewer` 的组件。

   <template>
     <div>
       <div class="catalog">
         <!-- 左侧目录 -->
         <!-- 在这里插入你的目录内容 -->
       </div>
       <div class="pdf-container">
         <!-- 右侧PDF显示区域 -->
         <canvas ref="pdfCanvas"></canvas>
       </div>
     </div>
   </template>

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

   export default {
     mounted() {
       this.loadPdf();
     },
     methods: {
       async loadPdf() {
         const pdfUrl = 'path/to/your/pdf/file.pdf'; // 替换成你的PDF文件路径
         const loadingTask = pdfjs.getDocument(pdfUrl);

         try {
           const pdf = await loadingTask.promise;
           this.renderPdf(pdf);
         } catch (error) {
           console.error('Failed to load PDF:', error);
         }
       },
       renderPdf(pdf) {
         const canvas = this.$refs.pdfCanvas;
         const context = canvas.getContext('2d');

         pdf.getPage(1).then((page) => {
           const viewport = page.getViewport({ scale: 1 });
           canvas.width = viewport.width;
           canvas.height = viewport.height;

           const renderContext = {
             canvasContext: context,
             viewport: viewport
           };

           page.render(renderContext);
         });
       }
     }
   };
   </script>

   <style>
   .pdf-container {
     width: 70%; /* 调整宽度适应页面布局 */
     margin: 0 auto; /* 水平居中 */
   }
   </style>

在上面的示例中，我们使用 `pdfjs.getDocument()` 方法加载PDF文件，然后使用 `canvas` 元素将PDF的第一页渲染到画布上。

3. 在父组件中使用 `PdfViewer` 组件：
在你的父组件中使用 `PdfViewer` 组件，并在左侧目录区域插入你的目录内容。

   <template>
     <div>
       <PdfViewer />
     </div>
   </template>

   <script>
   import PdfViewer from '@/components/PdfViewer.vue';

   export default {
     components: {
       PdfViewer
     }
   };
   </script>

这样，你就可以在Vue项目中实现一个简单的PDF查看功能，左侧为目录，右侧为PDF显示区域。你可以根据自己的需求来扩展和美化这个功能。

请注意，上述示例中的PDF文件路径仅作为示例，你需要将其替换为你自己的PDF文件路径。

希望这能帮到你！如果还有其他问题，请随时提问。