在實際項目中經常遇到這樣的場景，客戶希望後臺動態生成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”來標記公司名稱的位置。
![image]()
-
點擊按鈕後，執行把公司信息動態填充到Word模板中生成榮譽證書的後臺代碼（比如：FileMakerPDF.jsp），在服務器端文件夾下生成一份榮譽證書文件：zhengshu.pdf，文件內容如下圖所示。
![image]()
後端代碼
- 在後端編寫代碼實現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>