Question

使用TableSorter，当我在CSV文件中导出表格时，重音字符不会正确显示。

如何解决？

Answer 1

在2.16.4版中，output_encoding option已添加到输出窗口小部件中。

The demo现在有一个选择下拉列表，您可以选择“utf8 BOM”以使csv文件在Excel中正常工作。

您可以将此选项设置为默认包含BOM，如下所示：

output_encoding : 'data:text/csv;charset=utf8,%EF%BB%BF'

Answer 2

在2.30.6版本中，上面提出的解决方案对我不起作用。

我读了一篇文章，指出Unicode字符\ uFEFF应该在CSV数据的开头指定。因此，下面的代码仅将此字符插入一次，并且立即将布尔值重置为仅一次。如果您不使用小部件“ scroller”（与“ columnSelector”和“ filter”小部件相同），则不要关注scroller_ *小部件选项。

这里在Excel中显示UTF8数据，使用回调函数output_formatContent并在下面查看我的代码。

var insertBOM = true;

var $tablesorterScroll = $(".tablesorter-scroll");
$tablesorterScroll.tablesorter({
    sortInitialOrder: 'desc',
    widthFixed : false,
    showProcessing: true,
    widgets: ['filter', 'columnSelector', 'scroller', 'output'],
    widgetOptions: {
        // Set the max-height property of the table for the scroller widget.
        scroller_height : 412, // sized with table CompanyBoard statistics (fits like that without scrollbar and finishes at the end of the row)

        // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
        // every character while typing and should make searching large tables faster.
        filter_searchDelay :  200,

        // target the column selector markup
        columnSelector_container : $('#columnSelector'),
        // column status, true = display, false = hide
        // disable = do not display on list
        columnSelector_columns : {
            //0: 'disable' /* set to disabled; not allowed to unselect it */
        },
        // remember selected columns (requires $.tablesorter.storage)
        columnSelector_saveColumns: true,

        // container layout
        columnSelector_layout : '<label><input type="checkbox">{name}</label>',
        // data attribute containing column name to use in the selector container
        columnSelector_name  : 'data-selector-name',

        /* Responsive Media Query settings */
        // enable/disable mediaquery breakpoints
        columnSelector_mediaquery: false,
        // toggle checkbox name
        columnSelector_mediaqueryName: 'Auto: ',
        // breakpoints checkbox initial setting
        columnSelector_mediaqueryState: false,
        // hide columnSelector false columns while in auto mode
        columnSelector_mediaqueryHidden: false,

        // set the maximum and/or minimum number of visible columns; use null to disable
        columnSelector_maxVisible: null,
        columnSelector_minVisible: null,
        // responsive table hides columns with priority 1-6 at these breakpoints
        // see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
        // *** set to false to disable ***
        columnSelector_breakpoints : [ '20em', '30em', '40em', '50em', '60em', '70em' ],
        // data attribute containing column priority
        // duplicates how jQuery mobile uses priorities:
        // http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/
        columnSelector_priority : 'data-priority',

        // class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
        // applied icons; use this class name (input.checked) instead of input:checked
        columnSelector_cssChecked : 'checked',

        output_saveFileName : 'TableExport.csv',
        output_separator: ';', // Excel recognize it and shows data in separated column without doing "Text to columns" Excel option.
        output_replaceQuote: '\'',
        output_delivery: 'd', // (p)opup, (d)ownload
        output_saveRows: 'v', // (a)ll, (v)isible, (f)iltered, jQuery filter selector (string only) or filter function
        output_encoding: "data:text/csv;charset=utf-8",
        output_formatContent: function (config, widgetOptions, data) {
            // data.isHeader (boolean) = true if processing a header cell
            // data.$cell = jQuery object of the cell currently being processed
            // data.content = processed cell content
            //    (spaces trimmed, quotes added/replaced, etc)
            // **********
            // use data.$cell.html() to get the original cell content
            var BOM = "";
            // Add BOM at file starting
            if (insertBOM) {
                BOM = "\uFEFF"; // set Excel enconding UTF-8
                insertBOM = false;
            }

            return BOM + data.content.replace(/&amp;/g, '&'); // data.content is HTML text converted so '&' has been converted to &amp; which is the HTML reprensetation of the '&' character. Convert it back to show '&' in the CSV.
        }
    }
});

TableSorter：csv导出和重音字符

2 个答案: