uni-app 需要APP端,内网使用预览后缀为doc docx pdf文件
uni-app 需要APP端,内网使用预览后缀为doc docx pdf文件
需要APP端,内网使用 预览 后缀为 doc docx pdf 文件
可以做
专业插件开发 q 1196097915
主页 https://ask.dcloud.net.cn/question/91948
专业开发
支持以下预览
支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla ,pages 等 Office 办公文档
支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档
支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档
支持 vsd, vsdx 等 Visio 流程图文件
支持 wmf, emf 等 Windows 系统图像文件
支持 psd ,eps 等 Photoshop 软件模型文件
支持 pdf ,ofd, rtf 等文档
支持 xmind 软件模型文件
支持 bpmn 工作流文件
支持 eml 邮件文件
支持 epub 图书文档
支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件
支持 dwg, dxf, dwf, iges , igs, dwt, dng, ifc, dwfx, stl, cf2, plt 等 CAD 模型文件
支持 txt, xml(渲染), xbrl(渲染), md(渲染), java, php, py, js, css 等所有纯文本
支持 zip, rar, jar, tar, gzip, 7z 等压缩包
支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等图片预览(翻转,缩放,镜像)
支持 tif, tiff 图信息模型文件
支持 tga 图像格式文件
支持 svg 矢量图像格式文件
支持 mp3,wav,mp4,flv 等音视频格式文件
支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览
支持 dcm 等医疗数位影像预览
支持 drawio 绘图预览
Office文档阅读、文件查看、文件阅读插件【非TBS内核,稳定简单,持续维护】
Android端现成的,项目已经在使用了。插件市场唯一自研,其他都是反编译我的。后续版本已经加固了
iOS使用系统自带就好了。
在uni-app中实现内网预览后缀为 .doc
、.docx
和 .pdf
文件的功能,可以通过集成第三方插件或者使用原生模块来实现。由于uni-app本身不直接支持这些文件格式的预览,我们可以考虑以下几种方式:
1. 使用PDF.js预览PDF文件
对于PDF文件,可以使用PDF.js,这是一个流行的开源JavaScript库,用于在网页中渲染PDF文件。
步骤:
-
引入PDF.js: 在
static
目录下下载并放置PDF.js库文件。 -
编写预览页面:
<template> <view> <web-view :src="pdfUrl"></web-view> </view> </template> <script> export default { data() { return { pdfUrl: '' }; }, mounted() { const filePath = 'http://your-intranet-server/path/to/yourfile.pdf'; // 内网服务器上的PDF文件路径 this.pdfUrl = `${this.$static}/pdfjs/web/viewer.html?file=${encodeURIComponent(filePath)}`; } }; </script>
2. 使用Office Viewer或Google Docs预览.doc和.docx文件
对于Word文件,可以利用Office Online Viewer或Google Docs进行预览。
步骤:
-
Office Online Viewer:
<template> <web-view :src="docUrl"></web-view> </template> <script> export default { data() { return { docUrl: '' }; }, mounted() { const filePath = 'http://your-intranet-server/path/to/yourfile.docx'; // 内网服务器上的Word文件路径 this.docUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(filePath)}`; } }; </script>
-
Google Docs:
<template> <web-view :src="googleDocsUrl"></web-view> </template> <script> export default { data() { return { googleDocsUrl: '' }; }, mounted() { const filePath = 'http://your-intranet-server/path/to/yourfile.docx'; // 内网服务器上的Word文件路径 this.googleDocsUrl = `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(filePath)}`; } }; </script>
注意事项
- 确保内网服务器允许这些预览链接的访问。
- 由于使用
web-view
组件,可能需要注意跨域问题。 - 对于敏感数据,确保通过安全的方式访问和传输文件。
上述方法利用了现有的在线服务进行文件预览,无需在APP端进行复杂的文件解析和处理,适合内网环境使用。