麒麟v10、uos系统在线批量生成pdf文件

发布于:2025-06-21 ⋅ 阅读:(15) ⋅ 点赞:(0)

注意

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

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

如果只是需要批量转PDF文件,那么也可以使用PageOffice提供的FileMaker组件来实现,与“后台批量生成PDF文档”不同的地方仅是:批量转PDF文件不需要WordDocumentWriter对象动态填充数据的代码。所以批量转PDF文件也只需两步即可实现:

  1. 调用FileMakerCtrl对象的fillDocumentAsPDF方法实现Word转PDF功能,比如Convert.jsp中调用了此代码;
    fmCtrl.fillDocumentAsPDF("doc01.doc", DocumentOpenType.Word, "doc01.pdf");
    
  2. 调用PageOffice提供的jsCallFileMaker函数,递归执行Convert.jsp实现批量转PDF文件功能,比如执行下面的ConvertFiles(),递归调用ConvertFile函数,把ids数组中包含的所有Word文件转为pdf。
    var ids = [1, 2, 3, 5]; //比如这是Word文件在数据库中的id
    
    function ConvertFiles() {
    	ConvertFile(ids, 0); 
    }
    
    function ConvertFile(idArr, index) {
    	filemakerctrl.SaveFilePage = "/FileMakerConvertPDFs/SaveFile.jsp?id=" + idArr[index];
    	filemakerctrl.CallFileMaker({
    		url: "/FileMakerConvertPDFs/Convert.jsp?id="+idArr[index], //把指定id的word文件转pdf
    		success: function (customSaveResult) {
    			console.log("completed successfully.");
    			index++;
    			
    			if(index < idArr.length){
    				ConvertFile(idArr, index);
    			} 
    		},
    		progress: function (pos) {
    			console.log("running "+pos+"%");
    		},
    		error: function (msg) {
    			console.log("error occurred: "+msg);
    		}
    	});
    }
    

    FileMakerCtrl 和 PageOfficeCtrl 的区别

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

后端代码

  1. 调用FileMakerCtrl对象实现Word转pdf,比如后端/convert方法的代码如下:
    String id = request.getParameter("id").trim();
    String docName = "doc0" + id + ".doc";
    String pdfName = "doc0" + id + ".pdf";
    
    FileMakerCtrl fmCtrl = new FileMakerCtrl(request);
    fmCtrl.fillDocumentAsPDF("doc/" + docName, DocumentOpenType.Word, pdfName);
    out.print(fmCtrl.getHtml());
    
  2. Word转pdf后,在SaveFilePage属性指向的地址接口中处理文件保存的后台代码如下:
    FileSaver fs = new FileSaver(request, response);
    fs.saveToFile(request.getSession().getServletContext().getRealPath("FileMakerConvertPDFs/doc/"+ fs.getFileName()));
    fs.setCustomSaveResult("{\"msg\":\"ok\"}");//用于给前端页面返回数据
    fs.close();       
    

前端代码

调用PageOffice提供的jsCallFileMaker函数,递归执行/convert实现批量转PDF文件功能的前端页面代码,如下:

<script setup>
import request from '@/utils/request';
import { ref, onMounted } from 'vue'
import { filemakerctrl, POBrowser } from 'js-pageoffice'

const titleText = ref('');
const checked = ref(true);
const buttonDisabled = ref(false);
const progressBar1 = ref(null);
const progressBar2 = 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 selectall() {
  if (checked.value) {
    let obj = document.all.check;
    for (let i = 0; i < obj.length; i++) {
      obj[i].checked = true;
      checked.value = false;
    }
  } else {
    let obj = document.all.check;
    for (let i = 0; i < obj.length; i++) {
      obj[i].checked = false;
      checked.value = true;
    }
  }
}

function ConvertFiles() {
  let ids = [];
  let checkboxes = document.getElementsByName("check");

  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      ids.push(checkboxes[i].value);
    }
  }

  if (0 == ids.length) {
    alert("请至少选择一个文档");
    return;
  }

  buttonDisabled.value = true;
  ConvertFile(ids, 0);
}

