在实际项目中经常遇到这样的场景，客户希望后台动态生成PDF文档，目前网上有一些针对此需求的方案，如果您想要了解这些方案的对比，请查看[后台生成单个Word文档](https://pageoffice.cn/filemaker/FileMakerSingle.html)中的“方案对比”。

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”来标记公司名称的位置。
	![image](https://developer.qcloudimg.com/http-save/yehe-12004816/753534db236828dcc307a9d93712129a.png)
3. 点击按钮后，执行把公司信息动态填充到Word模板中生成荣誉证书的后台代码（比如：/FileMakerPDF），在服务器端文件夹下生成一份荣誉证书文件：zhengshu.pdf，文件内容如下图所示。
	![image](https://developer.qcloudimg.com/http-save/yehe-12004816/514be76888862fe3b5f466e7b675f363.png)

# 后端代码
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");
response.getWriter().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();
```
# 前端代码
> 注意
> 1. 使用FileMaker组件生成文件时，强烈建议开发人员在调用filemakerctrl.CallFileMaker后，在页面中给用户显示一个文档生成的进度条或状态信息，提示用户不要关闭窗口，并在filemakerctrl.CallFileMaker的success回调函数中结束进度条或提示文件已生成完毕。
> 2. 同一客户端电脑执行批量文件生成任务时，**同一时间仅允许调用一个 FileMaker 组件**。需等待当前文件生成完成后，再依次调用该组件生成下一个文件；**禁止在同一客户端上同时启动多个 FileMaker 组件并行生成文件**。

编写前端网页代码，调用执行后端生成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文档 | PageOffice 开发者中心](https://pageoffice.cn/pages/3fef19/)



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

PageOffice后台生成单个PDF文档

在实际项目中经常遇到这样的场景，客户希望后台动态生成PDF文档，
PageOffice 针对此需求开发了 FileMaker 组件，该组件完全符合 PageOffice 的架构设计，FileMaker 在客户端动态生成 Office 文档，并自动另存为PDF格式上传到服务器，但是不在客户端打开显示文档，看起来就好像是在服务器端直接生成的PDF文件。

后端

开发工具

客户端

PageOffice的FileMaker组件支持动态生成PDF文档，通过客户端Office程序处理Word模板并自动转换为PDF上传服务器，实现无界面操作。组件支持数据区域填充、批量文件生成，提供进度条显示功能，适用于荣誉证书等文档生成场景，确保用户操作流畅。

数据库

服务器

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

2026采购季 | AI焕新·智启新局

tencentdb-catalog

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

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

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

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

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

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

社区新版编辑器体验调研

PageOffice后台生成单个PDF文档-腾讯云开发者社区-腾讯云

PageOffice后台生成单个PDF文档

PageOffice后台生成单个PDF文档

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