转载:PageOffice动态生成Word文件并转换为PDF

发布时间 2023-06-09 13:46:43作者: qianxi

说明:PageOffice是客户端插件,做不到纯后台调用把word转为pdf。但是pageoffice的FileMaker对象可以实现不在客户端打开文件直接转换文件为pdf并保存到服务器端,看起来跟服务器端转换的效果一样。

1、环境

前端:vue

后端:springboot、pageoffice5.4.0.3版本

2、前端

在index.vue页面定义一个打开文件的按钮,通过点击事件调用POBrowser打开文件,这里因为使用FileMaker对象,不在页面打开文件,所以我们把POBrowser的宽高设置为1px,并设置无边框,隐藏pageoffice浏览器模拟服务器端转换的效果。我这里放了一个加载图片,转换完成后隐藏,方便知道当前转换的进度,

<template>
	<div class="Word">
		<body style="text-align: center;">
		<a  href="javascript:;" @click="convert()">Word转PDF并打开PDF文件</a>
		<div id="pgImg" style="with:100px;height:100px;margin-top:20px;display: none;"  >
		    正在生成文件,请稍等:<img src="../../../public/images/pg.gif">
		</div>
		</body>
	
	</div>
</template>
 
<script>
	const axios=require('axios');
	  export default{
	    name: 'Word',
	    data(){
	      return {
	        poHtmlCode: '',
			state: ''
	
	      }
	    },
	    methods:{
	      //控件中的一些常用方法都在这里调用,比如保存,打印等等
		  myFunc(){
			   alert("文件生成成功!");
			  document.getElementById("pgImg").style.display="none";
			  //打开pdf文件
			  POBrowser.openWindowModeless('OpenPDF' , 'width=1200px;height=800px;');			  
		  },
		  convert() {
			  document.getElementById("pgImg").style.display="block";
			  POBrowser.openWindowModeless('PDF', 'width=1px;height=1px;frame=no;');
		  }
		 
	    },
	    mounted: function(){
	      // 将vue中的方法赋值给window
			window.myFunc = this.myFunc;
	    }
	}
</script>

word转换PDF的页面PDF.vue

<template>
	<div class="PDF">
		<div style="height: 800px; width: auto" v-html="poHtmlCode" />
	</div>
</template>
 
<script>
	const axios=require('axios');
	  export default{
	    name: 'PDF',
	    data(){
	      return {
	        poHtmlCode: '',
	      }
	    },
	    created: function(){
	      //由于vue中的axios拦截器给请求加token都得是ajax请求,所以这里必须是axios方式去请求后台打开文件的controller
	      axios.post("/api/FileMakerPDF/PDF").then((response) => {
	        this.poHtmlCode = response.data;
	      }).catch(function (err) {
	        console.log(err)
	      })
	    },
	    methods:{
	      //控件中的一些常用方法都在这里调用,比如保存,打印等等
		  OnProgressComplete() {
			  window.external.CallParentFunc("myFunc();"); //调用父页面的js函数
			  window.external.close();//关闭POBrwoser窗口
		  }
 
	    },
	    mounted: function(){
	      // 将vue中的方法赋值给window
			window.OnProgressComplete = this.OnProgressComplete;
	    }
	}
</script>

打开PDF文件的页面OpenPDF.vue

<template>
	<div class="PDF">
		<div style="height: 800px; width: auto" v-html="poHtmlCode" />
	</div>
</template>
 
<script>
	const axios=require('axios');
	  export default{
	    name: 'PDF',
	    data(){
	      return {
	        poHtmlCode: '',
	
	      }
	    },
	    created: function(){
	      //由于vue中的axios拦截器给请求加token都得是ajax请求,所以这里必须是axios方式去请求后台打开文件的controller
	      axios.post("/api/FileMakerPDF/OpenPDF").then((response) => {
	        this.poHtmlCode = response.data;
	
	      }).catch(function (err) {
	        console.log(err)
	      })
	    },
	    methods:{
	      //控件中的一些常用方法都在这里调用,比如保存,打印等等
	      SetBookmarks() {
	      		  document.getElementById("PDFCtrl1").BookmarksVisible = !document.getElementById("PDFCtrl1").BookmarksVisible;
	      },
	      PrintFile() {
	      		  document.getElementById("PDFCtrl1").ShowDialog(4);
	      },
	      SwitchFullScreen() {
	      		  document.getElementById("PDFCtrl1").FullScreen = !document.getElementById("PDFCtrl1").FullScreen;
	      },
	      SetPageReal() {
	      		  document.getElementById("PDFCtrl1").SetPageFit(1);
	      },
	      SetPageFit() {
	      		  document.getElementById("PDFCtrl1").SetPageFit(2);
	      },
	      SetPageWidth() {
	      		  document.getElementById("PDFCtrl1").SetPageFit(3);
	      },
	      ZoomIn() {
	      		  document.getElementById("PDFCtrl1").ZoomIn();
	      },
	      ZoomOut() {
	      		  document.getElementById("PDFCtrl1").ZoomOut();
	      },
	      FirstPage() {
	      		  document.getElementById("PDFCtrl1").GoToFirstPage();
	      },
	      PreviousPage() {
	      		  document.getElementById("PDFCtrl1").GoToPreviousPage();
	      },
	      NextPage() {
	      		  document.getElementById("PDFCtrl1").GoToNextPage();
	      },
	      LastPage() {
	      		  document.getElementById("PDFCtrl1").GoToLastPage();
	      },
	      SetRotateRight() {
	      		  document.getElementById("PDFCtrl1").RotateRight();
	      },
	      SetRotateLeft() {
	      		  document.getElementById("PDFCtrl1").RotateLeft();
	      }
 
	    },
	    mounted: function(){
	      // 将vue中的方法赋值给window
	      window.SetBookmarks = this.SetBookmarks;
	      window.PrintFile = this.PrintFile;
	      window.SwitchFullScreen = this.SwitchFullScreen;
	      window.SetPageReal = this.SetPageReal;
	      window.SetPageFit = this.SetPageFit;
	      window.SetPageWidth = this.SetPageWidth;
	      window.ZoomIn = this.ZoomIn;
	      window.ZoomOut = this.ZoomOut;
	      window.FirstPage = this.FirstPage;
	      window.PreviousPage = this.PreviousPage;
	      window.NextPage = this.NextPage;
	      window.LastPage = this.LastPage;
	      window.SetRotateRight = this.SetRotateRight;
	      window.SetRotateLeft = this.SetRotateLeft;
	    }
	}
