Редактор ASP.NET MVC Word

Aspose.Words for .NET надає повний набір функцій для обробки та перетворення документів MS Word у багатьох програмах .NET. Зокрема, ви можете створювати нові або редагувати наявні документи Word у настільних або веб-додатках. У цій публікації я покажу вам, як використовувати можливості обробки Word Aspose.Words for .NET і створити веб-редактор MS Word в ASP.NET MVC.

Редактор ASP.NET MVC Word - створюйте документи Word

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

Кроки для створення редактора MS Word в ASP.NET MVC

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

  • Спочатку створіть нову веб-програму ASP.NET Core у Visual Studio.
  • Виберіть шаблон Web Application (Model-View-Controller).
  • Завантажте файли редактора WYSIWYG і зберігайте їх у каталозі wwwroot.
  • Відкрийте диспетчер пакетів NuGet і встановіть пакет Aspose.Words for .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 у редакторі Word ASP.NET.

Створіть документ Word в ASP.NET

Редагування документа Word в ASP.NET

Завантажити вихідний код

Ви можете завантажити вихідний код редактора MS Word тут.

Висновок

У цій статті ви дізналися, як створювати документи MS Word в ASP.NET. У покроковому посібнику разом із зразками коду показано, як створити простий веб-редактор MS Word у ASP.NET MVC. Крім того, ви можете дізнатися більше про Aspose.Words for .NET, використовуючи наступні ресурси.

Спробуйте Aspose.Words for .NET безкоштовно

Ви можете спробувати Aspose.Words for .NET безкоштовно, надіславши запит на тимчасову ліцензію.

Схожі статті