VUE打开PDF文件

在Vue.js应用程序中，为了打开PDF文件，通常不会直接在前端处理文件操作，因为JavaScript的安全策略不允许直接读取本地文件。但是，你可以借助一些库，如`vue-pdf`或者`pdfjs-dist`，来提供在浏览器环境下查看PDF的功能。

1. `vue-pdf`: 这是一个轻量级的Vue组件，它允许你在Vue应用中嵌入并预览PDF文档。安装这个库后，可以在组件中像这样使用：

<template>
  <div>
    <vue-pdf src="path/to/your/pdf/file.pdf" />
  </div>
</template>

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

export default {
  components: {
    VuePdf
  }
}
</script>

2. `pdfjs-dist`: 如果你需要更详细的控制，比如分页、交互等，可以使用Adobe的`pdfjs-dist`库。首先下载库，然后创建一个PDF Viewer实例，并绑定到HTML元素：

<template>
  <div id="pdf-container">
    <button @click="loadPdf">Load PDF</button>
  </div>
</template>

<script>
import { PDFViewer } from '@mozilla/pdf.js/web/viewer';

export default {
  methods: {
    loadPdf() {
      PDFViewer.use('default');
      const pdfUrl = 'path/to/your/pdf/file.pdf';
      PDFJS.getDocument(pdfUrl).promise.then(pdf => {
        const container = document.getElementById('pdf-container');
        const pdfPageView = new PDFViewer({ container, pdf });
        // 加载第一个页面
        pdfPageView.loadPage(1);
      });
    }
  }
}
</script>