vue预览本地pdf文件

要在Vue中预览本地PDF文件，你可以使用pdf.js库。

首先，通过npm安装pdf.js：

npm install pdfjs-dist

然后在你的Vue组件中引入pdf.js：

import pdfjsLib from 'pdfjs-dist';

接下来，你需要定义一个data属性来存储PDF文件的URL和PDF文档对象：

data() {
  return {
    pdfUrl: 'path/to/your/local/pdf/file.pdf',
    pdfDoc: null
  }
}

在组件的mounted钩子函数中，使用pdf.js加载PDF文档：

mounted() {
  pdfjsLib.getDocument(this.pdfUrl).then((pdfDoc_) => {
    this.pdfDoc = pdfDoc_;
  });
}

现在你可以在模板中使用`<canvas>`元素来呈现PDF文档的页面。你可以使用`pdfDoc.getPage()`方法获取特定页面的呈现。

下面是一个简单的Vue组件，展示了如何使用pdf.js预览本地PDF文件：

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

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

export default {
  data() {
    return {
      pdfUrl: 'path/to/your/local/pdf/file.pdf',
      pdfDoc: null
    };
  },
  mounted() {
    pdfjsLib.getDocument(this.pdfUrl).then((pdfDoc_) => {
      this.pdfDoc = pdfDoc_;
      this.renderPage(1);
    });
  },
  methods: {
    renderPage(pageNum) {
      this.pdfDoc.getPage(pageNum).then((page) => {
        const canvas = this.$refs.pdfCanvas;
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1 });

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

        page.render({
          canvasContext: context,
          viewport: viewport
        });
      });
    }
  }
}
</script>

在这个组件中，我们在mounted钩子函数中加载PDF文档，并在第一页上呈现PDF文档。`renderPage()`方法获取特定页面并在`<canvas>`元素上呈现。你可以通过更改`renderPage()`方法中的pageNum参数来呈现不同页面的PDF文档。

最后，记得在你的Vue组件中引入CSS文件，该文件由pdf.js提供，用于正确呈现PDF文档：

<style>
@import '~pdfjs-dist/web/pdf_viewer.css';
</style>