主要是前端传的时候带上token,因为在回调时,我的文件中心是需要进行token校验的,直接进行回调时不行,需要带上token,但是我目前的代码还是不行,没传上相关的token:
<template>
<div id="editor"></div>
</template>
<script>
import { mapGetters } from "vuex";
import {pbService} from "@/api/manage";
const downloadUrl = "http://192.168.100.234:3000/api/file/fileDownload/";
const callBackUrl = "http://192.168.100.234:3000/api/file/fileUpload/";
// const jwtToken= ls.get('token');
// const kunlnToken = "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJEOEM3NkJBMzE0QjQ0MjM3ODQ4OTQwN0ZGMEU0REY5QSIsInN1YiI6IkQ4Qzc2QkEzMTRCNDQyMzc4NDg5NDA3RkYwRTRERjlBIiwiaWF0IjoxNzYyNzYxNzM2LCJleHAiOjE3NjI4MDQ5MzZ9.av2R2L2UoBJeYODD7vFJOPwzy6hMFgbyDZZcPVMdDp8";
import { ls } from '@/utils/storage';
export default {
name: 'OnlyView',
data() {
return {
form: this.$form.createForm(this),
jparam: {},
showPrintBtn: false,
businessid: this.$route.query.businessid,
openFileType: this.$route.query.openFileType,
fileId: this.$route.query.fileid,
pd_code: this.$route.query.pd_code,
direction_type: this.$route.query.direction_type,
title_uuid: this.$route.query.title_uuid,
module_type: this.$route.query.module_type,
syscompanyuuid: this.$route.query.syscompanyuuid,
draft_fileid: this.$route.query.draft_fileid,
print_fileid: this.$route.query.print_fileid,
deal_fileid: this.$route.query.deal_fileid,
first_edit: this.$route.query.first_edit,
default_correct: this.$route.query.default_correct,
onlyView: true,
viewType: this.$route.query.viewType,
intellShow: false,
analogyShow: false,
onlyData: {},
timerDeleteButton: undefined,
instance: undefined,
}
},
props: {
documentUrl: {
type: String,
required: true,
},
documentKey: {
type: String,
required: true,
},
documentTitle: {
type: String,
required: true,
},
jwtToken: {
type: String,
required: true,
},
},
mounted() {
// this.jwtToken = ''
this.documentKey = this.draft_fileid
this.documentTitle = this.draft_fileid
this.loadEditor();
},
computed: {
...mapGetters(['userInfo'])
},
methods: {
loadEditor() {
// 创建 script 元素,用于加载 Only文档编辑器 API
const script = document.createElement('script');
// 设置 script 元素的 src 属性为 API 的 URL
script.src = 'http://192.168.100.234:8088/web-apps/apps/api/documents/api.js';
// 加载完成后调用 initEditor 方法初始化编辑器
script.onload = () => {
this.initEditor();
};
// 将 script 元素添加到文档头部
document.head.appendChild(script);
},
async initEditor() {
// 获取从 props 传递过来的文档信息和 JWT
const { documentUrl, documentKey, documentTitle, jwtToken } = this;
// 配置文档编辑器的参数
const editorConfig = await this.getOnlyOnlineConfig(this.draft_fileid, jwtToken, this.userInfo);
// 关键:如果检测到字段被重命名,手动恢复
if (editorConfig.legacyQiankunDocument && !editorConfig.document) {
editorConfig.document = editorConfig.legacyQiankunDocument;
delete editorConfig.legacyQiankunDocument;
}
console.log("修复后的编辑器配置:", editorConfig); // 确认此时有document字段
console.log('-------- editorConfig =' + JSON.stringify(editorConfig))
// 初始化文档编辑器
const docEditor = new DocsAPI.DocEditor('editor', editorConfig);
},
/**
* 获取在线编辑器配置
* @param {string} fileId - 文件ID
* @param {string} jwtToken - 令牌
* @param {object} userInfo - 用户信息
* @returns {Promise<object>} 编辑器配置
*/
async getOnlyOnlineConfig(fileId, jwtToken, userInfo) {
const token = ls.get('token');
const callbackUrlWithToken = `${callBackUrl}?Kunln-Token=${encodeURIComponent(token)}`
const callbackUrlWithToken01 = `$Kunln-Token=${encodeURIComponent(token)}`
console.log("0001",callbackUrlWithToken)
console.log(token)
const fileInfo = await this.getFileInfoByFileId("07324A0461444323A04336698BE8794A");
const documentUrl = downloadUrl + "07324A0461444323A04336698BE8794A" // 注意:downloadUrl需确保已定义
console.log(documentUrl)
let editorConfig = '';
if (fileInfo.result) {
const fileExt = fileInfo.result.fileext; // 获取文件的扩展名
// 配置文档编辑器的参数
editorConfig = {
document: {
fileType: fileExt,
title: "07324A0461444323A04336698BE8794A",
url: documentUrl,
key: "07324A0461444323A04336698BE8794A"+Date.now(),
permissions: {
download: true, // 允许下载
edit: true, // 允许编辑
history: true, // 允许查看历史
print: true // 允许打印
},
"Kunln-Token": token,
},
editorConfig: {
callbackUrl: callBackUrl, // 注意:callBackUrl需确保已定义
// callbackUrl: callbackUrlWithToken, //方式1:URL参数传递Token(100%生效)
// headers: { // 关键:启用请求头传递 Token(和 Excel 导出完全一致)
// "Kunln-Token": token, // 字段名必须和 Excel 导出时一致
// "Content-Type": "application/json" // 补充:确保请求体格式正确
// },
// "Authorization": `Kunln-Token ${token}`, // 放入 Authorization 头,符合 OnlyOffice 配置
user: {
id: userInfo.loginname, // 用户 ID
name: userInfo.personname // 用户名
},
customization: {
autoSave: {
enabled: true,
delay: 2 // 自动保存的时间间隔(以分钟为单位)
},
// 关键!OnlyOffice 回调请求(上传/保存)的自定义请求头,必须放这里!
httpHeaders: {
"Kunln-Token": token, // 重点:用户级 Token 放在这里,会自动携带到 callbackUrl 请求中
}
},
"lang": "zh-CN",
token: token,
},
// token: jwtToken // JWT 令牌
// token: token
};
console.log("onlyOnline editorConfig = " + JSON.stringify(editorConfig))
return editorConfig;
}
},
/**
* 根据文件Id获取文件信息
* @param {string} fileId - 文件Id
* @returns {Promise<Object|Error>} - 结果或错误对象
*/
async getFileInfoByFileId(fileId) {
try {
return await pbService('service.file.fileService', 'queryFileInfoByPK', {
"user_info": "07324A0461444323A04336698BE8794A",
"result_fields": "fileid,fileext,filename",
});
} catch (error) {
alert("获取文件信息失败!" + error)
return error;
}
}
},
};
</script>
<style scoped>
#editor {
width: 100%;
height: 100%;
}
</style>
最新发布