vue实现在线预览上传的pdf文件

Vue.js可以结合一些插件和库来实现PDF文件的在线预览。一个常用的库是`vue-file-preview`，它允许你在Vue应用中轻松地预览各种类型的文件，包括PDF。以下是基本步骤：

1. 安装依赖：
使用npm或yarn安装所需的库：

   npm install vue-file-preview axios pdfjs-dist

2. 引入并配置：
在Vue组件中引入并注册VueFilePreview插件：

   import Vue from 'vue';
   import FilePreview from 'vue-file-preview';

   Vue.use(FilePreview);

3. 数据绑定：
创建一个数据属性来存储选中的文件，并在表单或其他元素上监听文件选择事件：

   <input type="file" @change="handleFileSelect" />
   
   <div :file-url="selectedPdfUrl" v-if="selectedPdfUrl"></div>

4. 处理文件选择：
更新`handleFileSelect`函数，处理文件选择并设置URL：

   methods: {
     handleFileSelect(event) {
       if (event.target.files && event.target.files[0]) {
         const file = event.target.files[0];
         this.selectedPdfUrl = URL.createObjectURL(file);
       }
     },
   },

5. 预览：
如果文件是PDF，你可以直接渲染`<file-preview>`标签来显示预览：

   <file-preview :file-url="selectedPdfUrl" :type="'application/pdf'" />

6. 清理URL：
当用户取消预览或者更换文件时，记得清理之前创建的URL对象，避免内存泄漏：

   beforeDestroy() {
     URL.revokeObjectURL(this.selectedPdfUrl);
   },