跳到主要内容

嵌入式查看器

将 PDF 直接嵌入页面展示,提供完整的导航控件。

本页涵盖以下两种模式:

  • 嵌入式 PDF 查看器(关联型 PDF)
  • 手动嵌入 PDF(在主题设置中填写手动 URL)

嵌入式查看器的功能

嵌入式查看器将 PDF 直接显示在页面上。客户无需离开您的店铺,即可阅读、滚动、缩放和翻页。

PDF 查看器配置

对于关联区块(嵌入式 PDF 查看器),请在应用的 PDF 详情页中的 查看器配置 部分选择查看器类型。

对于手动区块(手动嵌入 PDF),请在主题编辑器的区块设置中选择查看器类型。

可用查看器类型:

自定义查看器(全功能)

  • 功能完整的 PDF 查看器,包含所有导航控件
  • 支持搜索、缩放工具及可自定义的显示选项
  • 针对移动端优化
  • 可配置:初始页、缩放级别、页面布局、滚动方向
  • 可开关:下载、工具栏、图片印章、高亮、绘图工具、文字选择

轻量查看器(快速简洁)

  • 界面简洁、加载迅速的查看器
  • 非常适合快速预览文档
  • 针对移动端优化
  • 无需配置,开箱即用

翻页效果查看器(交互式翻页)

  • 提供交互式翻页体验
  • 模拟阅读实体书或杂志的感觉
  • 非常适合目录、宣传册、营销材料
  • 未针对移动端优化
  • 可配置:动画样式、页面阴影、背景颜色

原生浏览器查看器(标准)

  • 使用浏览器原生 PDF 渲染
  • 无需额外查看器脚本
  • 最轻量的选项
  • 不同浏览器的表现可能略有差异

对于关联型 PDF,所选查看器适用于该 PDF 展示的所有位置。 对于手动区块,所选查看器适用于该区块中填写的所有 URL。

显示效果

嵌入式查看器根据您选择的查看器配置,将 PDF 直接显示在页面上:

自定义查看器显示:

  • 完整的 PDF 内容与导航工具栏
  • 翻页控件(上一页/下一页、缩放)
  • 搜索功能
  • 下载/打印按钮(如已启用)
  • 根据您的设置自定义功能

轻量查看器显示:

  • 简洁的 PDF 展示
  • 基础导航
  • 极简界面,加载迅速

翻页效果查看器显示:

  • 翻页动画效果
  • 类似翻书的阅读体验
  • 交互式翻页操作

适用场景

最适合以下情况:

  • 客户需要在您的网站上阅读的长篇文档
  • 需要缩放查看的技术规格文件
  • 需要浏览体验的目录
  • 页面有足够空间放置查看器的情况
  • 以桌面端用户为主的内容

不太适合以下情况:

  • 较短的 PDF(建议使用按钮模式)
  • 以移动端为主的店铺(可能显得拥挤)
  • 页面空间有限的情况
  • 一个页面有多个 PDF 的情况

在主题中添加嵌入式查看器

  1. 前往 在线商店 > 主题
  2. 点击当前主题上的 自定义
  3. 导航至希望显示 PDF 的页面
  4. 点击 添加版块添加区块
  5. 在应用下找到 PDF Connect
  6. 选择 嵌入式 PDF 查看器
  7. 点击 保存

如需使用手动模式,请添加 手动嵌入 PDF,并在区块设置中粘贴一个或多个 URL。

自定义嵌入式扩展

在主题编辑器中,您可以自定义嵌入式查看器在页面上的显示方式:

显示标题 — 开关区块标题的显示/隐藏

标题文本 — 自定义区块标题(如"PDF 文档")

查看器高度 — 以视口百分比设置高度(仅限桌面端,移动端使用全屏)

显示容器边框 — 为查看器区域添加边框

以上设置仅控制扩展的布局与样式。实际的 PDF 查看器功能(缩放、下载、工具栏、导航等)需在应用的各 PDF 查看器配置 部分进行设置。

对于 手动嵌入 PDF,查看器功能在区块设置中配置(无需关联 PDF)。

嵌入式查看器与多个 PDF

如果您为一个页面关联了多个 PDF,嵌入式查看器将纵向堆叠显示:

  • 第一个 PDF 显示在第一个查看器中
  • 第二个 PDF 显示在第二个查看器中
  • 客户向下滚动可查看每一个

这可能会使页面变得很长。建议使用按钮模式展示多个 PDF。

移动端的嵌入式查看器

查看器会适配移动端屏幕,但:

  • 占用较多纵向空间
  • 缩放控件可能较小
  • 在查看器内滚动可能不太方便
  • 以移动端为主的店铺建议改用按钮模式

查看器功能

缩放 — 客户可放大或缩小查看

翻页导航 — 跳转到指定页面

搜索 — 在 PDF 中查找文字(部分查看器支持)

下载 — 将 PDF 保存到设备(如已启用)

打印 — 直接从查看器打印(如已启用)

性能建议

优化 PDF 大小 — 5MB 以下的文件加载最快

懒加载 — 查看器仅在页面可见时加载

缩略图质量 — 第一页先加载,然后再加载完整 PDF

移动端注意 — 较大的文件在移动数据网络下加载可能较慢

后续步骤