首页 > 其他分享 >【转】PageOffice动态生成Word文件并转换为PDF

【转】PageOffice动态生成Word文件并转换为PDF

时间:2023-01-15 19:56:32浏览次数:57  
标签:Word addCustomToolButton getElementById PageOffice window PDFCtrl1 PDF document 

说明: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>
 

3、后端

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打开

标签:Word,addCustomToolButton,getElementById,PageOffice,window,PDFCtrl1,PDF,document,
From: https://www.cnblogs.com/uzi05/p/17054016.html

相关文章

  • 【转】PageOffice 在线打开 word 文件并添加水印
    一、服务器端方法插入水印1、插入文字水印WordDocumentdoc=newWordDocument();//添加水印,设置水印的内容doc.getWaterMark().setText("PageOffice开发平......
  • 使用word编辑文字时,按空格键会出现一连串的点.怎么取消呢
    使用word编辑文字时,按空格键会出现一连串的点.怎么取消呢这是编辑标记,不影响打印效果,但看着不是很舒服,可以隐藏的。点击“常用”​​工具栏​​​上的“显示/隐藏编辑标记......
  • 去掉word中的波浪线
    在WORD窗口中,最下面的状态栏上,中间位置,有一本翻开的书本的图标,右键点击它,将“隐藏拼写错误”前的勾去掉即可,红色波浪线就不显示了。去掉“隐藏语法错误”前的勾,就能不显示绿......
  • PDF多数据源导出
    场景说明在使用Jasper+jaspersoftStudio导出用户列表数据导出(如下图)是比较简单的,就是把用户列表数据,一个List集合放到JRBeanCollectionDataSource中即可。  但是如果有多......
  • error Component name "Student" should always be multi-word
      翻译:组件名称“Student”应该是多个单词错误原因:是我们的组件名有一些问题 ,(报错信息翻译过来大概就是组件名“Student”应该总是使用多个单词拼接横线组成的)......
  • UVA1502 GRE Words
    一道\(AC\)自动机\(+\)线段树难题。#include<algorithm>#include<cstring>#include<cmath>#include<cstdio>usingnamespacestd;constintN=3e5+10;tem......
  • 前端导出页面为PDF
    前端通过html2canvas和JsPDF插件将全部或部分网页按照PDF图片导出建议放入项目中工具文件夹下,部分引入。importhtml2Canvasfrom'html2canvas';importJsPDFfrom'js......
  • 【转】用pageOffice控件实现 office word文档在线编辑另存为pdf的功能
    用pageOffice控件实现officeword文档在线编辑另存为pdf的功能1应用场景OA办公中,经常要将word文档转存为pdf方法,方式文档的查看。怎么实现word文档的转存为pdf呢?2实......
  • 【转】PageOffice调用本地office实现多人在线同时编辑Word文档
    说明:多人同时在线编辑文件大多数会出现文档相互覆盖的问题,后保存的文档会覆盖先保存的文档。pageoffice的这个功能可以用程序控制不同用户打开文件后,编辑Word文档中属于自......
  • 【转】pageoffice在线打开word文件加盖电子印章
    一、加盖印章的js方法js方法二、常见使用场景1、常规盖章。弹出用户名、密码输入框,选择对应印章。点击盖章按钮弹出用户名密码登录框,登录以后显示选择电子印章。do......