最简单的打开PDF

• 查看本示例演示效果
• 本示例关键代码的编写位置，请参考“开始 - 快速上手”里您所使用的开发语言框架的最简集成代码

注意

本文中展示的代码均为关键代码，复制粘贴到您的项目中，按照实际的情况，例如文档路径，用户名等做适当修改即可使用。

在OA办公、文档流转等各个Web系统中，调用PageOffice实现最简单在线查看PDF功能，以Springboot+Vue开发为例，只需以下几步就可以完成。

后端代码

1. 在后端编写代码调用webOpen方法打开文件。

	@RequestMapping(value="/openFile")
	public String openFile(HttpServletRequest request,int file_id,String file_name)  {
		//file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
		PDFCtrl pdfCtrl = new PDFCtrl(request);
		//pdfCtrl.setAllowCopy(false);//禁止拷贝
		pdfCtrl.webOpen("D:\\documents\\" + file_name);
		// Linux服务器添加前缀：file://
		// pdfCtrl.webOpen("file://"+"/root/documents/" + file_name);
		return pdfCtrl.getHtml();//必须
	}

public IActionResult OpenFile()
{
    //file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
    PageOfficeNetCore.PDFCtrl PdfCtrl = new PageOfficeNetCore.PDFCtrl(Request);
    //PdfCtrl.AllowCopy = false; //禁止拷贝
    PdfCtrl.WebOpen("doc/" + Request.Query["file_name"]);
}

// Make sure to add code blocks to your code group

前端代码

1. 在您的Vue页面（比如HomeView.vue）添加一个打开文件的超链接，点击超链接调用POBrowser对象的openWindow方法，弹出PageOffice浏览器（POBrowser）窗口访问DocView.vue（比如，DocView.vue的访问路由是'/showDoc'）在线打开文件，代码如下：

 <a  href="#" @click.prevent="open_pageoffice()">打开文件</a>

 <script>
 import request from '@/utils/request'
 import { POBrowser } from '@/utils/js-pageoffice'
 export default {
   name: 'HomeView',
   methods: {
     open_pageoffice() {
       let paramJson={};
       paramJson.file_id=1;
       paramJson.file_name="test.pdf";
       let paramString=JSON.stringify(paramJson);

       //openWindow()第三个参数用来向弹出的PageOffice浏览器（POBrowser）窗口传递参数(参数长度不限)，支持json格式字符串。
       //此处为了方便演示，我们传递了file_id和file_name两个参数，具体以您实际开发为准。
       POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;',paramString);
     },
   }
 }
 </script>

2. 编写DocView.vue页面的代码，实现集成PageOffice打开文件，代码如下：

 <template>
   <div class="doc">
     演示: 文档<br /><br />
     <!-- 此div用来加载PageOffice客户端控件，其中div的高宽及位置就决定了控件的大小及位置 -->
     <div style="width:auto; height:900px;" v-html="poHtmlCode"></div>
   </div>
 </template>

 <script>
 import request from '@/utils/request'
 export default {
   name: 'DocView',
   data() {
     return {
       poHtmlCode: '',
       open_params: '',
     }
   },
   created: function () {
     //使用pdfctrl.WindowParams获取获取父页面(执行POBrowser.openWindow方法的页面，比如：HomeView.vue)中POBrowser.openWindow()方法的第三个参数的值,获取到的值为string类型
     this.open_params = JSON.parse(pdfctrl.WindowParams);
     // 请求后端打开文件
     this.openFile().then(response => {
       this.poHtmlCode = response;
     });
   },
   methods: {
     OnPDFCtrlInit() {
       //PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
     },
     AfterDocumentOpened() {
       //在这里写您文档打开后自动触发的代码
     },
     openFile() {
       //发起GET请求到后端Controller的/doc/openFile路由
       return request({
         url: '/doc/openFile',
         method: 'get',
         params: this.open_params
       })
     }
   },
   mounted: function () {
     //将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
     window.POPageMounted = this;//此行必须
   }
 }
 </script>