admin管理员组文章数量:1549941
一、VUE前端
1.首先在页面引入两个js
https://download.csdn/download/weixin_41560845/88359958
2.业务页面跳转到onlyOffice页面方法
onlineEdit(item) {
this.onlieData = item
this.$refs.ruleForm.validate(async (valid) => {
if (valid) {
const routeData = this.$router.resolve({
path: '../onlyoffice.html?id='this.ruleForm.id, //跳转目标窗口的地址
})
var $windowObj = null;
var that = this;
$windowObj = window.open(routeData.href, '_blank')
var loop = setInterval(function() {
if($windowObj != null && $windowObj.closed) {
clearInterval(loop);
alert('关闭')
//do something .....在这里执行回调
}
}, 800);
}
})
}
3.onlyOffice.vue页面写法
//①引入两个js
import {loadJs,edit} from "./loadJs.js";
//②初始化页面方法
mounted(){
loadJs().then(()=>{
edit().then(()=>{
// 加载成功,进行后续操作
this.id = this.$route.query.id //接收参数
exportTemplateFile( )//调用方法
});
});
},
methods: {
exportTemplateFile(){
//通过模板生成可以访问的文件,即将模板下载到可直接访问的路径
exportTemplateFile({id: this.id})
.then((res) => {
if (res.recode == 200) {
//返回的文件信息,注意返回的两个路径 fileurl 、callbackurl
var filekey = res.redata.fileid
var fileurl = res.redata.filepath;//模板处理过后的文件路径
var filetype = "docx";//注意这里只能是docx格式
var filetitle = res.redata.filename;
var callbackurl = res.redata.filepathSave;//在线编辑时文件需保存是的保存文件的方法。如:var callbackurl = 'http://127.0.0.8:80/project/onlyOfficeController/saveOnlineFile/“这个参数是token”' console.log(res.redata.filepathw); this.pageinitDoc(filekey,fileurl,filetype,filetitle,callbackurl,res.redata.userid,res.redata.username,res.redata.itemcode);
}
})
.catch((error) => {
console.log(error);
});
},
async pageinitDoc(filekey,fileurl,filetype,filetitle,callbackurl,userid,username,itemcode){
//onlyOffice页面工具配置
var config = {
"document": {
"fileType": filetype,
"type": "desktop",
"key": filekey,
"title": filetitle,
"url": fileurl
},
"editorConfig": {
"callbackUrl": callbackurl, //保存文件时的回调地址
"lang": "zh", //语言环境
"mode": "edit",
"documentType": "text",
customization: {
"hideRightMenu": true,
"forcesave": true,
"autosave": false,
"help": false,
"chat": false,
"comments": false,
"compactHeader":true,
"compactToolbar":false,
"hideRulers":false,
"macros": false,
"plugins": false,
"showReviewChanges": false,
"spellcheck": false,
"toolbarNoTabs": true,
"zoom": 100,
"customer": false,
"feedback": false,
"goback":false,
"hideNotes": true,
features: {
spellcheck: false
}
},
"user": {
id: userid,
name: username,
group: itemcode
}
}
};
var docEditor = new DocsAPI.DocEditor("placeholder", config);
// self.close();
},
},
二、java后端
exportTemplateFile方法
步骤:①获取模板,②替换模板书签内容(没有书签,此步骤可以省略),③生成新的文件,④将文件上传至服务器,⑤返回文件实体 FileObject
在线编辑自动saveOnlineFile方法
controller:
@RequestMapping("/saveonlineFile/{id}/{fileId}/{filekey}/{flag}/{token}")
@ResponseBody
public void saveNotieonlineFile(
HttpServletRequest request,
HttpServletResponse response,
@PathVariable(value="id") String id,
@PathVariable(value="fileId") String fileId,
@PathVariable(value="filekey") String filekey,
@PathVariable(value="flag") String flag,
@PathVariable(value="token") String token
) throws Exception {
try {
onlyOfficeComService.saveonlineFile(request,response,id,fileId,filekey,flag,token);
} catch (Exception e) {
e.printStackTrace();
log.error(e.getMessage(),e);
}
}
service
public void saveonlineFile(HttpServletRequest request,HttpServletResponse response, String id,String fileId,
String filekey,String flag, String token) {
RequestTools.showParams(request);
PrintWriter writer = null;
String body = "";
//获取文件流
try {
writer = response.getWriter();
Scanner scanner = new Scanner(request.getInputStream());
scanner.useDelimiter("\\A");
body = scanner.hasNext() ? scanner.next() : "";
scanner.close();
} catch (Exception ex) {
writer.write("get request.getInputStream error:" + ex.getMessage());
}
//请求体为空
if (body.isEmpty()) {
writer.write("ONLYOFFICE回调保存请求体为空");
}
try {
System.out.println(body);
JSONObject jsonObj = JSONObject.parseObject(body);
log.info("jsonObj"+jsonObj);
int status = (Integer) jsonObj.get("status");
// int status = 6;
log.info("*************************************************");
log.info("status=" + status);
log.info("*************************************************");
// 0找不到具有密钥标识符的文档,
if (status == 0) {
writer.write("{\"error\":0}");
}
// 1正在编辑文档
if (status == 1) {
writer.write("{\"error\":0}");
}
// 2文档已准备好保存
if (status == 2) {
String downloadUri = (String) jsonObj.get("url");
System.out.println(downloadUri);
writer.write("{\"error\":0}");
}
// 3发生文档保存错误
if (status == 3) {
String downloadUri = (String) jsonObj.get("url");
System.out.println(downloadUri);
writer.write("{\"error\":0}");
}
// 4文档已关闭,没有任何更改
if (status == 4) {
writer.write("{\"error\":0}");
}
if (status == 5) {
}
// 6正在编辑文档,但当前文档状态已保存,
if (status == 6) {
// 获取文件路径
String downloadUri = (String) jsonObj.get("url");
System.out.println("url:"+downloadUri);
System.out.println("********************");
System.out.println(fileId);
System.out.println("url2:"+downloadUri);
System.out.println("********************");
//此方法为获取在线文件中的书签内容更新数据库,若无此需求,可忽略
updatefilecontext(token,id,fileId, downloadUri);
// 返回根据
writer.write("{\"error\": 0}");
}
// 7强制保存文档时出错
if (status == 7) {
String downloadUri = (String) jsonObj.get("url");
System.out.println("downloadUri:***"+downloadUri);
writer.write("{\"error\":0}");
}
// writer.write("{\"error\":0}");
} catch (Exception e) {
writer.write("{\"error\":-1}");
e.printStackTrace();
}
}
版权声明:本文标题:史上最全 在线编辑 onlyOffice 使用步骤 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727230007a1103556.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论