ASP.NET MVC-Word-Editor

Aspose.Words for .NET bietet einen vollständigen Funktionssatz zum Bearbeiten und Konvertieren von MS Word Dokumenten in einer Vielzahl von .NET Anwendungen. Insbesondere können Sie innerhalb der Desktop oder Webanwendungen neue Word Dokumente erstellen oder vorhandene Word Dokumente bearbeiten. In diesem Beitrag zeige ich Ihnen, wie Sie die Textverarbeitungsfunktionen von Aspose.Words for .NET nutzen und einen webbasierten MS Word-Editor in ASP.NET MVC erstellen.

ASP.NET MVC Word Editor - Erstellen Sie Word Dokumente

Wir werden einen ASP.NET MVC Word Editor erstellen, der auf einem WYSIWYG-HTML-Editor zum Schreiben und Aktualisieren des Inhalts der Dokumente basiert. Darüber hinaus wird Aspose.Words for .NET zum Rendern des Inhalts des Word Dokuments in HTML zum Bearbeiten und Generieren von Word Dokumenten aus dem aktualisierten Inhalt verwendet.

Schritte zum Erstellen von MS Word Editor in ASP.NET MVC

Für die Demonstration habe ich in dieser Anwendung den JavaScript-basierten WYSIWYG-Editor Suneditor verwendet. Sie können entweder denselben verwenden oder einen anderen HTML-Editor auswählen, der Ihren Anforderungen entspricht. Im Folgenden sind die Schritte zum Erstellen des ASP.NET-Word-Editors aufgeführt.

  • Erstellen Sie zunächst eine neue ASP.NET Core Webanwendung in Visual Studio.
  • Wählen Sie die Vorlage Webanwendung (Model-View-Controller) aus.
  • Laden Sie die Dateien des WYSIWYG-Editors herunter und bewahren Sie sie im wwwroot-Verzeichnis auf.
  • Öffnen Sie den NuGet Paket Manager, und installieren Sie das Paket Aspose.Words for .NET.
  • Fügen Sie das folgende Skript in der index.cshtml-Ansicht hinzu.
@{
    ViewData["Title"] = "Word Editor in ASP.NET";
}
<div class="row">
    <div class="col-md-12">
        <form asp-controller="Home" asp-action="UploadFile" method="post" class="form-inline"
              enctype="multipart/form-data">
            <br />
            <div class="form-group">
                <input type="file" name="file" accept=".doc, .docx" class="form-control custom-file-input" />
            </div>
            <div class="form-group">
                <button type="submit" class="form-control btn btn-primary">Open</button>
            </div>
            <div class="form-group" style="position:relative; float :right">
                <button type="button" id="download" class="form-control btn btn-success" value="Save and Download">Save and Download</button>
            </div>
        </form>
        <br />
        <form method="post" asp-action="Index" id="formDownload">
            <textarea name="editor" id="editor" rows="80" cols="100">
                @if (ViewBag.HtmlContent == null)
                 {
                    <p>Write something or open an existing Word document. </p>
                 }
                 else
                 {
                     @ViewBag.HtmlContent;
                 }
                </textarea>
        </form>
    </div>
</div>
<!-- suneditor -->
<link href="~/suneditor/dist/css/suneditor.min.css" rel="stylesheet">
<!-- suneditor -->
<script src="~/suneditor/dist/suneditor.min.js"></script>
<script>
    var suneditor = SUNEDITOR.create('editor', {
        display: 'block',
        width: '100%',
        height: '30%',
        popupDisplay: 'full',
        buttonList: [
            ['font', 'fontSize', 'formatBlock'],
            ['paragraphStyle', 'blockquote'],
            ['bold', 'underline', 'align', 'strike', 'subscript', 'superscript', 'horizontalRule', 'list'],
            ['table', 'link', 'image'],
            ['align', 'horizontalRule', 'list', 'lineHeight'],
            ['codeView']
        ],
        placeholder: 'Start typing something...'
    });
</script>
<script>
    $(document).ready(function () {
        $("#download").click(function () {
            suneditor.save();
            $("#formDownload").submit();
        });
    });
</script>
  • Fügen Sie die folgenden Methoden im HomeController.cs-Controller hinzu.
[HttpPost]
public FileResult Index(string editor)
{
	try
	{
		// Erstellen Sie einen eindeutigen Dateinamen
		string fileName = Guid.NewGuid() + ".docx";
		// Konvertieren Sie HTML-Text in ein Byte-Array
		byte[] byteArray = Encoding.UTF8.GetBytes(editor.Contains("<html>") ? editor : "<html>" + editor + "</html>");
		// Erstellen Sie ein Word Dokument aus dem HTML
		MemoryStream stream = new MemoryStream(byteArray);
		Document Document = new Document(stream);
		// Speicherstream für die Word Datei erstellen
		var outputStream = new MemoryStream();
		Document.Save(outputStream, SaveFormat.Docx);
		outputStream.Position = 0;
		// Generierte Word Datei zurückgeben
		return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Rtf, fileName);
	}
	catch (Exception exp)
	{
		return null;
	}
}
[HttpPost]
public ViewResult UploadFile(IFormFile file)
{
	// Dateipfad festlegen
	var path = Path.Combine("wwwroot/uploads", file.FileName);
	using (var stream = new FileStream(path, FileMode.Create))
	{
		file.CopyTo(stream);
	}
	// Word Dokument laden
	Document doc = new Document(path);
	var outStream = new MemoryStream();
	// Legen Sie HTML-Optionen fest
	HtmlSaveOptions opt = new HtmlSaveOptions();
	opt.ExportImagesAsBase64 = true;
	opt.ExportFontsAsBase64 = true; 
	// Konvertieren Sie Word Dokumente in HTML
	doc.Save(outStream, opt);
	// Lesen Sie Text aus dem Stream
	outStream.Position = 0;
	using(StreamReader reader = new StreamReader(outStream))
	{
		ViewBag.HtmlContent = reader.ReadToEnd();
	}
	return View("Index");
}
  • Erstellen Sie schließlich die Anwendung und führen Sie sie in Ihrem bevorzugten Browser aus.

Demo

Im Folgenden wird gezeigt, wie Word Dokumente im ASP.NET Word Editor erstellt oder bearbeitet werden.

Erstellen Sie ein Word Dokument in ASP.NET

Bearbeiten Sie ein Word Dokument in ASP.NET

Quellcode herunterladen

Sie können den Quellcode des MS Word Editors hier herunterladen.

Fazit

In diesem Artikel haben Sie gelernt, wie Sie MS Word Dokumente in ASP.NET erstellen. Die Schritt-für-Schritt-Anleitung zusammen mit Codebeispielen hat gezeigt, wie Sie einen einfachen webbasierten MS Word-Editor in ASP.NET MVC erstellen. Außerdem können Sie mithilfe der folgenden Ressourcen mehr über Aspose.Words for .NET erfahren.

Probieren Sie Aspose.Words for .NET kostenlos aus

Sie können Aspose.Words for .NET kostenlos testen, indem Sie eine temporäre Lizenz anfordern.

In Verbindung stehende Artikel