sincos.cc-website/website/static/tool-uni-viewer.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uni-Viewer 文件预览组件 | Easy Data Collection</title>
<meta name="description" content="Uni-Viewer —— 面向企业后台、内网和私有化系统的纯前端文件预览组件：271 个扩展名、47 条预览链路，Office / PDF / CAD / 压缩包 / DICOM 全覆盖。">
<meta name="keywords" content="Uni-Viewer, 文件预览, 私有化部署, Office 预览, CAD 预览, Web Component">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="icon" href="/static/img/logo.svg" type="image/svg+xml">
<script src="/static/js/nav.js"></script>
</head>
<body>

<header class="site-header">
  <div class="container header-inner">
    <a class="brand" href="/">
      <img src="/static/img/logo.svg" alt="Easy Data Collection">
      <span class="brand-name">Easy Data Collection</span>
    </a>
    <nav class="main-nav" id="mainNav">
      <div class="nav-item has-dropdown">
        <a class="nav-link" href="/research/">前沿技术研究</a>
        <button class="nav-caret" type="button" aria-label="展开前沿技术研究">▾</button>
        <div class="dropdown">
          <a href="http://124.220.63.9:25000">Research Digest</a>
          <a href="/research/neural/">Neural Research</a>
          <a href="/research/reslib/">ResLib</a>
        </div>
      </div>
      <div class="nav-item has-dropdown">
        <a class="nav-link active" href="/tools/">工具开发</a>
        <button class="nav-caret" type="button" aria-label="展开工具开发">▾</button>
        <div class="dropdown">
          <a href="/tools/sequence-diagram/">Sequence-Diagram</a>
          <a class="active" href="/tools/uni-viewer/">Uni-Viewer</a>
          <a href="/tools/engineer-craft/">Engineer Craft</a>
          <a href="/tools/five-phases-observer/">The Five Phases Observer</a>
          <a href="/tools/unitouch/">UniTouch Interface</a>
          <a href="/tools/edc-lite-erp/">EDC Lite ERP</a>

          <a href="/tools/physics-ai-fluent/">Physics AI Fluent</a>
        </div>
      </div>
      <a class="nav-link" href="/resources/">资源中心</a>
      <div class="nav-item has-dropdown">
        <a class="nav-link" href="/license/">License</a>
        <button class="nav-caret" type="button" aria-label="展开 License">▾</button>
        <div class="dropdown">
          <a href="/license/apply">申请 License</a>
          <a href="/license/status">查询 / 下载</a>
          <a href="/license/package">资源包获取</a>
        </div>
      </div>
      <a class="nav-link" href="/blog/">博客</a>
    </nav>
    <button class="nav-toggle" id="navToggle" aria-label="菜单">☰</button>
  </div>
</header>

