PageOffice最简单的打开保存文件

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

注意

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

在使用前后端分离架构开发的OA办公、文档流转等Web系统中，调用PageOffice实现最简单的打开编辑保存文件功能，以Springboot+Vue开发为例，只需以下几步就可以完成。

后端代码

在后端编写代码调用PageOfficeCtrl对象打开文件，调用FileSaver对象处理文件的保存，具体代码如下：

	@RequestMapping(value="/openFile")
	public String openFile(HttpServletRequest request,int file_id,String file_name)  {
		//file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
		PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
		//webOpen的第一个参数可以是文件在服务器上的磁盘路径，以Linux为例（如果是Windows则去掉file://）代码如下
		poCtrl.webOpen("file://"+"/home/docs/"+file_name, OpenModeType.docNormalEdit, "张三");
    //poCtrl.webOpen("D:\\docs\\"+file_name, OpenModeType.docNormalEdit, "张三");
		return poCtrl.getHtml();//必须
	}

	@RequestMapping("/saveFile")
	public void saveFile(HttpServletRequest request, HttpServletResponse response,int file_id,String file_name)  {
	  //file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
	  FileSaver fs = new FileSaver(request, response);
	  fs.saveToFile(dir + file_name);
	  fs.close();
	}

public IActionResult OpenFile()
{
    //file_id和file_name是为了展示如何使用参数，我们这里只用到了file_name
    PageOfficeNetCore.PageOfficeCtrl poCtrl = new PageOfficeNetCore.PageOfficeCtrl(Request);
    poCtrl.SaveFilePage = "SaveFile";
    //webOpen的第一个参数支持能够输出下载文件的Url相对地址或者文件在服务器上的磁盘路径两种方式
    poCtrl.WebOpen("doc/" + Request.Query["file_name"], PageOfficeNetCore.OpenModeType.docNormalEdit, "张三");
}

public async Task<ActionResult> SaveFile()
{
    PageOfficeNetCore.FileSaver fs = new PageOfficeNetCore.FileSaver(Request, Response);
    await fs.LoadAsync();
    string webRootPath = _webHostEnvironment.WebRootPath;
    fs.SaveToFile(webRootPath + "/SimpleWord/doc/" + fs.FileName);
    return   fs.Close();
}

// 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.doc";
       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 () {
     //使用pageofficectrl.WindowParams获取获取父页面(执行POBrowser.openWindow方法的页面，比如：HomeView.vue)中POBrowser.openWindow()方法的第三个参数的值,获取到的值为string类型
     this.open_params = JSON.parse(pageofficectrl.WindowParams);
     // 请求后端打开文件
     this.openFile().then(response => {
       this.poHtmlCode = response;
     });
   },
   methods: {
     OnPageOfficeCtrlInit() {
       //PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
       pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应methods中的Save()函数，并且需要在mounted中挂载。
     },
     Save() {
       //使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数，示例如下：
       let saveFileUrl = "/doc/saveFile";
       let paramValue = new URLSearchParams(this.open_params);//为了简单起见，这里直接使用打开时的参数。
       pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
       pageofficectrl.WebSave();
     },
     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>