vue怎么展示本地pdf文件

要在Vue中展示本地PDF文件，可以使用第三方库如pdf.js或vue-pdf。

使用pdf.js：

1. 安装pdf.js库：npm install pdfjs-dist
2. 在Vue组件中引入pdf.js库：import pdfjsLib from 'pdfjs-dist'
3. 在Vue组件的mounted钩子函数中加载PDF文件：

mounted() {
  pdfjsLib.getDocument('/path/to/pdf/file.pdf').promise.then(pdf => {
    // 获取PDF的页数
    const numPages = pdf.numPages;

    // 加载第一页
    pdf.getPage(1).then(page => {
      const viewport = page.getViewport({ scale: 1.0 }); // 获取页面视图
      const canvas = this.$refs.pdfCanvas; // 获取用于展示PDF的Canvas元素
      const context = canvas.getContext('2d');

      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // 渲染第一页
      page.render({
        canvasContext: context,
        viewport: viewport
      });
    });
  });
}

4. 在Vue模板中添加用于展示PDF的Canvas元素：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

使用vue-pdf：

1. 安装vue-pdf库：npm install vue-pdf
2. 在Vue组件中引入vue-pdf库：import pdfViewer from 'vue-pdf'
3. 在Vue组件的components属性中注册vue-pdf组件：

components: {
  pdfViewer
}

4. 在Vue模板中使用vue-pdf组件，并通过src属性指定要展示的PDF文件路径：

<template>
  <div>
    <pdf-viewer :src="/path/to/pdf/file.pdf"></pdf-viewer>
  </div>
</template>

无论是使用pdf.js还是vue-pdf，都需要将PDF文件的路径传递给相应的组件进行展示