چطور با استفاده از جاوا اسکریپت، از اطلاعات جدول HTML خروجی اکسل بگیریم؟

برای گرفتن خروجی اکسل از اطلاعات دیتابیس، راه‌های مختلفی وجود دارد. یکی از راه‌ها این است که به طور مستقیم از دیتابیس داده‌ها را Fetch و خروجی اکسل بگیریم.

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

function exportTableToExcel(tableID, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'excel_data.xls';
    
    // Create download link element
    downloadLink = document.createElement("a");
    
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
    
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
}

فانکشن فوق را در تگ script و در صفحه‌ی مورد نظر قرار می‌دهیم. این فانکشن دو ورودی دریافت می‌کند. tableID و filename که اختیاری است و نام خروجی را مشخص می‌کند.

به جدول مورد نظرمان id با عنوان tableID را تخصیص می‌دهیم:

<table id="tblData">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Ehsan Razavi</td>
        <td>[email protected]</td>
        <td>INDIA</td>
    </tr>
    <tr>
        <td>Hamid Ali</td>
        <td>[email protected]</td>
        <td>INDIA</td>
    </tr>
    <tr>
        <td>Ahmad Zarei</td>
        <td>[email protected]</td>
        <td>IRAN</td>
    </tr>
</table>

برای ایجاد خروجی هم کافی است یک button تعبیه کرده و فانکشن را در آن فراخوانی کنیم:

<button onclick="exportTableToExcel('tblData')">Export</button>

در بالا پارامتر دوم را به تابع پاس ندادم و نام پیش‌فرض در فانکشن به فایل خروجی تخصیص داده می‌شود. اما اگر بخواهم نام فایل با نام دلخواه من ذخیره شود، کافی است پارامتر دوم را به فانکشن بدهم و کار تمام است و خروجی در قالب اکسل با نام file-name ذخیره خواهد شد:

<button onclick="exportTableToExcel('tblData', 'file-name')">Export</button>

نکته: این خروجی با محتوای فارسی یا به عبارتی یونیکد utf-8 سازگاری دارد.

منبع اصلی این آموزش وبسایت codexworld می‌باشد.