تبدیل HTML به فایل Word با استفاده از CKEditor

شنبه 7 مرداد 1396

در این مقاله قصد داریم که یکی از موارد کاربردی در طراحی سایت که برای تبدیل Html به فایل Word با استفاده از CKEditor و MariGold.OpenXHTML است را به شما آموزش بدهیم.

تبدیل HTML به فایل Word با استفاده از CKEditor

MariGold.OpenXHTML یک کتابخانه سورس باز برای تبدیل سندهای HTML به سندهای Word در GitHub است و به صورت داخلی از Open XML SDK برای تبدیل سندهای Word استفاده میکند.

CKEditor یک ابزار مشهور رایگان برای قالب بندی HTML در وب سایت ها است.با ادغام این دو با هم ما میتوانیم یک مبدل  HTML به Word را به صورت آنلاین توسعه دهیم.برای نشان دادن این ، ما یک پروژه  ASP.NET MVC ایجاد میکنیم.

استفاده کردن از کدها

در این آموزش ما از Visual Studio 2015 community  استفاده میکنیم.در قسمت اول این آموزش نحوه نمایش CKEditor در پروژه MVC را بیان میکنیم و در قسمت دوم در رابطه با تبدیل HTML به یک سند Word  به عنوان خروجی از CKEditor بحث خواهیم کرد.

تنظیمات CKEditor

پکیج مورد نظر خود را از وب سایت CKEditor دانلود کنید.در این اموزش از پکیج کامل که شامل تمام پلاگین هایی که با ان ازمایش میشود است.Visual Studio را باز کنید و یک پروژه MVC جدید با قالب پیشفرض آن ایجاد کنید.ما میتوانیم از کنترلر Home و Index.cshtml برای نمایش حالت آزمایشی خود استفاده کنیم.

پکیج CkEditor دانلود شده را Extract کنید و تمام پوشه آن را در پوشه Scripts کپی کنید.

تمام محتویات Index.cshtml را پاک کرده و کدهای زیر را در آن قراردهید:

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.TextArea("content", new { @id = "editor1" })
    <input type="submit" value="Submit" />
}

البته، نیاز است که رفرنس ckeditor.js و یک عنصر script در انتهای همان صفحه برای نمونه سازی اولیه از CKEditor وجود داشته باشد.

<script type="text/javascript" src="~/Scripts/ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace('editor1');
</script>

CKEditor در حال حاضر به صورت کامل تنظیم شده است و اگر شما برنامه را اجرا کنید آن را در صفحه ابتدایی مشاهده میکنید.

قدم بعدی نصب MariGold.OpenXHTML و پیاده سازی اکشن متد  Index از نوع post در کنترلر Home برای submit محتوای HTML است.

تنظیمات MariGold.OpenXHTML

این کتابخانه در NugGet package در دسترس است.برای نصب آن فقط کافیست که کد زیر را در package manager console وارد و اجرا کنید:

Install-Package MariGold.OpenXHTML

این همچنین وابستگی های زیر را نیز نصب می کند:

1)DocumentFormat.OpenXml  -> کتابخانه  Open Xml SDK برای ایجاد Open XML word documents است.

2)MariGold.HtmlParser ->برای تجزیه و استخراج عناصر HTML از متن ورودی است.

یک اکشن متد جدید به نام Index مانند زیر در کنترلر، به منظور post کردن HTML از CKEditor ایجاد کنید.

فراموش نکنید که فضای نام های لازم را بیفزایید.

using System.Web.Mvc;
using System.IO;
using MariGold.OpenXHTML;

[HttpPost]
[ValidateInput(false)]
public FileResult Index(string content)
{
    using (MemoryStream mem = new MemoryStream())
    {
        WordDocument doc = new WordDocument(mem);
        doc.Process(new HtmlParser(content));
        doc.Save();

        return File(mem.ToArray(), "application/msword", "sample.docx");
    }
}

اکثر کارها در کلاس WordDocument انجام شده است.این کلاس دارای تعدادی ویژگی و متد برای اداره کردن پردازش تبدیل HTML به سند Open XML word است.در اینجا ، ما از MemoryStream برای ایحاد Word document in-memory استفاده میکنیم.متد Process مسئول تجزیه( pars )کردن HTMLها و تبدیل آن به سند Word است.این متد نیاز به پیاده سازی اینترفیس IParser برای تجزیه متن HTML دارد.این به شما کمک میکند که حالت پیشفرض پیاده سازی HTML parsing را با پیاده سازی سفارشی شده دیگری جا به جا کنید.متد Save نیاز است که تمام اصلاحاتی که شما انجام داده اید را از MemoryStream  پاک کند.

خط آخر کد محتوای MemoryStream را به صورت آرایه binary در FileContentResult می نویسد،که این باعث می شود مرورگر فایل خروجی را دانلود کند.

آموزش asp.net mvc

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید