PageOffice 国产版 ：支持信创系统，支持银河麒麟V10和统信UOS，支持X86（intel、兆芯、海光等）、ARM（飞腾、鲲鹏、麒麟等）、龙芯（LoogArch）芯片架构。

PageOffice 版本：6.4.1.1及以上版本

在实际项目开发中经常会遇到后台动态生成文档的需求，目前网上有一些针对此需求的方案，如果您想要了解这些方案的对比，请查看后台生成单个Word文档中的“方案对比”。

PageOffice 针对此需求开发了 FileMaker 组件，该组件完全符合 PageOffice 的架构设计，FileMaker 在客户端动态生成 Office 文档，并自动另存为PDF格式上传到服务器，但是不在客户端打开显示文档，看起来就好像是在服务器端直接生成的PDF文件。

FileMakerCtrl 和 PageOfficeCtrl 的区别 FileMakerCtrl 本质上就是一个没有界面的
PageOfficeCtrl，也是调用客户端 Office 程序处理文件的，都可以实现对文档进行动态填充、动态转 PDF等功能，唯一的区别就是 FileMakerCtrl 在线打开填充和转换文档的时候，客户端页面不打开显示文档内容，而PageOfficeCtrl 会打开显示文档内容。

下面就以生成一份荣誉证书的效果为例，介绍一下如何使用FileMaker组件动态生成PDF文档。

1. 需求效果：用户点击生成pdf文件按钮，执行程序把某公司信息动态填充到荣誉证书Word模板中，并另存生成为一份PDF格式的荣誉证书文件。
2. 荣誉证书Word模板如下图所示，为了简单起见，模板中只使用了公司名称来代表公司的所有信息，所以只用了一个数据区域“PO_company”来标记公司名称的位置。
   
3. 点击按钮后，执行把公司信息动态填充到Word模板中生成荣誉证书的后台代码（比如：/FileMakerPDF），在服务器端文件夹下生成一份荣誉证书文件：zhengshu.pdf，文件内容如下图所示
   

后端代码

1. 在后端编写代码实现Word文档动态填充并另存为pdf（比如/FileMakerPDF），关键代码如下：

// 获取id后可以根据id从数据库中查询公司信息，为简单起见，就不再演示
String id = request.getParameter("id"); 
FileMakerCtrl fmCtrl = new FileMakerCtrl(request);
WordDocumentWriter doc = new WordDocumentWriter();
//给数据区域赋值，即把数据填充到模板中相应的位置
doc.openDataRegion("PO_company").setValue("北京卓正志远软件有限公司");
fmCtrl.setWriter(doc);
fmCtrl.fillDocumentAsPDF("doc/template.doc", DocumentOpenType.Word, "zhengshu.pdf");
out.print(fmCtrl.getHtml());

2. 保存文件：在SaveFilePage指向的地址接口中，创建FileSaver对象保存文件。

FileSaver fs = new FileSaver(request, response);
String fileName = fs.getFileName();
fs.saveToFile(request.getSession().getServletContext().getRealPath("FileMakerPDF/doc/" + fileName));
fs.setCustomSaveResult("{\"msg\":\"ok\"}");//用于给前端页面返回数据
fs.close();

前端代码

编写前端网页代码，调用执行后端生成PDF文件代码，并实现生成文件进度条的效果。

<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 = "/FileMakerPDF/save";
* let paramValue = new URLSearchParams({id:1,name:"张三"});
* filemakerctrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
*/
  filemakerctrl.SaveFilePage = "/FileMakerPDF/save";

  filemakerctrl.CallFileMaker({
    // url：指向服务器端FileMakerCtrl打开文件的controller地址，该地址需从"/"开始，指向服务器端根目录  
    url: "/FileMakerPDF/FileMakerPDF",
    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">
    <div style="text-align: center;">
      <input id="Button1" type="button" value="生成PDF文件" :disabled="buttonDisabled" @click="ConvertFile()" />
      <div id="progressBarContainer">
        <div id="progressBar"  ref="progressBar"></div>
      </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>

参考链接：后台生成单个PDF文档