ASP.NET MVCワードエディター

Aspose.Words for .NETは、多数の.NETアプリケーション内でMSWordドキュメントを操作および変換するための機能の完全なセットを提供します。特に、デスクトップまたはWebアプリケーション内で新しいWord文書を作成したり、既存のWord文書を編集したりできます。この投稿では、Aspose.Words for .NETのワードプロセッシング機能を活用して、ASP.NET MVCでWebベースのMSWordエディターを作成する方法を紹介します。

ASP.NET MVCワードエディター-Wordドキュメントの作成

ドキュメントのコンテンツを記述および更新するためのWYSIWYGHTMLエディターに基づくASP.NET MVCワードエディターを作成します。さらに、Aspose.Words for .NETは、更新されたコンテンツからWord文書を編集および生成するために、Word文書のコンテンツをHTMLにレンダリングするために使用されます。

ASP.NET MVCでMSWordエディターを作成する手順

デモンストレーションでは、このアプリケーションでJavaScriptベースのSuneditorWYSIWYGエディターを使用しました。同じものを使用するか、要件に合った他のHTMLエディターを選択することができます。 ASP.NETWordEditorを作成する手順は次のとおりです。

  • まず、VisualStudioで新しいASP.NET Core Webアプリケーションを作成します。
  • Webアプリケーション(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>");
		// HTMLからWord文書を生成する
		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");
}
  • 最後に、お気に入りのブラウザでアプリケーションをビルドして実行します。

デモ

以下は、ASP.NETWordEditorでWord文書を作成または編集する方法のデモンストレーションです。

ASP.NETでWord文書を作成する

ASP.NETでWord文書を編集する

ソースコードをダウンロード

MSWordEditorのソースコードはこちらからダウンロードできます。

結論

この記事では、ASP.NETでMSWordドキュメントを作成する方法を学習しました。ステップバイステップガイドとコードサンプルは、ASP.NET MVCで単純なWebベースのMSWordエディターを作成する方法を示しています。また、次のリソースを使用して、Aspose.Words for .NETの詳細を調べることができます。

Aspose.Words for .NETを無料でお試しください

一時ライセンスをリクエストすると、Aspose.Words for .NETを無料で試すことができます。

関連記事