تبدیل HTML به Word در جاوا اسکریپت

تبدیل HTML به Word

بطور معمول، قابلیت اکسپورت برای دانلود محتوای صفحه به عنوان یک فایل و ذخیره آن جهت خواندن آفلاین استفاده می شود.

فایل ورد مایکروسافت با فرمت .doc برای گرفتن خروجی محتوای HTML به عنوان یک فایل مناسب است.

تبدیل HTML به Word می تواند به راحتی بدون استفاده از اسکریپت های سمت سرور پیاده سازی شود (تبدیل HTML به Word در PHP).

یک راه حل سمت کلاینت برای تبدیل HTML به Word در جاوا اسکریپت وجود دارد.

قابلیت اکسپورت به ورد در سمت کلاینت باعث می شود که اپلیکیشن وب کاربر پسند شود چرا که کاربر می توانید بخشی از صفحه وب را بدون رفرش خرورجی بگیرد.

در این آموزش Javascript، به شما نحوه تبدیل HTML به Word در جاوا اسکریپت را نشان می دهیم.

قابلیت اکسپورت جاوا اسکریپت می تواند برای دانلود محتوای صفحه وب یا محتوای div خاصی در یک فایل doc / docx استفاده شود.

تبدیل HTML به Word در جاوا اسکریپت

کد مثال ما محتوای HTML را به داکیومنت ورد تبدیل می کند و قابلیت دانلود به عنوان فایل .doc را دارد.

کد جاوا اسکریپت:

تابع Export2Doc() محتوای HTML را به ورد یا بخش مشخصی از صفحه وب یا تصاویر را خروجی می گیرد، و به عنوان فایل .doc دانلود می شود.

element – ضروری. آیدی المان برای اکسپورت کردن محتوا از آن را مشخص می کند.
Filename – اختیاری. نام فایل داکیومنت ورد را مشخص می کند.

function Export2Doc(element, filename = ''){
    var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
    var postHtml = "</body></html>";
    var html = preHtml+document.getElementById(element).innerHTML+postHtml;

    var blob = new Blob(['\ufeff', html], {
        type: 'application/msword'
    });
    
    // Specify link url
    var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
    
    // Specify file name
    filename = filename?filename+'.doc':'document.doc';
    
    // Create download link element
    var downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob ){
        navigator.msSaveOrOpenBlob(blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = url;
        
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
    
    document.body.removeChild(downloadLink);
}

function Export2Doc(element, filename = ''){

var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";

var postHtml = "</body></html>";

var html = preHtml+document.getElementById(element).innerHTML+postHtml;

var blob = new Blob(['\ufeff', html], {

type: 'application/msword'

});

// Specify link url

var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);

// Specify file name

filename = filename?filename+'.doc':'document.doc';

// Create download link element

var downloadLink = document.createElement("a");

document.body.appendChild(downloadLink);

if(navigator.msSaveOrOpenBlob ){

navigator.msSaveOrOpenBlob(blob, filename);

}else{

// Create a link to the file

downloadLink.href = url;

// Setting the file name

downloadLink.download = filename;

//triggering the function

downloadLink.click();

}

document.body.removeChild(downloadLink);

}

محتوای HTML :

محتوای HTML خود را داخل یک تگ دربرگیرنده (container) قرار بدید تا بتوان از آن خروحی ورد را گرفت.

<div id="exportContent">
    <!-- Your content here -->
</div>

</div>

بر روی رویداد کلیک تابع Export2Doc() را به منظور تبدیل HTML به Word در جاوا اسکریپت قرار بدید.

<button onclick="Export2Doc('exportContent');">Export as .doc</button>

1	<button onclick="Export2Doc('exportContent');">Export as .doc</button>

اگر قصد داریم که نام فایل دانلوی را مشخص کنید، می توانید به عنوان پارامتر دوم در تابع Export2Doc() قرار بدید.

<button onclick="Export2Doc('exportContent', 'word-content');">Export as .doc</button>

1	<button onclick="Export2Doc('exportContent', 'word-content');">Export as .doc</button>

جمع بندی

کد مثال ما به شما نحوه پیاده سازی تبدیل HTML به Word در جاوا اسکریپت بدون استفاده از پلاگین های جانبی جی کوئری را نشان می دهد.

نه فقط فایل .doc بلکه می توانید محتوای HTML را به عنوان فایل .docx خروجی بگیرید که بطور کامل از یونیک و زبان فارسی پشتیبانی می کند

همچنین به راحتی می توانید قابلیت های دلخواه دیگر را مثل هدر و فوتر اختصاصی و غیره را بنابر نیاز اضافه کنید.

امیدوارم از آموزش تبدیل HTML به Word در جاوا اسکریپت نهایت استفاده را برده باشید.

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید، از قسمت نظرات ارسال کنید. سریعا، پاسخگوی سوالات شما هستیم.

لغو پاسخ

حسین ۳ بهمن ۱۴۰۱

سلام
بی نهایت از این کد و ترفند استفاده کردم
ولی مشکلی که پیش آمد این بود که تصاویر صفحه رو در فایل خروجی نمی آورد
آیا راهی هست که تصاویر رو از لینک گرفته و به صورت استریم در صفحه نمایش بدیم تا در خروجی هم نشان داده شود؟

پاسخ
mary ۱۹ دی ۱۳۹۹

سلام
ممنون از کدی که در اخیتارمون قرار دادین.
مشکل فقط این هست که در خروجی استایل رو نمیخونه و جدول بهم ریخته دیده میشه. میشه کمک کنید

پاسخ

حسین ۳ بهمن ۱۴۰۱

استایل ها رو به صورت اینلاین و داخل خود تگ ها بیارید درست میشه

پاسخ

amir ۳۱ فروردین ۱۳۹۹

سلام
میشه یک آموزش در زمینه دریافت اطلاعات یک سایت با curl و نمایش اطلاعات در سایت دیگه قرار بدین؟
اگر ممکن هست یک توضیحی هم بدین که اگر بخوایم اطلاعات یک موضوع خاص از سایت دیوار نمایش بدم داخل سایت و همچنین اون اطلاعات در پایگاه داده ذخیره کنم باید چیکار کنم

پاسخ

حسن شفیعی ۳۱ فروردین ۱۳۹۹

سلام. آموزش دریافت اطلاعات از طریق curl در آموزش زیر هست :
آموزش curl در php
موفق باشید.

پاسخ

تبدیل HTML به Word در جاوا اسکریپت

تبدیل HTML به Word در جاوا اسکریپت

کد جاوا اسکریپت:

محتوای HTML :

جمع بندی

دانـلود باکــس

تبدیل HTML به Word در PHP

دریافت خروجی CSV با PHP از دیتابیس

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه