说明: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();
- }
打开文件的方法
- @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
最后生成的pdf文件在线使用pageoffice打开
转载:PageOffice动态生成Word文件并转换为PDF 标签:Word,addCustomToolButton,getElementById,PageOffice,window,PDFCtrl1,PDF,document, From: https://www.cnblogs.com/lhl77/p/17462677.html