在实际项目中经常遇到这样的场景，客户希望后台动态生成PDF文档，目前网上有一些针对此需求的方案，如果您想要了解这些方案的对比，请查看后台生成单个Word文档中的“方案对比”。
PageOffice 针对此需求开发了 FileMaker 组件，该组件完全符合 PageOffice 的架构设计，FileMaker 在客户端动态生成 Office 文档，并自动另存为PDF格式上传到服务器，但是不在客户端打开显示文档，看起来就好像是在服务器端直接生成的PDF文件。
FileMakerCtrl 和 PageOfficeCtrl 的区别
FileMakerCtrl 本质上就是一个没有界面的 PageOfficeCtrl，也是调用客户端 Office 程序处理文件的，都可以实现对文档进行动态填充、动态转 PDF 等功能，唯一的区别就是 FileMakerCtrl 在线打开填充和转换文档的时候，客户端页面不打开显示文档内容，而 PageOfficeCtrl 会打开显示文档内容。
下面就以生成一份荣誉证书的效果为例，介绍一下如何使用FileMaker组件动态生成PDF文档。
-
需求效果：用户点击生成pdf文件按钮，执行程序把某公司信息动态填充到荣誉证书Word模板中，并另存生成为一份PDF格式的荣誉证书文件。
-
荣誉证书Word模板如下图所示，为了简单起见，模板中只使用了公司名称来代表公司的所有信息，所以只用了一个数据区域“PO_company”来标记公司名称的位置。
-
点击按钮后，执行把公司信息动态填充到Word模板中生成荣誉证书的后台代码（比如：FileMakerPDF.jsp），在服务器端文件夹下生成一份荣誉证书文件：zhengshu.pdf，文件内容如下图所示。
后端代码
- 在后端编写代码实现Word文档动态填充并另存为pdf（比如FileMakerPDF.jsp），关键代码如下：
// 获取id后可以根据id从数据库中查询公司信息，为简单起见，就不再演示
String id = request.getParameter("id");
FileMakerCtrl fmCtrl = new FileMakerCtrl(request);
WordDocument doc = new WordDocument();
//给数据区域赋值，即把数据填充到模板中相应的位置
doc.openDataRegion("PO_company").setValue("北京卓正志远软件有限公司");
fmCtrl.setSaveFilePage("SaveMaker.jsp");
fmCtrl.setWriter(doc);
fmCtrl.fillDocumentAsPDF("doc/template.doc", DocumentOpenType.Word, "zhengshu.pdf");
- 保存文件：在SaveFilePage指向的地址接口中，创建FileSaver对象保存文件。
FileSaver fs = new FileSaver(request, response);
String fileName = fs.getFileName();
fs.saveToFile(request.getSession().getServletContext().getRealPath("FileMakerPDF/doc") + "/" + fileName);
fs.close();
前端代码
- 编写前端网页代码，调用执行后端生成PDF文件代码，并实现生成文件进度条的效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="../pageoffice.js"></script>
<script type="text/javascript">
function ConvertFile() {
document.getElementById("Button1").disabled = true;
CallFileMaker({
url: "FileMakerPDF.jsp?id=1", // FileMakerPDF.jsp 实现动态生成文件
success: function () {
setProgress(100);
},
progress: function (pos) {
setProgress(pos);
},
error: function (msg) {
console.log("error occurred: "+msg);
}
});
}
function setProgress(percent) {
var progressBar = document.getElementById("progressBar");
progressBar.style.width = percent + '%';
progressBar.innerText = percent + '%';
}
</script>
<style>
#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>
</head>
<body>
<div style="text-align: center;">
<h3 style="margin:20px;">演示：填充数据到Word模板生成PDF文件的效果</h3>
<input id="Button1" type="button" value="生成PDF文件" onclick="ConvertFile()"/>
<div id="progressBarContainer">
<div id="progressBar"></div>
</div>
</div>
</body>
</html>