前端API使用的条件是采用iframe集成。此时前端API可以通过外层frame进行调用。在调用前，需要在用户系统中引用在线文档封装的API脚本。
<script src="http(s)://host/officesite/static/editor/main/tools/api.min.js"></script>
注意iframe中ID属性值需要和文档docId保持一致
其中host为部署的在线文档所在服务器的IP地址或者域名。
API的调用方式为：首先获取一个API对象，然后通过该对象调用执行API的函数。具体如下：
var fxapi = window.getFrameAPI(docId) //获取API对象
fxapi.CallFrameAPI(command,data,callback) //执行一个前端的API
其中 docId 为要执行API的文档的ID，command为要执行的前端api的名称，data为本次执行API需要的参数，callback是该API执行时结果的异步回调。
例如发送一条命令要求在线文档在光标所在的位置插入一个内容，则该命令如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“AddContent”,{content:”中国”})
该命令书中的command（AddContent）表明本次消息需要执行的是在光标出插入内容,数据中的content指明本次需要插入的具体内容为“中国”两个汉字。该API没有返回值，所以callback为空。
¶ 1.切换工具栏主菜单
该API的作用是命令工具栏UI切换到指定的菜单。一般该API是在自定义UI时用于切换工具栏的tab。
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“switchtab”,{tab:”ins”})
其中各不同tab对应的参数是：文件（file）,主菜单（home）,插入（ins）,协同菜单（collab）,布局（layout）,引用（ref）
¶ 2.获取文档状态
该API的作用是获取当前打开的文档时编辑还是预览状态
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getEditorMode”,function(res){xxx})
回调中返回的结果如果mode为“view”则这个文档时在预览模式。
¶ 3.插入内容【word】
该API的作用时向编辑器光标所在位置插入一段内容。API调用的方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“AddContent”,{content:”中国”})
content为该API需要插入的内容。该内容可以为纯文本，也可以为一段html。如果是html，福昕Office将保留html的样式。
¶ 4.向光标所在的位置添加脚注【word】
该API的作用是向光标所在的位置添加脚注引用。该API调用方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“addFootnote”,{ content:"中国"})
content为脚注的内容。该API与从Office的UI中插入一个脚注结果相同。不同之处在于可以将添加脚注引用，脚注内容同时完成，并且光标回到原来位置。
¶ 5.向书签中填入内容【word】
该API的作用是向指定的书签中插入内容。该API调用的方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“addContentToBookmark”,{ content:"中国", bookmark: "bk1",create: true/false,type:””})
content为要插入的内容，该内容可以是文本也可以为文本也可以为html(type为html时将启动插入html，否则按照文本插入)。bookmark为内容插入的目标书签。cteate 为true时表示当该书签没有时，会自动创建一个，如果为false则表示当该书签不存在时不会进行任何操作。
¶ 6.切换文档的修订模式【word】
该API将切换word的修订状态。即可以指令编辑器打开修订，或者关闭修订。该API的调用方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“trackChange”,{ status:true })
status: 代表修订模式的状体。当为true时表示开启修订。为false时关闭修订。注意：当打开文件时，如果服务器端指明强制开启文档的修订模式。则前端调用该API时不会影响修订状态。
¶ 7.预览时切换word的修订视图【word】
该API在预览模式下将可以指令编辑预览视图是否显示修订等。该API调用方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“viewMode”,{ mode: "all”})
mode：指明预览需要进入的模式,all表明为所有修订标记，final表明无标记编辑，original表明修订前状态（只读）。
¶ 8.预览时操作修订【word】
该API在预览/编辑模式下将可以指定是否接受/拒绝修订记录。该API调用方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“acceptChanges”)
acceptChanges 接受当前修订
acceptAllChanges 接受所有修订
rejectChanges 拒绝当前修订
rejectAllChanges 拒绝所有修订
¶ 9.替换文档中内容（书签和内容控件内容）【word】
该API在预览模式下将可以指令编辑预览视图是否显示修订等。该API调用方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“replaceContent”,{ actions:[]})
actions的值和服务器端调用内容替换API相同（API13:文档内容替换）。
{
"actions": [
{
"type": "bookmark",
"data": [
{
"name": "title",
"content": "这是发文标题"
},
{
"name": "html",
"type": "html",
"content": "<p>这是html书签内容替换</p >"
}
]
},
{
"type": "contentContro1",
"data": [
{
"name": "title1",
"content": "这是发文标题"
},
{
"name": "html",
"type": "html",
"content": "<p>这是html书签内容替换</p >"
}
]
}
],
"callback": ""
}
请求参数详情：
| 参数 | 必须 | 类型 | 参数定义 |
|---|---|---|---|
| actions->type | 否 | String | 替换类型，目前支持书签bookmark，内容控件contentContro1 |
| actions->data->name | 否 | String | 书签或者内容控件的名称 |
| actions->data->type | 否 | String | 替换内容的类型，目前支持html，不传就默认是文本 |
| actions->data->content | 否 | String | 插入文本或html的内容 |
¶ 10.获取文档所有的内容控件【word】
该API在预览模式下将可以指令编辑预览视图是否显示修订等。该API调用方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getContentControls”,function(data){xxxx})
该API将获取文档中的全部内容控件，结果为回调函数中的参数值。数据内容如下图：
¶ 11.插入内容控件
该API的作用是在文档中光标所在的位置插入内容控件
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI("addContentControl",{type:"", name:"", color:""，placeHolder:""，tags:["",""]})
type 为内容控件的类型，不传该值时，内容控件为文本类型内容控件，为block时为多文本类型控件。name为内容控件名称，color值不为空时，插入的内容控件将会以该颜色进行高亮。 参数placeHolder指定改内容控件插入后显示的内容（占位显示）。Tags为该内容控件的标签，标签值常用于限制编辑时编辑权限的设置。
¶ 12.定位到指定的内容控件
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“gotoContentControl”,{ id:”” })
ID为需要转跳到的内容控件的位置
¶ 13.删除指定的内容控件
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“removeContentControl”,{ id:””， removeContent:true/false })
ID为需要转跳到的内容控件的位置, removeContent: 是否也删除内容控件中的内容
¶ 14.高亮内容控件
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“highlightContentControl”,{ highlight:true/false })
highlight 为true时高亮文档中全部内容空间，为false时关闭高亮。如需要配置高亮内容空间的颜色。
¶ 15.获取文档选中内容【word】
该API在打开Office文档时，选中文档中的内容，可以获取到选中内容。该API调用方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getSelectedText”,function(data){xxxx})
具体获取到内容在data中，通过data.content.content获取。
¶ 16.获取文档所有的书签【word】
该API在预览模式下将可以指令编辑预览视图是否显示修订等。该API调用方式如下：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getBookmarks”,function(data){xxxx})
¶ 17.档中修订的内容【word】
该API可以获取文档中所有的修订内容。修订内容将以用户为key组织为一个json结构
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getTrackChanges”,function(data){xxxx})
返回值数据结构如下图：
例如：上图中 admin这个用户有三天修订记录。数据中 TextRem为删除文字，value为删除的内容,Date为修订产生的时间
¶ 18.在光标所在位置导入一个文档【红头】【word】
该API的效果是在光标所在的位置插入一个word文件。被插入的word文件中所有的内容将被导入到当前文件中去。该API常用的一个解决场景是公文套红：即将红头模版插入到当前文件的开始位置。
该API调用的方式是：
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“insertDoc”,{ sourceUrl:"",title:"a.docx",position:"",name:""})
sourceUrl为要插入的文档的地址，改地址必须是office服务器能访问到的地址；
title：要插入文档的标题，必须有文件扩展名用于区别文件类型
position：插入的位置的类型，可选值有：current（光标所在位置），beginning（文档开头），end（文档结束位置），bookmark（插入到书签中），contentControl（插入到内容控件中）
name: 当position值为bookmark或者contentControl时需要指定name为文档插入的书签名称或者内容控件的名称
¶ 19.打开/关闭大纲导航【word】
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“controlOutline”,{ status:true/false })
控制文档中的大纲导航的开关。Status为true时打开大纲导航，为false时关闭
¶ 20.在光标位置插入书签【word】
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“addBookmark”,{ name:“” })
在光标所在位置插入书签。Name为书签的名称
¶ 21.强制word获取焦点【word】
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“focusEditor”)
强制word获取焦点。
¶ 22.删除书签
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“removeBookmark”,{ name:“” })
删除书签书签。Name为书签的名称
¶ 23.转跳到书签
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“gotoBookmark”,{ name:“” })
转跳到书签所在的位置。Name为书签的名称
¶ 24.获取选中的书签
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getSelectedBookmark”,function(){})
¶ 25.转跳到指定页
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“gotoPage”,{ page:1 })
转跳到page所指定的页面
¶ 26.获取当前页码
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getCurrentPage”,function(data){xxx})
获取当前所在的页码。
¶ 27.获取总页码
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getPageCount”,function(data){xxx})
获取当前文档的页码。
¶ 28.获取文档大纲导航
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getOutline”,function(data){xxx})
获取文档中的大纲导航内容。其数据结构如下：
其中index，表示该条大纲的具体位置参数。在转跳至大纲导航时，需要制定该参数。
¶ 29.转跳至指定的大纲导航
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“gotoOutline”,{ index:13})
转跳到index所在的。
¶ 30.获取指定的大纲导航下所有的段落文字
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getOutlinePara”,{ index:13})
获取index下所有段落的文字。
¶ 31.获取当前位置的大纲信息
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getCurrentOutline”,function(res){})
获取光标所在位置的大纲信息。
¶ 32.搜索word
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“searchText”,{ text: "", isHighLight:true }, function(data){xxxx})
搜索word中内容。text为要搜索的内容。isHighLight 指定内容高亮。回调中将返回文档中参训到的条数
¶ 33.搜索Excel
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“searchCell”,{ content: "", isFormular:true, key: "" }, function(data){xxxx})
搜索Excel单元格。Content为要搜索的内容。如果content为公式表达式，则isFormular为true。
¶ 34.获取单元格信息【excel】
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getCellInfo”，{ cell:{sheet: "", row:1，col:1}},function(data){xxxx}}
查询指定单元格的信息。其sheet为工作薄，row,col为行列坐标。
¶ 35.设置单元格内容
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“setValue”，{ sheet: "", row:1，col:“A”，content：“xx”},function(data){xxxx})
查询指定单元格的信息。其sheet为工作薄，row,col为行列坐标。Content为指定该单元格的内容。
¶ 36.设置行的值
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI("setValueByRowRange",{startCol:"A",row:1,sheet:"Sheet1",valueList:["1","2","3"]})
查询指定单元格的信息。其sheet为工作薄，row行列坐标，startCol: 从该行的那一列开始设置，valueList为依次填入该行的值（必须为字符串数组）。
¶ 37.设置列的值
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI("setValueByColRange",{sol:"A",startRow:1,sheet:"Sheet1",valueList:["1","2","3"]})
查询指定单元格的信息。其sheet为工作薄，col列坐标，startRow: 从该列的那一行开始设置，valueList为依次填入该行的值（必须为字符串数组）。
¶ 38.获取Excel中选择的区域
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“getSelected”，function(data){xxx})
该API的作用获取Excel当前选择区域的信息（行，列，区域等信息），结果通过回调的形式返回。
¶ 39.重新计算Excel公式
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“recalculate”)
该API的作用触发Excel重新计算公式。
¶ 40.关闭自动保存
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“disableAutoSave”，{ disable:true })
该API的作用是关闭文档的自动保存，需要关闭自动保存时disable值为true。请确保在单用户编辑时谨慎使用；当需要保存因为关闭自动保存而未保存的内容时，可再次调用该API，并且设置 disable为false
¶ 41.保存文档
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“saveChanges”)
该API的作用是触发文档保存，在文档中有更改并且用户没有关闭自动保存时将会触发文档将内容保存到服务器上。可以用于集成场景下，关闭文档前确保所有内容被保存，此接口不会立即向集成方发起回存。
¶ 42.保存文档（有回调函数）
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“ensureSave”,function(content){
if(content && content.status){
//可以调用saveVersion进行回存
}
})
该API的作用是触发文档保存，在文档中有更改并且用户关闭自动保存时将会触发文档将内容保存到服务器上。可以用于集成场景下，关闭文档前确保所有内容被保存，此接口不会立即向集成方发起回存。
¶ 43.保存文档
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI("saveVersion",function(res){
/* res返回的JSON字符串如下
{"content":{"body":{"status":true,"info": {"status":true}}},"command":"callback","key":"calbackId_3","docId":"1683420245503"}
*/
//上面返回的参数中info为OA返回的参数
if(res.content.body.info.status){
layer.msg("保存成功")
} else {
layer.alert("保存失败！", {icon: 2})
}
})
生成新版本并立即向集成方发起回存，并同步返回集成方返回的结果。
¶ 44.打印文档
调用API打印当前文档
var fxapi = window.getFrameAPI(docId)
fxapi.CallFrameAPI(“print”,{ docType:””})
该API的作用是调用编辑的打印功能，打印出文档（与当前文件显示效果一致）。docctype可以为docx,xlsx，分别为打印word和Excel
¶ 45.保存、打印、下载文件（版式）
/*保存*/
function save() {
sendMessage("save",null);
}
/*下载*/
function download() {
sendMessage("download",null);
}
/*打印*/
function print() {
sendMessage("print",null);
}
function sendMessage(type,content) {
var data = {
type : type,
content : content
};
document.getElementById("iframe").contentWindow.postMessage(data, "*");
}
//接收跨域信息,用于iframe集成时，接收其他页面传输的消息
window.addEventListener('message', function(e){
//解析消息类型
var type = e.data.type;
if(type==undefined || type==null) {
return;
}
switch (type) {
/*获取保存状态码*/
case "saveCode":
var code = e.data.content;
console.log("saveCode ===> " + code);
break;
case "DocumentLoaded":
var status = e.data.content;
console.log("status ===> " + status);
break;
}
}, false);