526互联

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

发布时间 2023-06-07 10:42:42作者: 爱吃苹果皮

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

1、环境

前端：vue

后端：springboot、pageoffice5.4.0.3版本

2、前端

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

  1. <template>
  2. 	<div class="Word">
  3. 		<body style="text-align: center;">
  4. 		<a  href="javascript:;" @click="convert()">Word转PDF并打开PDF文件</a>
  5. 		<div id="pgImg" style="with:100px;height:100px;margin-top:20px;display: none;"  >
  6. 		    正在生成文件，请稍等：<img src="../../../public/images/pg.gif">
  7. 		</div>
  8. 		</body>
  9. 	
  10. 	</div>
  11. </template>
  12.  
  13. <script>
  14. 	const axios=require('axios');
  15. 	  export default{
  16. 	    name: 'Word',
  17. 	    data(){
  18. 	      return {
  19. 	        poHtmlCode: '',
  20. 			state: ''
  21. 	
  22. 	      }
  23. 	    },
  24. 	    methods:{
  25. 	      //控件中的一些常用方法都在这里调用，比如保存，打印等等
  26. 		  myFunc(){
  27. 			   alert("文件生成成功！");
  28. 			  document.getElementById("pgImg").style.display="none";
  29. 			  //打开pdf文件
  30. 			  POBrowser.openWindowModeless('OpenPDF' , 'width=1200px;height=800px;');			  
  31. 		  },
  32. 		  convert() {
  33. 			  document.getElementById("pgImg").style.display="block";
  34. 			  POBrowser.openWindowModeless('PDF', 'width=1px;height=1px;frame=no;');
  35. 		  }
  36. 		 
  37. 	    },
  38. 	    mounted: function(){
  39. 	      // 将vue中的方法赋值给window
  40. 			window.myFunc = this.myFunc;
  41. 	    }
  42. 	}
  43. </script>
  44.

word转换PDF的页面PDF.vue

  1. <template>
  2. 	<div class="PDF">
  3. 		<div style="height: 800px; width: auto" v-html="poHtmlCode" />
  4. 	</div>
  5. </template>
  6.  
  7. <script>
  8. 	const axios=require('axios');
  9. 	  export default{
  10. 	    name: 'PDF',
  11. 	    data(){
  12. 	      return {
  13. 	        poHtmlCode: '',
  14. 	      }
  15. 	    },
  16. 	    created: function(){
  17. 	      //由于vue中的axios拦截器给请求加token都得是ajax请求，所以这里必须是axios方式去请求后台打开文件的controller
  18. 	      axios.post("/api/FileMakerPDF/PDF").then((response) => {
  19. 	        this.poHtmlCode = response.data;
  20. 	      }).catch(function (err) {
  21. 	        console.log(err)
  22. 	      })
  23. 	    },
  24. 	    methods:{
  25. 	      //控件中的一些常用方法都在这里调用，比如保存，打印等等
  26. 		  OnProgressComplete() {
  27. 			  window.external.CallParentFunc("myFunc();"); //调用父页面的js函数
  28. 			  window.external.close();//关闭POBrwoser窗口
  29. 		  }
  30.  
  31. 	    },
  32. 	    mounted: function(){
  33. 	      // 将vue中的方法赋值给window
  34. 			window.OnProgressComplete = this.OnProgressComplete;
  35. 	    }
  36. 	}
  37. </script>
  38.

