后台生成单个PDF文档

• 查看本示例演示效果

注意

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

在实际项目中经常遇到这样的场景，客户希望后台动态生成PDF文档，目前网上有一些针对此需求的方案，如果您想要了解这些方案的对比，请查看后台生成单个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");
response.getWriter().print(fmCtrl.getHtml());

// 获取id后可以根据id从数据库中查询公司信息，为简单起见，就不再演示
string id = Request.Query["id"]; 
PageOfficeNetCore.FileMakerCtrl fmCtrl = new PageOfficeNetCore.FileMakerCtrl(Request);
PageOfficeNetCore.Word.WordDocumentWriter doc = new PageOfficeNetCore.Word.WordDocumentWriter();
//给数据区域赋值，即把数据填充到模板中相应的位置
doc.OpenDataRegion("PO_company").Value = "北京卓正志远软件有限公司";
fmCtrl.SetWriter(doc);
fmCtrl.FillDocumentAsPDF("doc/template.doc", PageOfficeNetCore.DocumentOpenType.Word, "zhengshu.pdf");
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 = fs.getFileName();
fs.saveToFile(request.getSession().getServletContext().getRealPath("FileMakerPDF/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 + "/FileMakerPDF/doc/" + fs.FileName);
fs.CustomSaveResult = "{\"msg\":\"ok\"}";//用于给前端页面返回数据
fs.Close();

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

前端代码

编写前端网页代码，调用执行后端生成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>