解决JS Datatables导出CSV/Excel时无法捕获图标对应链接的问题

你可以通过以下两种方式让Datatable导出时正确捕获图标对应的链接：

方法一：给目标列单独配置渲染规则 #

初始化Datatable时，针对包含Instagram图标的列，自定义导出场景下的返回内容：

$(document).ready(function() {
    $('#your-table').DataTable({
        dom: 'Bfrtip',
        buttons: ['csv', 'excel', 'print'],
        columns: [
            null, // 对应Name列
            null, // 对应Email列
            {
                render: function(data, type, row) {
                    // 仅在导出/打印时返回链接地址
                    if (type === 'export' || type === 'print') {
                        const linkHref = $(data).find('a').attr('href');
                        // 也可以改成更友好的格式，比如 "Instagram: " + linkHref
                        return linkHref || '';
                    }
                    // 页面显示时保留原始图标
                    return data;
                }
            }
        ]
    });
});

方法二：全局统一处理所有导出内容 #

如果表格里有多个类似的图标链接列，可通过exportOptions的格式化函数批量处理：

$(document).ready(function() {
    $('#your-table').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'csv',
                exportOptions: {
                    format: {
                        body: function(data) {
                            const $cell = $(data);
                            const $instagramLink = $cell.find('a:has(i.fas.fa-instagram)');
                            if ($instagramLink.length) {
                                return $instagramLink.attr('href');
                            }
                            return data;
                        }
                    }
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    format: {
                        body: function(data) {
                            const $cell = $(data);
                            const $instagramLink = $cell.find('a:has(i.fas.fa-instagram)');
                            if ($instagramLink.length) {
                                return $instagramLink.attr('href');
                            }
                            return data;
                        }
                    }
                }
            },
            'print'
        ]
    });
});

注意事项 #

• 把代码里的#your-table替换成你实际的表格ID。
• 要是想让导出的内容更易读，比如显示Instagram: https://instagram.com/sammy，直接把返回值改成"Instagram: " + $instagramLink.attr('href')就行。
• 确保你已经正确引入了Datatable Buttons扩展的相关文件（比如buttons.html5.min.js、buttons.print.min.js等），不然导出功能没法正常工作。

内容的提问来源于stack exchange，提问作者samezedi