位置: IT常识 - 正文
如何在vue中实现文件预览功能(vue实战技巧)
编辑：rootadmin如何在vue中实现文件预览功能 文件流
本文链接地址:https://www.jiuchutong.com/zhishi/285148.html
转载请保留说明！
推荐整理分享如何在vue中实现文件预览功能(vue实战技巧)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue中key,vue怎么实现的,实现vuex,如何在vue中实现数组求和,如何在vue中实现数组求和,vue 实现,如何在vue中实现地图,如何在vue中实现数组求和,内容如对您有帮助，希望把文章链接给更多的朋友！
如何将各种文件的文件流(blob)转化为线上可以直接预览的数据，这里简单介绍四种不同类型的文件预览。分别是pdf，docx，xlsx，jpg/png/jpeg等。有一个事情是需要重点注意的，文件流必须保证能够被正常下载解析后才可以支持预览，否则以下使用的各种插件都可能会产生报错。（需着重关注文件加解密后文件是否会出现损坏的问题）
以下是从后端获取到的文件流形式：
docx的预览通过借助插件docx-preview实现。
① 首先安装该插件
npm install docx-preview② 引入对应包
import { renderAsync } from 'docx-preview';③调用函数，解析docx文件
renderAsync(res.data, document.getElementById("preload_box"), null, { className: "docx", // 默认和文档样式类的类名/前缀 inWrapper: true, // 启用围绕文档内容渲染包装器 ignoreWidth: false, // 禁止页面渲染宽度 ignoreHeight: false, // 禁止页面渲染高度 ignoreFonts: false, // 禁止字体渲染 breakPages: true, // 在分页符上启用分页 ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页 experimental: false, //启用实验性功能（制表符停止计算） trimXmlDeclaration: true, //如果为真，xml上一篇：el-upload实现上传文件并展示进度条(el-upload上传文件大小限制)
下一篇：VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频(vue中的...)
![[ 注意力机制 ] 经典网络模型2——CBAM 详解与复现(注意力机制加在什么位置)](https://www.jiuchutong.com/image/20231126/1700987153.jpg)
![苹果cmsV10响应式黑色主题编号v1003模板[自适应]-OK源码破解(苹果响应机制)](https://www.jiuchutong.com/image/20231126/1700988830.jpg)