给SaveFilePage指向的地址传参(Vue)

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

注意

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

为了更好的支持在前后端分离项目中集成PageOffice，从PageOffice V6.3版本开始，给客户端js对象pageofficectrl增加了SaveFilePage属性，用于代替原来在后端代码中PageOfficeCtrl类的SaveFilePage属性。

SaveFilePage 用于设置PageOffice客户端控件保存文档时，负责接收和处理上传到服务器上的文件流的后端API接口地址。此地址必须是以"/"开头的URL相对地址，例如：

pageofficectrl.SaveFilePage = '/doc/saveFile';

如果需要在保存文件时给保存方法传递参数，可以在执行pageofficectrl.WebSave();保存方法前，设置SaveFilePage属性的保存地址url中的?传递参数。例如：

pageofficectrl.SaveFilePage = '/doc/saveFile?param1=xxx&param2=yyy';
pageofficectrl.WebSave();

后端代码

本示例无后端关键代码。

前端代码

1. Vue 2.0中实现点击自定义保存文件按钮向服务器后端接口传递参数的关键代码如下：

methods: {
  OnPageOfficeCtrlInit() {
    //PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
    pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应methods中的Save()函数。
  },
  Save() {
    let saveFileUrl = "/doc/saveFile";
    let paramValue = "p1=1&p2=2";//为简单起见，此处随意传递了两个参数。
    //使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数。
    pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue}`;
    pageofficectrl.WebSave();
  },
},
mounted: function () {
  //将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
  window.POPageMounted = this;//此行必须
}

2. Vue 3.0中实现点击自定义保存文件按钮向服务器后端接口传递参数的关键代码如下：

function OnPageOfficeCtrlInit() {
  // PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
  pageofficectrl.AddCustomToolButton("保存", "Save", 1);//其中"Save"对应function Save()函数，并且需要在onMounted中挂载。
};

function Save() {
  let saveFileUrl = "/doc/saveFile";
  let paramValue = "p1=1&p2=2";//为简单起见，此处随意传递了两个参数。
  //使用SaveFilePage属性设置后端保存方法的Controller路由地址，这个地址必须从"/"开始，并且也可以向此路由地址传递json字符串参数。
  pageofficectrl.SaveFilePage = `${saveFileUrl}?${paramValue}`;
  pageofficectrl.WebSave();
};

onMounted(() => {
  //将需要回调的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
  window.POPageMounted = { OnPageOfficeCtrlInit, Save };//此行必须
});