Heim >Web-Frontend >js-Tutorial >Fügen Sie Ihrer Web -App mit nurOffice Office -Funktionen hinzu
Dieser Artikel wurde in Partnerschaft mit nur Office erstellt. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.
Wenn wir einer App versuchen, eine komplexe Funktionalität hinzuzufügen, stellt sich die Frage: "Soll ich meine eigenen rollen?" Und es sei denn, Ihr Ziel ist es, diese Funktionalität aufzubauen, ist die Antwort fast immer ein klares „Nein“.
Was Sie brauchen, ist etwas, um Ihnen so schnell wie möglich zu einem MVP zu gelangen, und der beste Weg, dies zu erreichen Drehen Sie sich in die Einsparung der Entwicklungskosten.
Ich gehe davon aus, dass Sie immer noch hier sind, weil die oben genannten mit Ihnen in Resonanz stehen. Jetzt, wo wir synchron sind, möchte ich Ihnen in diesem Artikel zeigen, wie einfach es ist, nurOffice in Ihre Web -App zu integrieren.
Nuroffice bietet die featurereichste Office-Suite, die mit Microsoft Office- und Opendocument-Dateiformaten kompatibel ist. Zeigen, Bearbeiten und gemeinsam mit Dokumenten, Tabellenkalkulationen und Präsentationen direkt aus Ihrer Webanwendung anzeigen.
Die Office Suite hat mehrere Ausgaben. In diesem Artikel werden wir die Entwicklerausgabe verwenden, da wir die Redakteure in die App integrieren möchten, die später viele Benutzer als Cloud-Dienst oder lokale Installation geliefert wird.
Wenn Sie nur in einer vorhandenen Sync & Share -Lösung verwenden möchten, sollten Sie die Enterprise Edition lesen. Eine Liste von Integrationen ist hier.
Die Entwicklerausgabe bietet Ihnen nicht nur genügend Freiheit, die Redakteure in Ihre App zu integrieren, sondern verfügt auch über eine Option „White Label“, mit der Sie die Redakteure vollständig anpassen können, um sie unter Ihrer eigenen Marke zu verwenden.
Um sich in Ihre Web -App zu integrieren, müssen Sie zunächst die einzigen Dokumente (als Dokumentenserver verpackt) herunterladen und auf Ihrem lokalen Server einrichten.
Nachdem Sie es installiert haben, können Sie mit der Implementierung der Anfragen zur Verarbeitung von Dokumenten auf Ihrem Server beginnen. Nuroffice liefert einige sehr schöne Beispiele für .NET, Java, Node.js, Php, Python und Ruby.
Sie können den Dokumentserver und Ihr bevorzugtes Beispiel herunterladen und es sofort auf Ihrem Computer versuchen.
Ich werde demonstrieren, wie Sie sich in Ihre App integrieren können. Zu diesem Zweck verwenden wir ein sehr einfaches Beispiel mit Node.js und Express. Ich werde die Implementierung nicht detailliert eingehen, ich werde das nackte Knochenfotos auslegen und die Lücken ausfüllen, um ein robustes und skalierbares System zu erstellen.
Ich habe eine App mit der folgenden Struktur:
- node_modules - public - backups - css - main.css - documents - sample.docx - javascript - main.js - samples - new.docx - new.xlsx - new.pptx - app.js - index.html - package.json
Wir verwenden den Ordner öffentlich/dokumentiert, um die Dokumente zu speichern. In der App.js -Datei wird unser Express -App -Code und index.html angezeigt, an dem wir unsere Dokumente anzeigen. Ich habe eine sample.docx -Datei in den Ordner dokuments zu Testzwecken fallen gelassen.
Die Baumdateien in öffentlichen/ Samples/ sind die leeren Dateien, die wir beim Erstellen neuer Dateien kopieren.
Der Backups -Ordner, wie Sie später sehen werden, hilft uns nicht nur dabei, die Sicherungen früherer Versionen zu erhalten, sondern uns auch bei der Generierung der eindeutigen Kennung für unsere Dokumente nach der Änderung zu generieren.
Die öffentlichen/CSS/Main.css und Public/JavaScript/Main.js -Dateien werden vom Index.html verwendet. Wir werden uns später ansehen.
Schauen wir uns die App.js -Datei an:
<span>const express = require('express'); </span><span>const bodyParser = require("body-parser"); </span><span>const path = require('path'); </span><span>const fs = require('fs'); </span><span>const syncRequest = require('sync-request'); </span> <span>const app = express(); </span> app<span>.use(bodyParser.json()); </span>app<span>.use(bodyParser.urlencoded({ extended: false })); </span> app<span>.use(express.static("public")); </span> app<span>.get("/", (req<span>, res</span>) => { </span> res<span>.sendFile(path.join(__dirname, "/index.html")); </span><span>}); </span> <span>const port = process.env.PORT || 3000; </span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>)); </span>
Was wir tun, ist die Dateien als Lokalhost: 3000/Dokumente/Dateiname.
Ich bin mir auch vor mir gekommen und habe Syncrequest, FS und Bodyparser hinzugefügt. Diese sind momentan nicht relevant, aber wir werden sie später verwenden.
Um die verfügbaren Dokumente anzuzeigen, müssen wir eine Liste aller Dateinamen erhalten und an den Client senden. Wir erstellen die Route /Dokumente dafür:
app<span>.get("/documents", (req<span>, res</span>) => { </span> <span>const docsPath = path.join(__dirname, "public/documents"); </span> <span>const docsPaths = fs.readdirSync(docsPath); </span> <span>const fileNames = []; </span> docsPaths<span>.forEach(filePath => { </span> <span>const fileName = path.basename(filePath); </span> fileNames<span>.push(fileName); </span> <span>}); </span> res<span>.send(fileNames); </span><span>}); </span>
Am Anfang haben wir nur ein Beispieldokument, aber das macht überhaupt keinen Spaß. Fügen wir A /Create -Route hinzu, um uns beim Hinzufügen einiger Dateien zu unterstützen. Wir nehmen einfach einen Dateinamen und kopieren die entsprechende Vorlage mit seinem neuen Namen in den Ordner öffentlich/dokumenten:
app<span>.post("/create", async (req<span>, res</span>) => { </span> <span>const ext = path.extname(req.query.fileName); </span> <span>const fileName = req.query.fileName; </span> <span>const samplePath = path.join(__dirname, "public/samples", "new" + ext); </span> <span>const newFilePath = path.join(__dirname, "public/documents", fileName); </span> <span>// Copy the sample file to the documents folder with its new name. </span> <span>try { </span> fs<span>.copyFileSync(samplePath, newFilePath); </span> res<span>.sendStatus(200); </span> <span>} catch (e) { </span> res<span>.sendStatus(400); </span> <span>} </span><span>}); </span>
Wir brauchen auch eine Möglichkeit, Dokumente zu löschen. Erstellen wir eine Route /löschen:
app<span>.delete("/delete", (req<span>, res</span>) => { </span> <span>const fileName = req.query.fileName; </span> <span>const filePath = path.join(__dirname, "public/documents", fileName); </span> <span>try { </span> fs<span>.unlinkSync(filePath); </span> res<span>.sendStatus(200); </span> <span>} catch (e) { </span> res<span>.sendStatus(400); </span> <span>} </span><span>}); </span>
Dies ist super einfach. Wir löschen die Datei und senden einen 200 -Status -Code, damit der Benutzer alles gut verläuft. Andernfalls erhalten sie einen 400 -Status -Code.
Bisher können wir unsere Dokumente für die Bearbeitung öffnen, aber wir haben keine Möglichkeit, unsere Änderungen zu retten. Lass uns das jetzt tun. Wir fügen eine A /Track -Route hinzu, um unsere Dateien zu speichern:
- node_modules - public - backups - css - main.css - documents - sample.docx - javascript - main.js - samples - new.docx - new.xlsx - new.pptx - app.js - index.html - package.json
Dies ist schwierig, da es vom Dokumentserver verwendet wird, wenn die Datei vom Editor gespeichert wird. Wie Sie sehen können, geben wir "{" Fehler ": 0}" zurück, was dem Server mitteilt, dass alles gut ist.
Wenn der Editor geschlossen ist, wird die aktuelle Version der Datei in öffentlichen/backups/Dateiname-History/mit der aktuellen Zeit in Millisekunden als Name der Datei gesichert. Wir werden den Namen der Datei später im vorderen Ende verwenden, wie Sie sehen werden.
In diesem Beispiel ersetzen wir das vorherige Backup jedes Mal, wenn wir eine neue speichern. Wie würden Sie mehr Backups behalten?
Wir benötigen eine Möglichkeit, die Sicherungen für eine bestimmte Datei zu erhalten. Daher fügen wir eine A /Backups -Route hinzu, um dies zu verarbeiten:
<span>const express = require('express'); </span><span>const bodyParser = require("body-parser"); </span><span>const path = require('path'); </span><span>const fs = require('fs'); </span><span>const syncRequest = require('sync-request'); </span> <span>const app = express(); </span> app<span>.use(bodyParser.json()); </span>app<span>.use(bodyParser.urlencoded({ extended: false })); </span> app<span>.use(express.static("public")); </span> app<span>.get("/", (req<span>, res</span>) => { </span> res<span>.sendFile(path.join(__dirname, "/index.html")); </span><span>}); </span> <span>const port = process.env.PORT || 3000; </span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>)); </span>
Hier stellen wir sicher, dass der Sicherungsordner für diese Datei vorhanden ist und ein Array aller Sicherungsdateien in diesem Ordner zurückgegeben wird. Ja, dies hilft Ihnen bei Ihrer Aufgabe, weitere Sicherungen für eine einzige Datei zu führen. Ich kann nicht die ganze Arbeit für dich machen!
Wir werden sehen, wie wir unsere Dokumente öffnen können, um sie direkt im Browser mit nur von Dokumenten zu bearbeiten.
Erstens erstellen wir eine einfache HTML -Datei:
app<span>.get("/documents", (req<span>, res</span>) => { </span> <span>const docsPath = path.join(__dirname, "public/documents"); </span> <span>const docsPaths = fs.readdirSync(docsPath); </span> <span>const fileNames = []; </span> docsPaths<span>.forEach(filePath => { </span> <span>const fileName = path.basename(filePath); </span> fileNames<span>.push(fileName); </span> <span>}); </span> res<span>.send(fileNames); </span><span>}); </span>
Wie Sie sehen können, hat diese Datei nicht viel zu tun. Wir haben den Platzhalter Div, in dem der Herausgeber beigefügt wird. Dann gibt es die Dokumente Div, die die Steuerelemente zum Erstellen von Dokumenten und einen Container für die Liste der Dateinamen enthält.
unten haben wir das Skript mit der JavaScript -API für den Dokumentserver. Denken Sie daran, dass Sie den Host möglicherweise durch den Standort Ihres Dokumentservers ersetzen müssen. Wenn Sie es mit dem Docker -Befehl installiert haben, den ich Ihnen gegeben habe, sollten Sie gut gehen.
Zu guter Letzt gibt es das Skript-Tag, in dem wir unseren Front-End-JavaScript importieren, und die Main.js-Datei, in der wir globalen Zugriff auf das DOCSAPI-Objekt haben.
Bevor wir zum Codieren kommen, lassen Sie uns das Layout mit einigen CSS abschließen, um unsere App nutzbarer und weniger hässlicher zu machen. Fügen Sie Main.CSS Folgendes hinzu:
app<span>.post("/create", async (req<span>, res</span>) => { </span> <span>const ext = path.extname(req.query.fileName); </span> <span>const fileName = req.query.fileName; </span> <span>const samplePath = path.join(__dirname, "public/samples", "new" + ext); </span> <span>const newFilePath = path.join(__dirname, "public/documents", fileName); </span> <span>// Copy the sample file to the documents folder with its new name. </span> <span>try { </span> fs<span>.copyFileSync(samplePath, newFilePath); </span> res<span>.sendStatus(200); </span> <span>} catch (e) { </span> res<span>.sendStatus(400); </span> <span>} </span><span>}); </span>
Mit dem aus dem Weg sind wir bereit, das vordere Ende zu codieren. Wir werden zunächst die Dateien im Ordner Dokumente auflisten. Gehen Sie zum Main.js und fügen Sie den folgenden Code hinzu:
app<span>.delete("/delete", (req<span>, res</span>) => { </span> <span>const fileName = req.query.fileName; </span> <span>const filePath = path.join(__dirname, "public/documents", fileName); </span> <span>try { </span> fs<span>.unlinkSync(filePath); </span> res<span>.sendStatus(200); </span> <span>} catch (e) { </span> res<span>.sendStatus(400); </span> <span>} </span><span>}); </span>
Hier oben erhalten wir die Abfrageparameter, um herauszufinden, ob wir eine Datei öffnen oder nicht. Wenn wir sind, rufen wir die Funktion "EditDocument" auf. Mach dir keine Sorgen, wir werden das später erstellen.
Wenn wir keine Datei öffnen, möchten wir eine Liste der verfügbaren Dateien und der Steuerelemente anzeigen, um mehr zu erstellen. In ListDocuments stellen wir zunächst sicher, dass wir den Platzhalter verbergen und die Liste klären, um sicherzustellen, dass wir ihn neu erstellen. Anschließend rufen wir die zuvor erstellte Route /Dokumente an, um alle Dateien zu erhalten, sie durch sie zu iterieren und die entsprechenden Elemente zu erstellen. Wir identifizieren jedes Element mit dem Dateinamen als ID. Auf diese Weise können wir sie später leicht abrufen.
Beachten Sie, dass wir die adddocumentHTML -Funktion aufrufen, die wir später wiederverwenden werden, um neue Dateien hinzuzufügen.
Für jedes dieser Dokumente rufen wir auch das OpenDocument auf, das wir unten definiert haben, und auf dem Kreuzsymbol nennen wir das Deletedokument, das wir als nächstes definieren werden.
Um unsere Dokumente zu löschen, fordern wir den Benutzer auf, wenn er sicher ist, bevor wir die Route /löschen und in dieser Datei nuklear werden. Anstatt einen weiteren Aufruf unserer API zu verschwenden, überprüfen wir, ob der zurückgegebene Status 200 ist, um die DOM -Elemente direkt zu löschen:
- node_modules - public - backups - css - main.css - documents - sample.docx - javascript - main.js - samples - new.docx - new.xlsx - new.pptx - app.js - index.html - package.json
Erinnerst du dich an diese Funktion, die wir in der Einstellung der Dokumentenerstellungskontrollen aufgerufen haben? Hier gehen Sie:
<span>const express = require('express'); </span><span>const bodyParser = require("body-parser"); </span><span>const path = require('path'); </span><span>const fs = require('fs'); </span><span>const syncRequest = require('sync-request'); </span> <span>const app = express(); </span> app<span>.use(bodyParser.json()); </span>app<span>.use(bodyParser.urlencoded({ extended: false })); </span> app<span>.use(express.static("public")); </span> app<span>.get("/", (req<span>, res</span>) => { </span> res<span>.sendFile(path.join(__dirname, "/index.html")); </span><span>}); </span> <span>const port = process.env.PORT || 3000; </span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>)); </span>
sehr einfach. Wir fordern den Namen auf, rufen die Route /erstellen Sie mit dem als Dateiname -Parameter auf. Wenn der Status als 200 zurückkommt, nennen wir das AddDocumentHTML, um die DOM -Elemente direkt hinzuzufügen.
Dokumente in Onlyoffice -DokumentenJetzt müssen wir die Funktion editDocument definieren. Fügen Sie Main.js den folgenden Code hinzu:
app<span>.get("/documents", (req<span>, res</span>) => { </span> <span>const docsPath = path.join(__dirname, "public/documents"); </span> <span>const docsPaths = fs.readdirSync(docsPath); </span> <span>const fileNames = []; </span> docsPaths<span>.forEach(filePath => { </span> <span>const fileName = path.basename(filePath); </span> fileNames<span>.push(fileName); </span> <span>}); </span> res<span>.send(fileNames); </span><span>}); </span>
Wir haben also drei Funktionen hinzugefügt. Konzentrieren wir uns zuerst auf die letzten beiden. (Wir werden gleich über Editdocument sprechen.)
Der GenerateKey unterstützt uns auch, indem wir den Schlüssel generieren. Dies ist eine eindeutige Dokumentenkennung, die für die Erkennung von Dokumenten durch den Dienst verwendet wird. Es kann eine maximale Länge von 20 und keine Sonderzeichen haben. Und hier ist der Trick: Es muss jedes Mal regeneriert werden, wenn das Dokument gespeichert wird. Sehen Sie, wohin das geht? Genau! Wir werden von unseren Backup -Dateinamen profitieren, um unsere Schlüssel zu generieren.
Wie Sie sehen können, rufen wir den Schlüssel zum Generieren von unserer einzigen Sicherung ab (falls vorhanden) und verwenden den Namen oder auf andere Weise einfach die aktuelle Zeit in Millisekunden, wenn es keine gibt.
Was müsste sich in dieser Funktion ändern, wenn Sie mehr Backups unterstützen würden? [läuft weg]
Der getDocumentType gibt entweder Text, Tabelle oder Präsentation zurück. Nuroffice benötigt dies, um zu wissen, welcher Editor zu öffnen ist.
Das EditDocument ist das, wofür wir hier sind. Darauf haben Sie die ganze Zeit gewartet. Hier übertreffen wir das Dokeeditor -Objekt, das die ID unserer Platzhalter Div und ein Objekt mit einer Reihe von Konfigurationen verabschiedet.
Was ich Ihnen bisher gezeigt habe, sind die minimalen erforderlichen Optionen, um den Dokumentator zu instanziieren. Sie sollten den Abschnitt Erweiterte Parameter in den DOCs überprüfen, um zu sehen, wie Sie von allen verschiedenen Optionen profitieren können. Lassen Sie mich in der Zwischenzeit Sie durch die Grundlagen führen.
oben haben wir das Dokumentfeld, das ein Objekt mit den Informationen zu dem Dokument enthält, das wir öffnen möchten.
Dann haben wir den Dokumenttyp, der, wie wir bereits gesehen haben, entweder Text, Tabelle oder Präsentation sein können.
direkt unten befindet sich das EditorConfig -Objekt, mit dem Sie unter anderem Dinge wie Rechtschreibprüfung, Einheit und Zoom festlegen können. In diesem Fall verwenden wir nur die Callbackurl, die die URL zu der /Track -Route ist, mit der der Dokumentserver die Datei speichert.
Wir haben das Ende erreicht und Sie haben hoffentlich gelernt, wie Sie nur Office -Dokumente in Ihre Web -App einrichten und integrieren. Es gibt eine Menge, die wir auslassen, wie Berechtigungen, Teilen, Anpassungen und viele andere Dinge, die Sie nur mit Office machen können.
Ich hoffe, Sie haben genügend Informationen, um Ihr Produkt weiter zu verbessern, oder vielleicht sogar inspiriert, um ein neues Projekt von Grund auf neu zu starten. Es gibt keine Zeit wie die Gegenwart.
Okay, ich werde dich im nächsten sehen. In der Zwischenzeit codieren Sie weiter und denken Sie daran, Spaß zu haben, während Sie dabei sind!
Das obige ist der detaillierte Inhalt vonFügen Sie Ihrer Web -App mit nurOffice Office -Funktionen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!