如何在UI界面上新增上传按钮并保存文件到服务器

1. 如何在界面中新增“上传至服务器”按钮？

可通过配置 fragments 数组，在指定位置插入自定义上传按钮，核心是通过 target 定位插入位置、template 定义按钮样式，并绑定点击事件处理逻辑。

实现步骤：

配置按钮插入位置：通过 target: "download-file-button" 指定在“下载文件”按钮旁插入，action: UIExtension.UIConsts.FRAGMENT_ACTION.AFTER 表示插入在目标按钮之后；
定义按钮样式：template 中使用 ribbon-button 组件，设置图标（icon-class）、文字（text）和提示信息（tooltip-title）；
绑定点击事件：在 config 中为按钮绑定回调函数，实现文件获取与上传逻辑。

2. 新增上传按钮的完整示例代码是什么？

以下是在下载按钮后新增“上传至服务器”按钮的示例代码：

fragments: [
  {
    // 新增上传按钮配置
    target: "download-file-button", // 插入到“下载文件”按钮旁
    action: UIExtension.UIConsts.FRAGMENT_ACTION.AFTER, // 插入在目标按钮之后
    template:
      '<ribbon-button @tooltip tooltip-title="上传至服务器" name="upload-to-server-button" icon-class="fv__icon-toolbar-download" text="上传至服务器"></ribbon-button>',
    config: [
      {
        target: "upload-to-server-button", // 绑定新增按钮
        callback: function () {
          // 8.1.0+版本推荐使用getFile接口获取文件对象
          this.getPDFUI()
            .getPDFViewer()
            .then((pdfViewer) => {
              // 获取当前PDF文档的文件对象，包含文件名等信息
              return pdfViewer.currentPDFDoc.getFile({
                flags: 0,
                fileName: pdfViewer.currentPDFDoc.getFileName(),
              });
            })
            .then((file) => {
              // 处理文件（示例为前端下载，实际可替换为上传至服务器逻辑）
              console.info("文件信息：", file);
              const link = document.createElement("a");
              link.style.display = "none";
              link.href = URL.createObjectURL(file); // 创建文件下载链接
              link.setAttribute("download", file.name); // 指定下载文件名
              document.body.appendChild(link);
              link.click(); // 触发下载
              document.body.removeChild(link);
            });
        },
      },
    ],
  },
]

以上图片是添加按钮后的效果

3. 代码中 `getFile` 接口的作用是什么？

getFile 是福昕PDF SDK 8.1.0及以上版本提供的接口，用于便捷获取当前PDF文档的文件对象（File 类型），包含文档内容、文件名等信息，相比旧版 getStream 接口更易处理（无需手动转换为文件对象）。

参数说明：flags: 0 表示默认配置，fileName 用于指定文件名称（可从 currentPDFDoc.getFileName() 获取原文件名）；
返回值：Promise<File>， resolved 后得到可直接用于上传或下载的文件对象。

4. 如何将文件上传至服务器（而非前端下载）？

示例代码中“前端下载”仅为演示，若需上传至服务器，可在获取 file 对象后替换为上传逻辑，示例如下：

.then((file) => {
  // 替换为服务器上传逻辑
  const formData = new FormData();
  formData.append("pdfFile", file); // 将文件对象添加到表单
  // 调用服务端上传接口
  fetch("/api/upload-pdf", {
    method: "POST",
    body: formData,
  })
    .then((response) => {
      if (response.ok) {
        alert("上传成功");
      } else {
        alert("上传失败");
      }
    })
    .catch((error) => {
      console.error("上传出错：", error);
      alert("网络异常，请重试");
    });
});

5. 按钮样式可以自定义吗？

可以。通过修改 template 中的 ribbon-button 属性自定义样式：

图标：修改 icon-class 更换图标（如使用内置图标 fv__icon-toolbar-upload 或自定义CSS类）；
文字：调整 text 属性修改按钮显示文本（如改为“保存到服务器”）；
样式：通过添加 class 属性绑定自定义CSS（如 class="custom-upload-btn"），再通过CSS调整颜色、大小等。

如何将彩色PDF一键转为黑白版？

PDFViewCtrl中如何隐藏文本选中菜单

【福昕管理控制台】自动停用功能常见问题解答

如何去除PDF中的水印？

版式识别功能Layout Recognition功能Demo简介

自v2025.2.1和v14.0.1版本开始以及之后的版本，如何获取到msi的包

云文档列表右键菜单与程序语言不一致

如何重复使用区域高亮的功能

如何在页面中总是显示文档页面大小

如何实现总是在新窗口中打开文件