Редактор слов ASP.NET MVC

Aspose.Words for .NET предоставляет полный набор функций для обработки и преобразования документов MS Word во множестве приложений .NET. В частности, вы можете создавать новые или редактировать существующие документы Word в настольных или веб-приложениях. В этом посте я покажу вам, как использовать возможности обработки Word в Aspose.Words для .NET и создать веб-редактор MS Word в ASP.NET MVC.

Редактор ASP.NET MVC Word — создание документов Word

Мы собираемся создать редактор ASP.NET MVC Word, который будет основан на HTML-редакторе WYSIWYG для написания и обновления содержимого документов. Кроме того, Aspose.Words для .NET будет использоваться для преобразования содержимого документа Word в HTML для редактирования и создания документов Word из обновленного содержимого.

Шаги по созданию редактора MS Word в ASP.NET MVC

Для демонстрации я использовал в этом приложении редактор WYSIWYG Suneditor на основе JavaScript. Вы можете использовать тот же или выбрать любой другой HTML-редактор, который соответствует вашим требованиям. Ниже приведены шаги для создания редактора ASP.NET Word.

  • Сначала создайте новое веб-приложение ASP.NET Core в Visual Studio.
  • Выберите шаблон веб-приложения (модель-представление-контроллер).
  • Загрузите файлы редактора WYSIWYG и сохраните их в каталоге wwwroot.
  • Откройте диспетчер пакетов NuGet и установите пакет Aspose.Words для .NET.
  • Добавьте следующий скрипт в представление index.cshtml.
@{
    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>
  • Добавьте следующие методы в контроллер HomeController.cs.
[HttpPost]
public FileResult Index(string editor)
{
	try
	{
		// Создайте уникальное имя файла
		string fileName = Guid.NewGuid() + ".docx";
		// Преобразование HTML-текста в массив байтов
		byte[] byteArray = Encoding.UTF8.GetBytes(editor.Contains("<html>") ? editor : "<html>" + editor + "</html>");
		// Создать документ Word из HTML
		MemoryStream stream = new MemoryStream(byteArray);
		Document Document = new Document(stream);
		// Создать поток памяти для файла Word
		var outputStream = new MemoryStream();
		Document.Save(outputStream, SaveFormat.Docx);
		outputStream.Position = 0;
		// Вернуть сгенерированный файл Word
		return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Rtf, fileName);
	}
	catch (Exception exp)
	{
		return null;
	}
}
[HttpPost]
public ViewResult UploadFile(IFormFile file)
{
	// Установить путь к файлу
	var path = Path.Combine("wwwroot/uploads", file.FileName);
	using (var stream = new FileStream(path, FileMode.Create))
	{
		file.CopyTo(stream);
	}
	// Загрузить документ Word
	Document doc = new Document(path);
	var outStream = new MemoryStream();
	// Установить параметры HTML
	HtmlSaveOptions opt = new HtmlSaveOptions();
	opt.ExportImagesAsBase64 = true;
	opt.ExportFontsAsBase64 = true; 
	// Преобразование документа Word в HTML
	doc.Save(outStream, opt);
	// Чтение текста из потока
	outStream.Position = 0;
	using(StreamReader reader = new StreamReader(outStream))
	{
		ViewBag.HtmlContent = reader.ReadToEnd();
	}
	return View("Index");
}
  • Наконец, создайте и запустите приложение в своем любимом браузере.

Демо

Ниже показано, как создавать или редактировать документы Word в редакторе ASP.NET Word.

Создайте документ Word в ASP.NET

Редактировать документ Word в ASP.NET

Скачать исходный код

Вы можете скачать исходный код редактора MS Word здесь.

Вывод

В этой статье вы узнали, как создавать документы MS Word в ASP.NET. Пошаговое руководство вместе с примерами кода показало, как создать простой веб-редактор MS Word в ASP.NET MVC. Кроме того, вы можете узнать больше об Aspose.Words для .NET, используя следующие ресурсы.

Попробуйте Aspose.Words для .NET бесплатно

Вы можете бесплатно попробовать Aspose.Words для .NET, запросив временную лицензию.

Статьи по Теме