说明：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打开
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