</script>

2、后端

word转换pdf的controller。FileMaker对象转换完成后会自动调用保存方法。在执行fmCtrl.fillDocumentAsPDF()之前,可以动态填充word文件

 @RequestMapping(value = "PDF")
    public String showWord(HttpServletRequest request) {
        FileMakerCtrl fmCtrl = new FileMakerCtrl(request);
        fmCtrl.setServerPage("/api/poserver.zz");
        WordDocument doc = new WordDocument();
        //禁用右击事件
        doc.setDisableWindowRightClick(true);
        //给数据区域赋值,即把数据填充到模板中相应的位置
        doc.openDataRegion("PO_company").setValue("北京卓正志远软件有限公司  ");
        fmCtrl.setSaveFilePage("/api/FileMakerPDF/save?pdfName=template.pdf");
        fmCtrl.setWriter(doc);
        fmCtrl.setJsFunction_OnProgressComplete("OnProgressComplete()");
        //fmCtrl.setFileTitle("newfilename.doc");//设置另存为文件的文件名称
        fmCtrl.fillDocumentAsPDF("D:\\FileMakerPDF\\template.doc", DocumentOpenType.Word, "template.pdf");
        return fmCtrl.getHtmlCode("FileMakerCtrl1");
    }

保存方法

@RequestMapping("save")
    public void save(HttpServletRequest request, HttpServletResponse response) {
        FileSaver fs = new FileSaver(request, response);
        String  pdfName=request.getParameter("pdfName");
        fs.saveToFile( "D:\\FileMakerPDF\\" + pdfName);
        fs.close();
    }

打开pdf文件的方法

@RequestMapping(value = "OpenPDF")
    public String showindex(HttpServletRequest request) {
        PDFCtrl pdfCtrl1 = new PDFCtrl(request);
        pdfCtrl1.setServerPage("/api/poserver.zz"); //此行必须
        // Create custom toolbar
        pdfCtrl1.addCustomToolButton("打印", "PrintFile()", 6);
        pdfCtrl1.addCustomToolButton("隐藏/显示书签", "SetBookmarks()", 0);
        pdfCtrl1.addCustomToolButton("-", "", 0);
        pdfCtrl1.addCustomToolButton("实际大小", "SetPageReal()", 16);
        pdfCtrl1.addCustomToolButton("适合页面", "SetPageFit()", 17);
        pdfCtrl1.addCustomToolButton("适合宽度", "SetPageWidth()", 18);
        pdfCtrl1.addCustomToolButton("-", "", 0);
        pdfCtrl1.addCustomToolButton("首页", "FirstPage()", 8);
        pdfCtrl1.addCustomToolButton("上一页", "PreviousPage()", 9);
        pdfCtrl1.addCustomToolButton("下一页", "NextPage()", 10);
        pdfCtrl1.addCustomToolButton("尾页", "LastPage()", 11);
        pdfCtrl1.addCustomToolButton("-", "", 0);
        pdfCtrl1.addCustomToolButton("向左旋转90度", "SetRotateLeft()", 12);
        pdfCtrl1.addCustomToolButton("向右旋转90度", "SetRotateRight()", 13);
        pdfCtrl1.webOpen("D:\\FileMakerPDF\\template.pdf");
        return pdfCtrl1.getHtmlCode("PDFCtrl1");
    }

3、最后效果

模板文件template.doc
image
最后生成的pdf文件在线使用pageoffice打开
image

转载:https://blog.csdn.net/qq_44306545/article/details/128302680