nur Basisfall der Office+vue-Implementierung
Da der onlyoffice-Dienst in das aktuelle Projekt integriert werden muss, beziehen Sie sich dann auf die offizielle Website und die Fallfreigabe einiger anderer Blogger und zeichnen Sie es selbst auf. 1. Installieren Sie zuerst die API im offiziellen
Dokument auf dem Server und holen Sie sich dann die statische Adresse der API auf dem Server, verwenden Sie das script-Tag wird in die index.html- Datei
des Projekts eingefügt Die importierte Adresse ist die Adresse der API auf dem Server Diese Adresse im offiziellen Dokument kann nicht verwendet werden Sie müssen Konfigurieren Sie es selbst. Erst nach der Konfiguration dieses Schritts kann es verwendet werden, wenn onlyoffice später instanziiert wird. Wenn Sie es nicht verstehen, können Sie Ihre Vorgesetzten fragen
2. Gehen Sie nach der Konfiguration zum Projekt, um eine neue vue-Datei zu erstellen, schreiben Sie sie gemäß dem Format des offiziellen Dokuments, schreiben Sie einfach ein div und binden Sie eine ID
daran ein notwendiger Parameter für die onlyoffice-Instanziierung
Die Konfiguration ist hier erforderlich, das heißt, die im offiziellen Dokument geschriebene Konfiguration
fileType : Dateityp, muss Kleinbuchstaben sein
Schlüssel : die eindeutige ID für den Server, dieselbe ID wird die Datei im Server-Cache erhalten (mit diesem Schlüssel . es wird zuerst im Cache danach gesucht), wenn dies zu Beginn nur ein Versuch ist, können Sie zunächst einen leeren String geben
title : the file name
url : the absolute path of the file will be rendered, this parameter ist sehr wichtig, es ist nicht die lokale Adresse der Datei, sondern die Datei muss auf den Server übertragen werden, von dem das Projekt abhängt, und dann die URL-Adresse der Datei auf dem Server (dies erfordert im Allgemeinen Back-End support) verwendet werden. Dieser Parameter bestimmt, ob es instanziiert werden kann. onlyoffice-Objekt
documentType : Dokumenttyp öffnen
editConfig : relevante Editorkonfiguration
editConfig->callbackUrl : Dieser Parameter ist die Callback-URL nach dem Speichern des Dokuments, also der absolute Pfad des designierten Dokumentspeicherdienstes. Für Testzwecke können Sie zuerst eine leere Zeichenfolge übergeben. Beeinflusst die Instanziierung nicht.
Es gibt einige häufig verwendete Konfigurationen in der edifConfig-Konfiguration:
Wenn Sie andere Anforderungen haben, können Sie zum offiziellen Dokument gehen
. 4. Endlich , instanziieren Sie das Objekt:
5. CallbackUrl-Callback-Schnittstelle : Hier können Sie das Backend nach Belieben eine Schnittstelle definieren lassen, die Anforderungsmethode ist post, und onlyoffice ruft diese Schnittstelle automatisch 10 Sekunden nach dem Schließen der Seite oder nachdem der Benutzer die Bearbeitung abgeschlossen hat, auf, es ist kein manueller Auslöser erforderlich. und die Schnittstelle wird später
{
"error":0
}
Dies gibt den Körper zurück, andernfalls meldet onlyoffice einen Fehler, nachdem es instanziiert wurde.
Hier ist mein eigener vollständiger Instanziierungscode als Referenz:
<template>
<div id="office">
<div id="container"></div>
</div>
</template>
<script>
import {
mapGetters, mapActions } from "vuex";
export default {
name: "office",
data() {
return {
container: `officeContent${
parseInt(Math.random(0, 1) * 100000)}`,
};
},
computed: {
...mapGetters(["cycleInfo", "userInfo"]) },
methods: {
/**
* @description: 实例化onlyoffice对象，渲染到页面
* @params: {Object}
* @author: yanyingxin
*/
initOffice(option) {
// debugger
console.log('init');
try {
let fileType = "xlsx";
let documentType = "spreadsheet";
const config = {
documentType: documentType, // 打开的文档类型（详细的看官网）
document: {
// 这个字段包含了对文档本身的设置
fileType: fileType, // 文件类型，必须小写
key: "", // 给服务端用的唯一id，同一个id就会获取服务器缓存里的文件（有这个key，就会先根据它去缓存里找），文件一旦被保存过或者修改过，就对应一个新的id；url也能做key但是不能有特殊字符并且长度小于128字符长度
title: option.title, // 文件名
url: option.url, // 必须绝对路径，源文件所在的地方
permissions: {
// 权限控制
// fillForms: true,
// comment: false, // 评论功能的开关
copy: true, // 允许复制内容
download: true, // 是否允许下载（其实就是另存为，因为保存就是保存在服务器）
edit: true, // 是否允许编辑文档（这里是历史记录，不允许编辑)
print: true, // 是否允许打印
review: true, // 可编辑时才可用，功能没试过，应该是协同编辑下的评审
save: true,
},
},
editorConfig: {
// 对编辑器（而非文档本身）的设置
callbackUrl: `${
process.env.DMS_URL}/xx/xx/config_parser/callback?cycle_id=${
option.cycleId}&project_id=${
option.projectId}&fileName=${
option.title}`,// 指定文档存储服务的绝对路径
lang: "zh-CN", // 编辑器ui的语言
location: "", // 用于设置计量单位 比如us、ca（设成英寸）
mode: "edit", // 设定文档打开的时候处于什么状态 默认为edit
user: {
// 当前正在view/edit此文档的用户信息
name: this.userInfo.name, // full name
},
customization: {
// autosave: false,
forcesave: true, // 启用保存按钮
logo: {
image: "http://minio.xxx.com:xxxx/xx/xx.png",
imageEmbedded: "http://xx.xx.xxx.xx/favicon-7.ico",
url: "http://xxx.com.cn",
},
customer: {
address: "xx市xx区xx路700号",
info: "提供高效、协调的团队协作方式",
mail: "[email protected]",
name: "KR",
www: "http://xxx.com.cn",
},
},
},
events: {
onRequestSaveAs: () => {
console.log("save file>>>>>>>>>>>>>>");
},
},
};
console.log('config', config);
const docEditor = new DocsAPI.DocEditor("container", config);
} catch (error) {
console.log("error", error);
}
},
},
};
</script>
<style>
iframe {
height: 700px !important;
border: 2px #ccd0dc solid;
}
</style>
Dieser Code kann nicht direkt kopiert und eingefügt werden. Einige Parameter darin müssen konfiguriert und hinzugefügt werden, bevor sie verwendet werden können, aber die allgemeine Logik und Struktur sind so. Ich hoffe, es wird für zukünftige Generationen hilfreich sein.