在vue项目里做文件预览需求时，txt和mp4往往几分钟就能搞定，而docx和xlsx一旦要求纯前端实现，不少人第一反应是丢给iframe或者window.open，结果浏览器直接触发下载，页面什么都没展示。这篇文章把四种常见格式的纯前端预览方案完整梳理一遍，包括选库思路、完整代码以及实际项目中容易踩的坑。
txt与mp4：最简单的两种格式
txt属于纯文本，预览思路就是拿到文件内容后直接塞进页面。如果是本地文件，通过FileReader的readAsText方法读取；如果是服务器上的文件，用fetch请求后调用text()方法即可。需要注意编码问题，中文txt文件很多是GBK编码，直接用默认的UTF-8读取会得到乱码，这时需要明确指定编码，或者借助TextDecoder处理。
mp4更简单，HTML原生的<video>标签天然支持mp4播放，只需要把文件地址或者Blob URL赋给src属性。如果文件是通过接口以二进制流返回的，记得设置responseType为blob，再用URL.createObjectURL生成临时地址，播放完毕或组件销毁时调用URL.revokeObjectURL释放内存，否则长期使用会造成内存泄漏。
<template>
<div class="preview-box">
<pre v-if="type === 'txt'" class="txt-content">{{ txtContent }}</pre>
<video v-if="type === 'mp4'" controls class="video-player" :src="fileUrl"></video>
</div>
</template>
<script>
export default {
data() {
return { txtContent: '', fileUrl: '', type: 'txt' };
},
methods: {
async loadTxt(url) {
const res = await fetch(url);
this.txtContent = await res.text();
},
async loadVideo(url) {
const res = await fetch(url, { responseType: 'blob' });
const blob = await res.blob();
this.fileUrl = URL.createObjectURL(blob);
}
},
beforeDestroy() {
if (this.fileUrl) URL.revokeObjectURL(this.fileUrl);
}
};
</script>这两个格式唯一容易出问题的地方是跨域。如果文件存储在另一个域名下，服务器必须返回正确的CORS响应头，否则fetch会被浏览器拦截。video标签虽然受同源策略约束较松，但一旦需要通过blob中转，跨域问题就绕不开了。
docx预览：mammoth.js才是正确姿势
很多人尝试用iframe指向docx文件地址，指望浏览器像展示pdf那样展示word，这个想法在Chrome和Firefox上行不通。浏览器原生只支持pdf内嵌预览，docx会被当作下载文件处理。纯前端解析docx，目前最主流的方案是mammoth.js，它能把docx转换成HTML，保留标题、加粗、列表、图片等常见元素，体积也只有几百KB。
使用时先安装依赖，然后把文件转成ArrayBuffer传入。mammoth输出的是结构相对朴素的HTML，如果对样式要求高，可以自己写CSS美化，或者考虑docx-preview这个库，它对原文档样式的还原度更高，支持分页显示，但兼容性稍弱，复杂表格偶发渲染错位。选型建议是：只要内容不要样式用mammoth，要尽量贴近原文档外观用docx-preview。
npm install mammoth
// 组件中使用
import mammoth from 'mammoth';
async previewDocx(blob) {
const arrayBuffer = await blob.arrayBuffer();
const result = await mammoth.convertToHtml({ arrayBuffer });
// result.value 即转换后的HTML字符串
this.docxHtml = result.value;
}渲染时推荐用v-html指令，但要注意XSS风险。mammoth转换的内容理论上可控，如果文件来源不可信，最好对输出HTML做一次过滤。另外mammoth不支持doc老格式，遇到.doc文件它无法解析，这类文件只能引导用户下载后本地打开，或者由后端转换成docx再预览。
xlsx预览：SheetJS加luckyexcel的组合
Excel解析的事实标准是SheetJS（xlsx这个npm包），它能把xlsx文件解析成JSON数据，前端拿到数据后用表格组件渲染。如果项目里已经有Element UI或Ant Design Vue，直接用它们的Table组件展示即可，分页、固定列这些能力都是现成的。
这种方案的局限是样式全丢，单元格颜色、合并单元格、公式计算结果都可能丢失或需要额外处理。如果必须还原Excel原始外观，可以走luckysheet这条路线：用luckyexcel解析xlsx文件，再用luckysheet渲染成在线表格，还原度非常高，代价是包体积大、上手成本高。一般业务系统里，SheetJS解析加表格组件渲染已经够用，只有类似在线Excel产品的需求才值得上luckysheet。
npm install xlsx
import * as XLSX from 'xlsx';
async previewXlsx(blob) {
const arrayBuffer = await blob.arrayBuffer();
const workbook = XLSX.read(arrayBuffer, { type: 'array' });
const firstSheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[firstSheetName];
// 转成二维数组，header:1 表示按行输出
const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });
console.log(rows);
}多Sheet文件别忘了处理切换逻辑，把workbook.SheetNames渲染成标签页，点击切换时重新读取对应的sheet数据。日期单元格也是常见坑，SheetJS读出来的日期默认是序列数字，需要加cellDates: true参数并格式化后再展示，否则用户看到的就是一串看不懂的数字。
高频踩坑点汇总
第一个坑是文件获取方式。很多人用axios默认配置去请求文件，拿到的response被当成字符串处理，二进制已经损坏，无论用什么库解析都会报错。正确做法是设置responseType: 'blob'，让浏览器保留原始二进制数据。
第二个坑是内存管理。通过URL.createObjectURL创建的Blob地址，在组件销毁时必须释放，SPA页面反复进出预览组件，不释放的话内存占用会持续上涨。第三个坑是超大文件，几百MB的mp4或者几十MB的xlsx在低配手机上可能直接卡死页面，建议给文件大小设置阈值，超限提示下载后查看，mp4可以把video的preload属性设为metadata减少首屏加载压力。
最后是兜底策略。纯前端方案无法覆盖所有情况，加密的docx、损坏的文件、不常见的编码都可能让预览失败，一定要写好try-catch并给出友好提示，同时保留下载按钮作为降级入口。前端预览的本质是提升体验，而不是替代后端转换服务，把边界情况想清楚，这个功能才能做得稳。