JS前端html table 輸出CSV

JS前端html table 輸出CSV

網路找到的sample  ...https://jsfiddle.net/milienchen/7exv6z7n/3/
不過因為是利用jquery pluging,所以它的寫法是利用jquery pluging物件去apply~

在下比較不喜歡這種寫法,喵喵我比較喜歡獨立的global function 變數
因為這個html table export csv的需求不是每個view page都需要
如果加在大家都共用的jquery上怕影響了別的部份會讓人難以debug js

所以我稍微改寫成global function


//參數說明  this_(onclick的對象), $table(jquery找的html_talbe), filename(欲在前端輸出的檔名)

function exportTableToCSV(this_,$table, filename) {
        if ($table.find('tr:has(td)') == false) { alert('請先搜尋XX資料.'); return ;}
        var $rows = $table.find('tr:has(td)'),

            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character

            // actual delimiter characters for CSV format
            colDelim = '","',
            rowDelim = '"\r\n"',

            // Grab text from table into CSV formatted string
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),
                    $cols = $row.find('td');

                return $cols.map(function (j, col) {
                    var $col = $(col),
                        text = $col.text();

                    return text.replace(/"/g, '""'); // escape double quotes

                }).get().join(tmpColDelim);

            }).get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim) + '"';

        $(this_)
            .attr({
                'download': filename,
                'href': 'data:application/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv),
                'target': '_blank'
            });
    }

初期時try可以正常下載js export 的csv檔並在client端用excel開啟
但是遇到一個問題是說,excel在讀取utf-8的中文資料時,csv內容前需要加一個utf-8的dom header,來告知excel說~哦,這是一個utf-8的檔案哦~這樣,要不然excel會給你用ansii去開啟csv,就會看到好像亂碼似的不正確編碼內容

這個dom header,我吃過不少它的虧(都是MS微軟搞出來的簍子...)有時需要一些特別的文字編輯器才能正確的讀寫文字檔,尤其是在跨平台的部份

後來在http://stackoverflow.com/questions/19492846/javascript-to-csv-export-encoding-issue
這裡找到解答,加入utf-8 bom header:  %EF%BB%BF

bingo!  你正確的下載了html table 成csv檔案了嗎?