uni-app 需要APP端,内网使用预览后缀为doc docx pdf文件

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 需要APP端,内网使用预览后缀为doc docx pdf文件

需要APP端,内网使用 预览 后缀为 doc docx pdf 文件

4 回复

可以做 专业插件开发 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文件。

步骤:

  1. 引入PDF.js: 在static目录下下载并放置PDF.js库文件。

  2. 编写预览页面

    <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进行预览。

步骤:

  1. 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>
    
  2. 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端进行复杂的文件解析和处理,适合内网环境使用。

回到顶部