function ConvertFile(idArr, index) {
  // 设置用于保存文件的服务器端controller地址,该地址需从"/"开始,指向服务器端根目录  
  /** 如果想要给SaveFilePage传递多个参数,建议使用new URLSearchParams方式,例如:
* let saveFileUrl = "/FileMakerConvertPDFs/save";
* let paramValue = new URLSearchParams({id:1,name:"张三"});
* filemakerctrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
*/
  filemakerctrl.SaveFilePage = "/FileMakerConvertPDFs/save?id=" + idArr[index];
  filemakerctrl.CallFileMaker({
    // url:指向服务器端FileMakerCtrl打开文件的controller地址,该地址需从"/"开始,指向服务器端根目录  
    url: "/FileMakerConvertPDFs/convert?id=" + idArr[index],
    success: (res) => {//res:获取服务器端fs.setCustomSaveResult设置的保存结果
      console.log(res);
      console.log("completed successfully.");
      setProgress1(100);
      index++;
      setProgress2(index, idArr.length);
      if (index < idArr.length) {
        ConvertFile(idArr, index);
      }
    },
    progress: (pos) => {
      console.log("running " + pos + "%");
      setProgress1(pos);
    },
    error: (msg) => {
      console.log("error occurred: " + msg);
    },
  });
}

function setProgress1(percent) {
  progressBar1.value.style.width = percent + "%";
  progressBar1.value.innerText = percent + "%";
}

function setProgress2(index, count) {
  progressBar2.value.style.width = Math.round((index / count) * 100) + "%";
  progressBar2.value.innerText = index + "/" + count;
}

</script>

<template>
  <div class="Word">
    <div style="margin: 100px" align="center">
      <h2>演示:批量转PDF</h2>
      <div style="width: 600px; margin: 0 auto; font-size: 14px">
        <p style="text-align: left">
          操作说明:<br />
          1. 勾选下面的文件;<br />
          2. 点击“批量转换PDF文档”按钮;<br />
          3.生成完毕后,即可在“FileMakerConvertPDFs/doc”目录下看到批量生成的PDF文件。<br />
        </p>
      </div>
      <h3>文件列表</h3>
      <table id="table1">
        <tr>
          <th>
            <input name="checkAll" type="checkbox" @click="selectall()" />
          </th>
          <th>序号</th>
          <th>文件名</th>
        </tr>
        <tr>
          <td><input name="check" type="checkbox" value="1" /></td>
          <td>01</td>
          <td>PageOffice产品简介</td>
        </tr>
        <tr>
          <td><input name="check" type="checkbox" value="2" /></td>
          <td>02</td>
          <td>PageOffice产品安装步骤</td>
        </tr>
        <tr>
          <td><input name="check" type="checkbox" value="3" /></td>
          <td>03</td>
          <td>PageOffice产品应用领域</td>
        </tr>
        <tr>
          <td><input name="check" type="checkbox" value="4" /></td>
          <td>04</td>
          <td>PageOffice产品对环境的要求</td>
        </tr>
      </table>

      <input type="button" id="Button1" :disabled="buttonDisabled" value="批量转换PDF文档" @click="ConvertFiles()" />

      <div id="progressDiv">
        单文件进度:
        <div class="progressBarContainer">
          <div id="progressBar1" ref="progressBar1" class="progressBar"></div>
        </div>
        整体进度:
        <div class="progressBarContainer">
          <div id="progressBar2" ref="progressBar2" class="progressBar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
table {
  border: solid 1px #ccc;
  width: 600px;
  margin: 20px;
}
th {
  border-bottom: solid 1px #ccc;
  text-align: left;
  padding: 5px;
}
td {
  padding: 5px;
}
.progressBarContainer {
  width: 100%;
  background-color: #eee;
  border-radius: 5px;
  padding: 3px;
  box-shadow: 2px 2px 3px 3px #ccc inset;
}
.progressBar {
  height: 20px;
  width: 0%;
  background-color: #1a73e8;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
  color: white;
}
#progressDiv {
  width: 400px;
  margin: 10px auto;
  text-align: left;
  font-size: 14px;
  border: solid 1px #1a73e8;
  padding: 10px 20px;
  color: #1a73e8;
}
</style>

 参考链接:批量转PDF文件 | PageOffice 开发者中心

 


网站公告

今日签到

点亮在社区的每一天
去签到