layui使用layui-excel擴展導出xlsx格式文件

layui-excel擴展導出的文件可用office打開，正常顯示；直接用table帶的導出功能，導出的文件用office打開顯示亂碼。

layui-excel擴展下載地址：https://fly.layui.com/extend/excel/

@extends('Admin.common.title')
@section('content')
    
    <button class="layui-btn layui-btn-warm" type="button" id="download">下載數據卡</button>
    
    <!-- 導出表 不展示 -->
    <div style="display:none;"><table id="data_export"></table></div>

    <script>       
        layui.config({base: '/static/layui-excel/layui_exts/'}).use(['table', 'form', 'laydate', 'excel'], function () {
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var excel = layui.excel;
            
            //監聽下載按鈕
            $("#download").click(function () {
                var ins1=table.render({
                    elem: '#data_export'
                    ,url:'/Shop/list'
                    ,method:'POST'
                    ,headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                    ,async: false
                    ,cols: [[
                        {field:'brand',  title: '品牌'}
                        ,{field:'year',  title: '年份'}
                        ,{field:'activity',  title: '活動'}
                        ,{field:'stage',  title: '階段'}
                        ,{field:'start_date',  title: '日期'}
                    ]]
                    ,page: false
                    ,limit: Number.MAX_VALUE
                    ,done: function (res, curr, count) {
                        exportFile('data_export')
                    }
                });
            })
            //表格導出
            function exportFile(id) {
                //根據傳入tableID獲取表頭
                var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
                var htrs = Array.from(headers.querySelectorAll('tr'));
                var titles = {};
                for (var j = 0; j < htrs.length; j++) {
                    var hths = Array.from(htrs[j].querySelectorAll("th"));
                    for (var i = 0; i < hths.length; i++) {
                        var clazz = hths[i].getAttributeNode('class').value;
                        if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
                            //排除居左、具有、隱藏字段
                            //修改:默認字段data-field+i,兼容部分數據表格中不存在data-field值的問題
                            titles['data-field' + i] = hths[i].innerText;
                        }
                    }
                }
                //根據傳入tableID獲取table內容
                var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
                var btrs = Array.from(bodys.querySelectorAll("tr"))
                var bodysArr = new Array();
                for (var j = 0; j < btrs.length; j++) {
                    var contents = {};
                    var btds = Array.from(btrs[j].querySelectorAll("td"));
                    for (var i = 0; i < btds.length; i++) {
                        for (var key in titles) {
                            //修改:默認字段data-field+i,兼容部分數據表格中不存在data-field值的問題
                            var field = 'data-field' + i;
                            if (field === key) {
                                //根據表頭字段獲取table內容字段
                                contents[field] = btds[i].innerText;
                            }
                        }
                    }
                    bodysArr.push(contents)
                }
                //將標題行置頂添加到數組
                bodysArr.unshift(titles);
                //導出excel
                excel.exportExcel({
                    sheet1: bodysArr
                }, 'download-filename' + new Date().toLocaleString() + '.xlsx', 'xlsx');
            }
        });
    </script>
@endsection