打开PDF文件的页面OpenPDF.vue

  1. <template>
  2. 	<div class="PDF">
  3. 		<div style="height: 800px; width: auto" v-html="poHtmlCode" />
  4. 	</div>
  5. </template>
  6.  
  7. <script>
  8. 	const axios=require('axios');
  9. 	  export default{
  10. 	    name: 'PDF',
  11. 	    data(){
  12. 	      return {
  13. 	        poHtmlCode: '',
  14. 	
  15. 	      }
  16. 	    },
  17. 	    created: function(){
  18. 	      //由于vue中的axios拦截器给请求加token都得是ajax请求，所以这里必须是axios方式去请求后台打开文件的controller
  19. 	      axios.post("/api/FileMakerPDF/OpenPDF").then((response) => {
  20. 	        this.poHtmlCode = response.data;
  21. 	
  22. 	      }).catch(function (err) {
  23. 	        console.log(err)
  24. 	      })
  25. 	    },
  26. 	    methods:{
  27. 	      //控件中的一些常用方法都在这里调用，比如保存，打印等等
  28. 	      SetBookmarks() {
  29. 	      		  document.getElementById("PDFCtrl1").BookmarksVisible = !document.getElementById("PDFCtrl1").BookmarksVisible;
  30. 	      },
  31. 	      PrintFile() {
  32. 	      		  document.getElementById("PDFCtrl1").ShowDialog(4);
  33. 	      },
  34. 	      SwitchFullScreen() {
  35. 	      		  document.getElementById("PDFCtrl1").FullScreen = !document.getElementById("PDFCtrl1").FullScreen;
  36. 	      },
  37. 	      SetPageReal() {
  38. 	      		  document.getElementById("PDFCtrl1").SetPageFit(1);
  39. 	      },
  40. 	      SetPageFit() {
  41. 	      		  document.getElementById("PDFCtrl1").SetPageFit(2);
  42. 	      },
  43. 	      SetPageWidth() {
  44. 	      		  document.getElementById("PDFCtrl1").SetPageFit(3);
  45. 	      },
  46. 	      ZoomIn() {
  47. 	      		  document.getElementById("PDFCtrl1").ZoomIn();
  48. 	      },
  49. 	      ZoomOut() {
  50. 	      		  document.getElementById("PDFCtrl1").ZoomOut();
  51. 	      },
  52. 	      FirstPage() {
  53. 	      		  document.getElementById("PDFCtrl1").GoToFirstPage();
  54. 	      },
  55. 	      PreviousPage() {
  56. 	      		  document.getElementById("PDFCtrl1").GoToPreviousPage();
  57. 	      },
  58. 	      NextPage() {
  59. 	      		  document.getElementById("PDFCtrl1").GoToNextPage();
  60. 	      },
  61. 	      LastPage() {
  62. 	      		  document.getElementById("PDFCtrl1").GoToLastPage();
  63. 	      },
  64. 	      SetRotateRight() {
  65. 	      		  document.getElementById("PDFCtrl1").RotateRight();
  66. 	      },
  67. 	      SetRotateLeft() {
  68. 	      		  document.getElementById("PDFCtrl1").RotateLeft();
  69. 	      }
  70.  
  71. 	    },
  72. 	    mounted: function(){
  73. 	      // 将vue中的方法赋值给window
  74. 	      window.SetBookmarks = this.SetBookmarks;
  75. 	      window.PrintFile = this.PrintFile;
  76. 	      window.SwitchFullScreen = this.SwitchFullScreen;
  77. 	      window.SetPageReal = this.SetPageReal;
  78. 	      window.SetPageFit = this.SetPageFit;
  79. 	      window.SetPageWidth = this.SetPageWidth;
  80. 	      window.ZoomIn = this.ZoomIn;
  81. 	      window.ZoomOut = this.ZoomOut;
  82. 	      window.FirstPage = this.FirstPage;
  83. 	      window.PreviousPage = this.PreviousPage;
  84. 	      window.NextPage = this.NextPage;
  85. 	      window.LastPage = this.LastPage;
  86. 	      window.SetRotateRight = this.SetRotateRight;
  87. 	      window.SetRotateLeft = this.SetRotateLeft;
  88. 	    }
  89. 	}
  90. </script>
  91.

2、后端

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

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

保存方法

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

打开文件的方法

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

3、最后效果

模板文件template.doc

 最后生成的pdf文件在线使用pageoffice打开

 

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