一文详解如何在vue中实现文件预览功能(请问如何在)

很多Vue项目中都需要PDF文件预览功能,比如合同ERP,销售CRM,内部文档CMS管理系统,内置PDF文件在线预览功能,下面这篇文章主要给大家介绍了关于如何在vue中实现文件预览功能的相关资料,需要的朋友可以参考下 目录

推荐整理分享一文详解如何在vue中实现文件预览功能(请问如何在)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:如何才能在,如何在什么,请问如何在,如何在十,如何何在,如何何在,请问如何在,请问如何在,内容如对您有帮助，希望把文章链接给更多的朋友！

文件流docx的预览pdf的预览xlsx预览图片的预览结语文件流

如何将各种文件的文件流(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