使用JS插件ExcellentExport不弹出保存窗口的问题解决方法

https://github.com/jmaister/excellentexport

这是一个网页JS下载TABLE数据保存为EXCEL的插件
需要注意的是：下载按钮标签需要使用A标签，不然不弹出保存窗口（比如使用VUE的时候可能会把按钮做成DIV标签，就不行），实际上是执行了程序的就是不弹窗口，不知道什么原因

<table id="datatable">
    <tr>
        <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
        <td>400</td> <td>500</td> <td>600</td>
    </tr>
</table>

<a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
<a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
<!-- new API, xlsx -->
<a download="somedata.xlsx" href="#" onclick="return ExcellentExport.convert({ anchor: this, filename: 'data_123.array', format: 'xlsx'},[{name: 'Sheet Name Here 1', from: {table: 'datatable'}}]);">Export to CSV</a>

 ExcellentExport.convert(options, sheets);

 Options:
 {
    anchor: String or HTML Element,
    format: 'xlsx' or 'xls' or 'csv',
    filename: String,
    rtl: Use Right-to-left characters, boolean (optional)
 }

 Sheets must be an array of sheet configuration objects. Sheet description:
 [
    {
        name: 'Sheet 1', // Sheet name
        from: {
            table: String/Element, // Table ID or table element
            array: [...] // Array with the data. Array where each element is a row. Every row is an array of the cells.
        },
        removeColumns: [...], // Array of column indexes (from 0)
        filterRowFn: function(row) {return true}, // Function to decide which rows are returned
        fixValue: function(value, row, column) {return fixedValue} // Function to fix values, receiving value, row num, column num
        fixArray: function(array) {return array} // Function to manipulate the whole data array
        rtl: Use Right-to-left characters, boolean (optional)
        formats: [...] // Array of formats for each column. See formats below.
        ...
    },
    {
        ...
    }, ...
]

使用VUE

        <a href='javascript:;' ref="download" id='anchorNewApi-csv' class='btn btn-primary' data-onclick='return dataDownload(this)'>导出数据</a>


            mounted() {
                // 导出数据
                if (this.$refs['download']) this.$refs['download'].onclick = function dataDownload(e) {
                    var dom = e.currentTarget
                    var $trs = $('#datatable tr');
                    var res = ExcellentExport.convert({
                            anchor: dom,
                            format: 'xlsx',
                            filename: '活动总表' + (new Date().getTime()),
                        },
                        [
                            {
                                name: 'Sheet1',
                                from: {table: 'datatable'},
                                // filterRowFn: function (row) {
                                //     console.log(row)
                                //     return true;
                                // },
                                fixValue: function (value, row, column) {
                                    value = value.replace(/<\w+.*?>(.*?)<\/\w+>/g, "$1")
                                    return value
                                },
                                fixArray: function (data) {
                                    for (var i in data) {
                                        if (i == 0) {
                                            data[i].push('异常备注')
                                            data[i].push('了解渠道')
                                            data[i].push('定金时间')
                                            data[i].push('非活动单')
                                            continue
                                        }
                                        var $tr = $trs.eq(i), id = $tr.attr('data-id');
                                        var text = id > 0 && vm.extraContent[id] || ''
                                        var text2 = id > 0 && vm.answers[id] || ''
                                        var text3 = id > 0 && vm.djTime[id] || ''
                                        var text4 = (id > 0 && vm.isActiveArr[id] != 1) ? "是" : ''
                                        data[i].push(text)
                                        data[i].push(text2)
                                        data[i].push(text3)
                                        data[i].push(text4)
                                    }
                                    return data
                                }
                            }
                        ])
                    return res
                }
            },

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1007.html

转载时须注明出处及本声明