前端vue2实现文件预览（pdf、excel、word、图片）

在Vue 2中实现文件预览通常涉及到使用第三方库来处理各种类型的文件，包括PDF、Excel、Word和图片。以下是一个简单的步骤指南：

1. **安装依赖**:
- 对于PDF预览，可以使用`vue-pdf`: `npm install vue-pdf`
- Excel、Word预览通常使用在线转换服务如`xlsx.js`或`docxtemplating`（针对Word模板），因为直接在浏览器内处理这类文件较为复杂。
- 图片则可以直接显示，不需要额外库。

2. **引入组件**:
- 对于PDF预览，创建一个`PDFViewer.vue`文件，导入并使用`<pdf-viewer>`标签：

     <template>
       <div>
         <pdf-viewer ref="pdfViewer" :src="fileUrl"></pdf-viewer>
       </div>
     </template>

3. **数据绑定**:
- 通过props接收文件内容和路径，例如：

     export default {
       props: ['fileContent', 'fileName'],
       data() {
         return { fileUrl: '' };
       },
       mounted() {
         this.fileUrl = window.URL.createObjectURL(new Blob([this.fileContent], { type: 'application/pdf' }));
       },
       beforeDestroy() {
         window.URL.revokeObjectURL(this.fileUrl);
       }
     }

4. **处理其他格式文件**:
- Excel/Word文件先上传到服务器，然后返回一个链接给前端显示，或者利用服务端工具提供API实时转换成HTML查看。
- 图片则直接设置`img`标签的`src`属性为文件URL即可。

5. **展示文件按钮**:
- 在你的组件模板中添加一个按钮，点击时触发文件选择或加载操作。

<button @click="loadFile">预览文件</button>

methods: {
  loadFile() {
    // 选择文件，这里假设是个文件上传功能
    const file = document.getElementById('fileInput').files[0];
    if (file) {
      // 然后按照上述步骤处理文件
    }
  }
}