在实际项目开发中，经常遇到开发人员希望通过程序直接修改文档内容的需求，比如在Word文档中替换或插入特定位置的内容。举个简单的例子，在一个合同系统中，在网页表单修改了单订金额后，希望通过程序同步修改对应合同文档中的订单金额。
PageOffice产品的FileMaker组件提供了一种很好的解决方案。FileMaker组件能够在客户端后台修改文档中指定区域的内容，并自动上传至服务器，整个过程中不会显示文档界面。FileMakerCtrl 本质上就是一个没有界面的 PageOfficeCtrl，也是调用客户端计算机上的Office原生接口处理文件的，所以此方案有两个优点：一是可以确保文档格式的原汁原味；二是不需要在服务器上安装Office软件，也不限制服务器的操作系统平台，避免了对服务器造成额外压力和并发操作的问题。
下面就以使用程序修改一份荣誉证书中颁发日期的效果为例，介绍一下如何编程调用FileMaker组件修改文档内容。
1. 需求效果：点击“修改日期”按钮，把一份荣誉证书中的颁发日期改为：2024年11月15日。
2. 荣誉证书文件中的日期位置（数据区域“PO_Date”）如下图所示。
	![image](https://developer.qcloudimg.com/http-save/yehe-12004816/a9615ffcb830c09dc060566f87311dea.png)
3. 点击“修改日期”按钮后，把荣誉证书中的日期修改为：2024年11月15日，修改后的文件内容如下图所示。
	![image](https://developer.qcloudimg.com/http-save/yehe-12004816/c192f8949f0ae11b6adbc81adb3634a0.png)

# 后端代码

1. 在后端编写代码实现修改文档中数据区域“PO_Date”的日期（比如/FileMakerModify），关键代码如下：
```
FileMakerCtrl fmCtrl = new FileMakerCtrl(request);
WordDocumentWriter doc = new WordDocumentWriter();
//修改数据区域“PO_Date”的值
doc.openDataRegion("PO_Date").setValue("2024年11月15日");
fmCtrl.setWriter(doc);
fmCtrl.fillDocument("doc/template.doc", DocumentOpenType.Word);
response.getWriter().print(fmCtrl.getHtml());
```
1. 保存文件：在SaveFilePage指向的地址接口中，创建FileSaver对象保存修改后的文件。
```
FileSaver fs = new FileSaver(request, response);
String fileName = "maker" + fs.getFileExtName();
fs.saveToFile(request.getSession().getServletContext().getRealPath("FileMakerModify/doc") + "/" + fileName);
fs.setCustomSaveResult("{\"msg\":\"ok\"}");//用于给前端页面返回数据
fs.close();
```
# 前端代码

编写前端网页代码，调用执行后端修改文件的代码（比如/FileMakerModify），并实现文件处理进度条的效果。
```
<script setup>
import request from '@/utils/request';
import { ref, onMounted } from 'vue'
import { filemakerctrl } from 'js-pageoffice'
const titleText = ref('');
const buttonDisabled = ref(false);
const progressBar = ref(null);

onMounted(async () => {
  try {
    const response = await request({
      url: '/index',
      method: 'get',
    });
    titleText.value = response;
  } catch (error) {
    console.error('Failed to fetch title:', error);
  }
});

function ConvertFile() {
  buttonDisabled.value = true;
  // 设置用于保存文件的服务器端controller地址,该地址需从"/"开始，指向服务器端根目录
  /** 如果想要给SaveFilePage传递参数，建议使用new URLSearchParams方式，例如：
* let saveFileUrl = "/FileMakerModify/save";
* let paramValue = new URLSearchParams({id:1,name:"张三"});
* filemakerctrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
*/
  filemakerctrl.SaveFilePage = "/FileMakerModify/save";

  filemakerctrl.CallFileMaker({
    // url：指向服务器端FileMakerCtrl打开文件的controller地址，该地址需从"/"开始，指向服务器端根目录  
    url: "/FileMakerModify/FileMakerModify",
    success: (res) => {//res：获取服务器端fs.setCustomSaveResult设置的保存结果
      console.log(res);
      console.log("completed successfully.");
      setProgress(100);
      buttonDisabled.value = false;
    },
    progress: (pos) => {
      console.log("running " + pos + "%");
      setProgress(pos);
    },
    error: (msg) => {
      console.log("error occurred: " + msg);
    },
  });
}
function setProgress(percent) {
  progressBar.value.style.width = percent + "%";
  progressBar.value.innerText = percent + "%";
}
</script>

<template>
  <div class="Word">
    <input id="Button1" type="button" :disabled="buttonDisabled" value="修改日期" @click="ConvertFile()" />
    <div id="progressBarContainer">
        <div id="progressBar" ref="progressBar"></div>
    </div>
  </div>
</template>

<style scoped>
#progressBarContainer {
  width: 500px;
  background-color: #e0e0e0;
  border-radius: 5px;
  padding: 3px;
  margin: 10px auto;
}
#progressBar {
  height: 20px;
  width: 0%;
  background-color: #76b900;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
  color: white;
}
</style>
```

参考链接：https://pageoffice.cn/pages/062231/

在实际项目开发中，经常遇到开发人员希望通过程序直接修改文档内容的需求，比如在Word文档中替换或插入特定位置的内容。举个简单的例子，在一个合同系统中，在网页表单修改了单订金额后，希望通过程序同步修改对应合同文档中的订单金额。PageOffice产品的FileMaker组件提供了一种很好的解决方案。FileMaker组件能够在客户端后台修改文档中指定区域的内容，并自动上传至服务器，整个过程中不会显示文档界面。FileMakerCtrl 本质上就是一个没有界面的 PageOfficeCtrl，也是调用客户端计算机上的Office原生接口处理文件的，所以此方案有两个优点：一是可以确保文档格式的原汁原味；二是不需要在服务器上安装Office软件，也不限制服务器的操作系统平台，避免了对服务器造成额外压力和并发操作的问题。下面就以使用程序修改一份荣誉证书中颁发日期的效果为例，介绍一下如何编程调用FileMaker组件修改文档内容。

PageOffice 后台修改文档指定区域内容

开发工具

后端

PageOffice的FileMaker组件实现文档无界面修改，支持后台替换Word文档指定内容并自动上传。通过调用Office原生接口，完美保留文档格式，无需服务器安装Office软件，适用于合同系统等场景。提供Java/NetCore代码示例，轻松实现数据区域内容修改和文件保存功能。

服务器

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

PageOffice 后台修改文档指定区域内容-腾讯云开发者社区-腾讯云

PageOffice 后台修改文档指定区域内容

PageOffice 后台修改文档指定区域内容

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