如何在vue中实现文件预览功能(vue实战技巧)

编辑：rootadmin

如何在vue中实现文件预览功能文件流

推荐整理分享如何在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

本文链接地址:https://www.jiuchutong.com/zhishi/285148.html 转载请保留说明！

上一篇：el-upload实现上传文件并展示进度条(el-upload上传文件大小限制)

下一篇：VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频(vue中的...)