不打开文件的情况下修改文档指定区域内容

• 查看本示例演示效果

注意

本文中展示的代码均为关键代码，复制粘贴到您的项目中，按照实际的情况，例如文档路径，用户名等做适当修改即可使用。

在实际项目开发中，经常遇到开发人员希望通过程序直接修改文档内容的需求，比如在Word文档中替换或插入特定位置的内容。举个简单的例子，在一个合同系统中，在网页表单修改了单订金额后，希望通过程序同步修改对应合同文档中的订单金额。

PageOffice产品的FileMaker组件提供了一种很好的解决方案。FileMaker组件能够在客户端后台修改文档中指定区域的内容，并自动上传至服务器，整个过程中不会显示文档界面。FileMakerCtrl 本质上就是一个没有界面的 PageOfficeCtrl，也是调用客户端计算机上的Office原生接口处理文件的，所以此方案有两个优点：一是可以确保文档格式的原汁原味；二是不需要在服务器上安装Office软件，也不限制服务器的操作系统平台，避免了对服务器造成额外压力和并发操作的问题。

下面就以使用程序修改一份荣誉证书中颁发日期的效果为例，介绍一下如何编程调用FileMaker组件修改文档内容。

1. 需求效果：点击“修改日期”按钮，把一份荣誉证书中的颁发日期改为：2024年11月15日。

2. 荣誉证书文件中的日期位置（数据区域“PO_Date”）如下图所示。

   

3. 点击“修改日期”按钮后，把荣誉证书中的日期修改为：2024年11月15日，修改后的文件内容如下图所示。

   

后端代码

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());

PageOfficeNetCore.FileMakerCtrl fmCtrl = new PageOfficeNetCore.FileMakerCtrl(Request);
PageOfficeNetCore.Word.WordDocumentWriter doc = new PageOfficeNetCore.Word.WordDocumentWriter();
//修改数据区域“PO_Date”的值
doc.OpenDataRegion("PO_Date").Value = "2024年11月15日";
fmCtrl.SetWriter(doc);
fmCtrl.FillDocument("doc/template.doc", PageOfficeNetCore.DocumentOpenType.Word);
ViewBag.FMCtrl = fmCtrl.GetHtml();

// Make sure to add code blocks to your code group

2. 保存文件：在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();

PageOfficeNetCore.FileSaver fs = new PageOfficeNetCore.FileSaver(Request, Response);
await fs.LoadAsync();
string webRootPath = _webHostEnvironment.WebRootPath;
fs.SaveToFile(webRootPath + "/FileMakerModify/doc/" + "maker" + fs.FileExtName);
fs.CustomSaveResult = "{\"msg\":\"ok\"}";//用于给前端页面返回数据
fs.Close();

// Make sure to add code blocks to your code group

前端代码

编写前端网页代码，调用执行后端修改文件的代码（比如/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>