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

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

安装依赖:

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

引入组件:

对于PDF预览，创建一个PDFViewer.vue文件，导入并使用<pdf-viewer>标签：<template>
<div>
<pdf-viewer ref="pdfViewer" :src="fileUrl"></pdf-viewer>
</div>
</template>
登录后复制

数据绑定:

通过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);
}
}
登录后复制

处理其他格式文件:

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

展示文件按钮:

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

<button @click="loadFile">预览文件</button>
登录后复制
methods: {
loadFile() {
// 选择文件，这里假设是个文件上传功能
const file = document.getElementById('fileInput').files[0];
if (file) {
// 然后按照上述步骤处理文件
}
}
}
登录后复制