<main>
  <section class="page-hero">
    <div class="container">
      <p class="hero-eyebrow">工具开发 · WEB COMPONENT</p>
      <h1>Uni-Viewer</h1>
      <p class="page-hero-sub">面向企业后台、内网和私有化系统的纯前端文件预览组件。私有文件留在浏览器内，无需服务端转码，即可预览 Office、PDF/OFD、CAD、压缩包、邮件、图片、音视频和代码。</p>
      <div class="hero-actions">
        <a href="http://124.220.63.9:30000/admin/Uni-viewer" class="btn btn-light">项目主页（Gitea）</a>
        <a href="/tools/" class="btn btn-outline-light">返回工具开发</a>
      </div>
      <div class="hero-stats">
        <div class="hero-stat"><b>271</b><span>已注册扩展名</span></div>
        <div class="hero-stat"><b>47</b><span>预览链路</span></div>
        <div class="hero-stat"><b>8</b><span>框架 Full 包</span></div>
        <div class="hero-stat"><b>v3.1.1</b><span>当前稳定版</span></div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="section-head">
        <h2 class="section-title">核心能力</h2>
        <p class="section-desc">一个组件起步，统一文件源、生命周期、搜索、缩放、打印、导出和下载契约。</p>
      </div>
      <div class="grid">
        <div class="card"><div class="icon">⛨</div><h3>部署不出网</h3><p>浏览器内解析和渲染，支持离线网络、Docker、私有 CDN 和完整资源自托管，私有文件不离开内网。</p></div>
        <div class="card"><div class="icon">▤</div><h3>全格式覆盖</h3><p>Office（DOCX / XLSX / PPTX / 二进制 PPT）、PDF / OFD、CAD（DWG / DXF）、STEP 三维、Typst、XMind、压缩包、邮件、绘图、音视频、代码。</p></div>
        <div class="card"><div class="icon">◈</div><h3>专业格式扩展</h3><p>Adobe 设计文件、DICOM、数字签名容器、ELF / PE / Mach-O 二进制检查器按需启用，只读分析不执行文件。</p></div>
        <div class="card"><div class="icon">◉</div><h3>框架全覆盖</h3><p>Vanilla JS / Web Component 优先，同时提供 Vue 2.6 / 2.7 / 3、React 16.8 - 19、Svelte、jQuery 原生组件。</p></div>
        <div class="card"><div class="icon">⇣</div><h3>按需加载</h3><p>PDF、Office、CAD、Typst、压缩包、图纸、PSD、Mermaid 等重型能力只在命中格式时加载 Worker / WASM / 字体资产。</p></div>
        <div class="card"><div class="icon">⌘</div><h3>操作完整</h3><p>搜索、高亮、缩放、打印、导出 HTML、下载、水印、主题、生命周期钩子和按钮前置校验都走统一 API。</p></div>
        <div class="card"><div class="icon">✧</div><h3>有界多页 TIFF</h3><p>CCITT Group 4 TIFF 在独立懒加载边界逐页解码，支持整组缩放、旋转、适宽、页码状态与大图查看。</p></div>
        <div class="card"><div class="icon">⧉</div><h3>工程化接入</h3><p>CLI 一键生成示例：npm create uni-viewer@latest；Vite 插件自动发布同版本资源。</p></div>
        <div class="card"><div class="icon">⚖</div><h3>开源许可</h3><p>源码基于 Apache-2.0 许可，npm 生态持续维护，历史包同步更新。</p></div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="section-title">界面实录</h2>
      <p class="section-desc">同一套 API，覆盖办公文档、工程图纸与移动端。</p>
      <div class="gallery">
        <figure class="shot wide">
          <img src="/static/img/uni-viewer/demo-desktop.webp" alt="Uni-Viewer 桌面工作台 DOCX 预览">
          <figcaption>桌面工作台 —— 浏览器原生 DOCX 预览（固定玻璃工具栏 / 最近打开 / 沉浸画布）</figcaption>
        </figure>
        <figure class="shot contain">
          <img src="/static/img/uni-viewer/word.webp" alt="Word 文档预览">
          <figcaption>Office · Word</figcaption>
        </figure>
        <figure class="shot contain">
          <img src="/static/img/uni-viewer/spreadsheet.webp" alt="Excel 表格预览">
          <figcaption>Office · Excel</figcaption>
        </figure>
        <figure class="shot contain">
          <img src="/static/img/uni-viewer/presentation.webp" alt="PPT 演示文稿预览">
          <figcaption>Office · PPT</figcaption>
        </figure>
        <figure class="shot contain">
          <img src="/static/img/uni-viewer/cad.webp" alt="CAD 图纸预览">
          <figcaption>CAD · DWG 图纸（图层 / 结构 / 下载打印）</figcaption>
        </figure>
        <figure class="shot contain">
          <img src="/static/img/uni-viewer/demo-mobile.webp" alt="Uni-Viewer 移动端预览">
          <figcaption>移动端预览 —— 单一「更多」入口，适配小屏</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="section-title">快速接入</h2>
      <p class="section-desc">新项目可用 CLI 生成示例，已有项目按提示添加组件和资产配置。</p>
      <div class="grid">
        <div class="card"><h3>① 生成 / 添加</h3><p><span class="mono">npm create uni-viewer@latest my-viewer</span><br>或在已有项目中：<span class="mono">npx uni-viewer-cli@latest add .</span></p></div>
        <div class="card"><h3>② 选择组合</h3><p>CLI 默认 Standard 组合，<span class="mono">--profile full</span> 选择 Full 兼容包并添加 DICOM、数字签名能力。</p></div>
        <div class="card"><h3>③ 自托管资产</h3><p>Vite 使用 <span class="mono">@uni-viewer/vite-plugin</span>；其它构建工具运行 Full 包自带 CLI 复制同版本资源。</p></div>
      </div>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="container footer-inner">
    <div class="footer-brand">
      <img src="/static/img/logo.svg" alt="">
      <span>Easy Data Collection</span>
    </div>
    <span>Copyright &copy; 2026 Easy Data Collection. All rights reserved.</span>
    <span class="footer-links">
      <a href="/resources/">资源中心</a><span class="sep">·</span>
      <a href="/license/">License</a><span class="sep">·</span>
      <a href="/admin">管理页面</a><span class="sep">·</span>
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">苏ICP备2026056863号</a>
    </span>
  </div>
</footer>

</body>
</html>