### 实现
文件预览功能
在
Vue 3 中实现
文件（附件）
预览功能可以通过结合 `el-upload` 组件以及特定的处理逻辑来完成。对于不同类型的
文件，如图片、
PDF 或
Excel 文件，有不同的
方法来进行
预览。
#### 图片
预览
为了实现在选择图片之后立即显示其缩略图的效果，可以在上传组件中监听 `change` 事件，并通过 URL.createObjectURL
方法创建临时链接用于展示图像[^1]：
```javascript
// 处理图片
预览的
方法
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
```
####
PDF 预览
针对
PDF 文档，则推荐使用
pdf.js 库来解析和渲染文档页面。此库能够很好地适应大多数现代浏览器环境下的
PDF 显示需求:
安装依赖：
```bash
npm install --save
pdfjs-dist
```
编写相应代码片段以加载并呈现
PDF 内容：
```html
<object :data="
pdfUrl" type="application/
pdf" width="100%" height="600px"></object>
```
####
Excel 表格
预览
当涉及到
Excel 文件 (XLS/XLSX)，可以采用 SheetJS (xlsx) 来读取电子表格数据，并借助 Handsontable 或其他类似的可视化插件将其转换成 HTML table 进行展示[^2]。另外一种更简便的方式是在线查看器服务 API 如 Google Docs Viewer, Office Online Server 等，它们允许开发者轻松集成到自己的应用程序里去。
如果希望完全自主控制整个流程而不依赖第三方平台的话，那么就需要考虑构建
一个完整的解决方案链路——从前端发起请求获取二进制流直至最终呈现在界面上；这期间可能还会涉及跨域资源共享(CORS), MIME 类型设置等问题需要解决。
#### 使用 el-upload 和自定义指令简化操作
Element Plus 提供了
一个非常方便实用的上传控件叫做 `el-upload`, 它不仅支持拖拽上传还具备丰富的回调函数帮助我们更好地管理
文件交互过程中的各个阶段状态变化。配合上一些简单的 CSS 样式调整就能快速搭建起美观大方又易于使用的界面布局结构了。
此外还可以利用
Vue 自定义指令特性进一步增强用户体验感，比如自动聚焦输入框、限制
文件大小范围等
功能都可以很容易地被
封装进去形成通用模块以便日后重复调用减少冗余编码工作量。
```
vue
<template>
<div class="upload-demo">
<!-- ... -->
<el-button @click="submitUpload">提交</el-button>
<el-button type="primary" @click="dialogTableVisible=true">点击打开对话框</el-button>
<el-dialog :visible.sync="dialogTableVisible">
<img v-if="fileType === &#
39;image&#
39;" :src="previewSrc"/>
<iframe v-else-if="[&#
39;application/vnd.ms-
excel&#
39;, &#
39;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&#
39;].includes(fileType)" :src="&#
39;https://view.officeapps.live.com/op/embed.aspx?src=&#
39; + encodeURIComponent(previewSrc)" frameborder="0" style="width:100%;height:500px;"></iframe>
<embed v-else-if="fileType === &#
39;application/
pdf&#
39;" :src="previewSrc" type="application/
pdf" />
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogTableVisible: false,
previewSrc: &#
39;&#
39;,
fileType: &#
39;&#
39;
};
},
methods: {
handleFileChange(file){
const { raw } = file;
let reader = new FileReader();
reader.onloadend=(e)=>{
this.previewSrc=e.target.result;
if(raw.type.startsWith(&#
39;image&#
39;)){
this.fileType=&#
39;image&#
39;;
}
else{
this.fileType=raw.type;
}
this.dialogTableVisible=true;
};
if([&#
39;application/
pdf&#
39;,&#
39;application/ms
word&#
39;,
&#
39;application/vnd.ms-powerpoint&#
39;,
&#
39;application/vnd.ms-
excel&#
39;,
&#
39;application/vnd.openxmlformats-officedocument.
wordprocessingml.document&#
39;,
&#
39;application/vnd.openxmlformats-officedocument.presentationml.presentation&#
39;,
&#
39;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&#
39;
].indexOf(raw.type)>-1 || raw.name.endsWith(&#
39;.doc&#
39;)||raw.name.endsWith(&#
39;.
ppt&#
39;)){
this.previewSrc=URL.createObjectURL(raw);
this.handleFileChange({raw});
}
else if(raw.type.startsWith(&#
39;image&#
39;)){
reader.readAsDataURL(raw);
}
else{
alert(`不支持该类型(${raw.type})`);
}
}
}
};
</script>
```
文章介绍了如何使用微软的在线预览服务来快速预览公开访问的文件，特别是PDF、Excel、Word和PPT等类型。方法包括创建JS文件封装预览方法，通过`https://view.officeapps.live.com/op/view.aspx?src`结合文件地址，以及如何在页面中调用该功能。对于非支持预览的文件类型，如rar或zip，浏览器通常会直接下载。
5.一起来看看效果吧
扫一扫
6622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
