Vorwort
In React-basierten Webanwendungen besteht häufig die Notwendigkeit, Word-Dokumente in der Vorschau anzuzeigen und anzuzeigen. Es handelt sich umdocx-preview eine hervorragende React-Komponentenbibliothek, die uns dabei helfen kann, die Funktion der Vorschau von Word-Dokumenten auf Webseiten zu realisieren. In diesem Artikel wird erläutert, wie Sie mithilfe von docx-previewKomponenten eine Vorschau von Word-Dokumenten anzeigen, und es wird ein Fall als Referenz bereitgestellt.
Wirkungserfahrung: https://volodymyrbaydalka.github.io/docxjs/
Installieren und konfigurieren
Installieren Sie zunächst die Komponentenbibliothek in Ihrem React-Projekt docx-preview:
npm install docx-preview --save
docx-previewImportieren und konfigurieren Sie dann die Komponente in Ihrer React-Komponente
Anwendungsfälle
Erstellen Sie eine Reaktionskomponente und schreiben Sie die Logik zum Laden von DocX-Dokumenten in ComponentDidMount
import React, {
Component } from 'react';
import * as docx from "docx-preview";
import "./styles.css";
class AppClass extends Component {
constructor(props) {
super(props);
this.state = {
docUrl : 'https://example.com/your_word_document.docx'
};
}
componentDidMount() {
const {
docUrl } = this.state
// 核心代码
docx.renderAsync(docUrl, document.getElementById("panel-section"))
.then((x) => console.log("docx: finished"));
}
render() {
return (
<div className="App">
{
/* 文档预览位置 */}
<div id="panel-section" style={
{
height: "800px", overflowY: "visible" }}></div>
</div>
);
}
}
export default AppClass;
GitHub-Adresse: https://github.com/VolodymyrBaydalka/docxjs
Zusammenfassen
Durch den Einsatz von docx-previewKomponenten können wir die Funktion der Vorschau von Word-Dokumenten problemlos in React-Anwendungen implementieren. Durch einfache Installation, Konfiguration und Verwendung können Word-Dokumente auf Webseiten angezeigt und in der Vorschau angezeigt werden. Unabhängig davon, ob sie zum Anzeigen von Dokumentdetails, zum Lesen von Dokumentinhalten oder zur Verbesserung der Benutzerinteraktion verwendet werden, docx-previewsind Komponenten ein praktisches und praktisches Werkzeug.