跳到内容
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 插件商店
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 插件商店
申请试用
  • 企业自动化
    • Compressor
  • 福昕CloudAPI
  • 福昕PDF SDK 软件开发工具包
    • 福昕PDF SDK(ActiveX)
    • 福昕PDF SDK(桌面/服务器)
    • 福昕PDF SDK(Plug-in)
    • 福昕 PDF SDK(安卓)
    • 福昕PDF SDK(iOS)
    • 福昕PDF SDK(Web)
  • 福昕管理控制台
    • 公有云
    • 私有云
    • 通用情况
  • 福昕阅读器
    • RMS插件
  • 福昕高级编辑器
    • AI助手
    • Mac版本
      • 常规问题
    • Windows版本
      • 表单
      • ECM集成
      • 互联PDF
      • 企业管理指南
      • 保护
      • 内容编辑
      • 创建PDF
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
      • 操作指南
    • 网页版
      • Foxit eSign
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:
  • 工具栏,页面布局

WebSDK 工具栏精简

  • 福昕知识库
  • 2026-09-20

嵌入业务系统时,很多场景其实只是「看 PDF」:缩放、翻页、搜索就够了,不需要完整注释/表单编辑器。这时可以直接换一套自定义 Appearance,从布局层只保留需要的控件。

核心两步

第一步,用 <template> 定义自己的 layout:工具栏里只放 Hand、缩放、翻页、搜索等;中间放 <viewer>。

<template id="layout-template">
  <webpdf>
    <toolbar name="toolbar">
      <group-list>
        <group name="home-tab-group-hand">
          <hand-button></hand-button>
          <selection-dropdown></selection-dropdown>
        </group>
        <group name="home-tab-group-zoom">
          <zoom-out-button></zoom-out-button>
          <zoom-in-button></zoom-in-button>
          <editable-zoom-dropdown></editable-zoom-dropdown>
        </group>
        <group name="home-tab-group-goto">
          <goto-prev-page-button></goto-prev-page-button>
          <goto-page-input></goto-page-input>
          <goto-next-page-button></goto-next-page-button>
        </group>
        <group name="home-tab-group-search">
          <search:search-input></search:search-input>
        </group>
      </group-list>
    </toolbar>
    <div class="fv__ui-body">
      <viewer @touch-to-scroll @zoom-on-wheel></viewer>
    </div>
    <!-- 打印等弹窗节点按需保留,勿一刀切删光 -->
  </webpdf>
</template>

第二步,继承 Appearance,把模板挂上去:

var CustomAppearance = UIExtension.appearances.Appearance.extend({
  getLayoutTemplate: function () {
    return document.getElementById('layout-template').innerHTML;
  }
});

var pdfui = new UIExtension.PDFUI({
  viewerOptions: { libPath: 'lib', jr: { readyWorker: readyWorker } },
  renderTo: '#pdf-ui',
  appearance: CustomAppearance,  // 不要用默认 adaptive
  addons: '...'
});

两点提醒

  1. template-container 里的对话框、右键菜单不要一刀切删光——打印、属性等仍依赖对应 dialog 节点。
  2. 局部增删优先 fragments。整页换成「预览壳」时,再用 Appearance。

相关内容

如何在Windows上使用福昕小工具(FoxitInfoCollectTool.exe)收集福昕高级PDF编辑器的日志?

如何在Microsoft Edge浏览器中启用 IE 模式?

如何解决福昕高级PDF编辑器外接显示器打印对话框窗口显示问题

如何用命令行或GPO部署安装福昕并同步激活程序?

如果需要比对同类型文档,或是一份文档的新旧稿件,有什么好方法?

奇数页和偶数页的文档如何合并成一个文档?

通过账号登录授权提示err8001怎么办?

如何给多个文档添加连续且唯一性的贝茨编号?

签名文件提取页面后,签名章丢失咋办?

Websdk删除注释侧边栏的部分二级弹框

推荐内容

如何在Windows上使用福昕小工具(FoxitInfoCollectTool.exe)收集福昕高级PDF编辑器的日志?

如何在Microsoft Edge浏览器中启用 IE 模式?

如何解决福昕高级PDF编辑器外接显示器打印对话框窗口显示问题

如何用命令行或GPO部署安装福昕并同步激活程序?

如果需要比对同类型文档,或是一份文档的新旧稿件,有什么好方法?

奇数页和偶数页的文档如何合并成一个文档?

通过账号登录授权提示err8001怎么办?

如何给多个文档添加连续且唯一性的贝茨编号?

WebSDK 工具栏精简

签名文件提取页面后,签名章丢失咋办?

产品
  • 应用行业
  • 白皮书
开发支持
  • 开发中心
  • SDK文档资料

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

©2026 福建福昕软件开发股份有限公司 版权所有

隐私策略