想在ASP.NET MVC中建立MS Word編輯器?Aspose.Words快速搞定!

Aspose.Words for .NET提供了一套完整的功能,用於在多個.NET應用程序中操做和轉換MS Word文檔。您能夠在桌面或Web應用程序中建立新的或編輯現有的Word文檔。css

在本文中,將展現如何利用Aspose.Words for .NET的字處理功能,以及如何在ASP.NET MVC中建立基於Web的MS Word編輯器。html

Aspose.Words for .NET已升級至V20.4,若是你尚未用過Aspose.Words能夠點擊這裏下載最新版測試。瀏覽器

在ASP.NET MVC中建立MS Word編輯器的步驟

爲了演示,將在此應用程序中使用了基於JavaScript的Suneditor WYSIWYG編輯器。您能夠使用相同的內容,也能夠選擇其餘任何適合您要求的HTML編輯器。如下是建立ASP.NET Word編輯器的步驟。編輯器

  • 在Visual Studio中建立一個新的ASP.NET Core Web應用程序。
    .NET版Word處理控件Aspose.words功能演示:在ASP.NET MVC中建立MS Word編輯器
  • 選擇 Web應用程序(模型-視圖-控制器) 模板。
    .NET版Word處理控件Aspose.words功能演示:在ASP.NET MVC中建立MS Word編輯器
  • 下載所見即所得編輯器的文件,並將其保存在 wwwroot 目錄中。
    .NET版Word處理控件Aspose.words功能演示:在ASP.NET MVC中建立MS Word編輯器
  • 打開NuGet軟件包管理器,而後安裝Aspose.Words for .NET軟件包。
    .NET版Word處理控件Aspose.words功能演示:在ASP.NET MVC中建立MS Word編輯器
  • 在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">Openbutton>
      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 Downloadbutton>
      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>
       
      <link href="~/suneditor/dist/css/suneditor.min.css" rel="stylesheet">
       
      <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
      {
      // Create a unique file name
      string fileName = Guid.NewGuid() + ".docx";
      // Convert HTML text to byte array
      byte[] byteArray = Encoding.UTF8.GetBytes(editor.Contains("") ? editor : "" + editor + "");
      // Generate Word document from the HTML
      MemoryStream stream = new MemoryStream(byteArray);
      Document Document = new Document(stream);
      // Create memory stream for the Word file
      var outputStream = new MemoryStream();
      Document.Save(outputStream, SaveFormat.Docx);
      outputStream.Position = 0;
      // Return generated Word file
      return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Rtf, fileName);
      }
      catch (Exception exp)
      {
      return null;
      }
      }
      [HttpPost]
      public ViewResult UploadFile(IFormFile file)
      {
      // Set file path
      var path = Path.Combine("wwwroot/uploads", file.FileName);
      using (var stream = new FileStream(path, FileMode.Create))
      {
      file.CopyTo(stream);
      }
      // Load Word document
      Document doc = new Document(path);
      var outStream = new MemoryStream();
      // Set HTML options
      HtmlSaveOptions opt = new HtmlSaveOptions();
      opt.ExportImagesAsBase64 = true;
      opt.ExportFontsAsBase64 = true;
      // Convert Word document to HTML
      doc.Save(outStream, opt);
      // Read text from stream
      outStream.Position = 0;
      using(StreamReader reader = new StreamReader(outStream))
      {
      ViewBag.HtmlContent = reader.ReadToEnd();
      }
      return View("Index");
      }
  • 在您喜歡的瀏覽器中生成並運行該應用程序。
    .NET版Word處理控件Aspose.words功能演示:在ASP.NET MVC中建立MS Word編輯器

演示

如下是如何在ASP.NET Word編輯器中建立或編輯Word文檔的演示。post

  • 建立一個Word文檔
    .NET版Word處理控件Aspose.words功能演示:在ASP.NET MVC中建立MS Word編輯器
  • 編輯Word文檔
    .NET版Word處理控件Aspose.words功能演示:在ASP.NET MVC中建立MS Word編輯器

若是您有任何疑問或需求,請隨時加入Aspose技術交流羣(642018183),咱們很高興爲您提供查詢和諮詢測試

相關文章
相關標籤/搜索