使用javascript生成Excel表格(內(nèi)含實例demo),可下載xlsx.core.min.js冒窍、excel.js包

分享一個我的小demo:GuitHub ExcelDownload 實例下載(布局簡陋递沪,隨便看看就行),喜歡就給個star综液,哈哈

一款慨、生成excel表格的原理

打蛇打七寸,擒賊先擒王谬莹。通過標題就可以知道檩奠,想要通過js生成excel表格桩了,首先就要繪制表格
在這里埠戳,可以利用Html中的<table>標簽來繪制我們所需要的excel表格樣式布局井誉。

 <table id="tb" border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</td>
                        <th>年齡</td>
                            <th>座右銘</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>張三</td>
                    <td>18</td>
                    <td>走的人多了,變成了路乞而。</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>88</td>
                    <td>人人都有自己走的路送悔,哪條屬于自己呢?</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>81</td>
                    <td>走別人的路爪模,讓他沒道可走欠啤!</td>
                </tr>
            </tbody>
        </table>
table 布局如圖

二、借助第三方excel相關(guān)的js插件進行處理

這里首先推薦使用 excel.js 包(可在github上下載js包)屋灌,利用js包生成 Blob 對象和 URL.createObjectURL() 這個方法進行后續(xù)操作洁段。

  • Blob 對象表示不可變的類似文件對象的原始數(shù)據(jù)。Blob表示不一定是JavaScript原生形式的數(shù)據(jù)共郭。 File 接口基于Blob祠丝,繼承了 blob的功能并將其擴展使其支持用戶系統(tǒng)上的文件。
function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; // 生成excel的配置項

    var wopts = {
        bookType: 'xlsx', // 要生成的文件類型
        bookSST: false, // 是否生成Shared String Table除嘹,官方解釋是写半,如果開啟生成速度會下降,但在低版本IOS設(shè)備上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }); // 字符串轉(zhuǎn)ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}
  • URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString尉咕,其中包含一個表示參數(shù)中給出的對象的URL叠蝇。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象年缎。

三悔捶、獲取table內(nèi)容,生成xls格式的字符串

var table = document.querySelector("#tb");
var sheet = XLSX.utils.table_to_sheet(table); //將一個table對象轉(zhuǎn)換成一個sheet對象

最后通過點擊事件即可下載单芜!

function btn_export() {
            var table = document.querySelector("#tb");
            var sheet = XLSX.utils.table_to_sheet(table); //將一個table對象轉(zhuǎn)換成一個sheet對象
            openDownloadDialog(sheet2blob(sheet), 'excel.xlsx');//文件名稱
        }
實例截圖

打開后的內(nèi)容

這個小demo是在完成公司項目時經(jīng)歷的蜕该,其中有個需求就是涉及到excel表格的下載,也在網(wǎng)上看了很多案例和文檔完成的洲鸠,畢竟眾人拾柴火焰高嘛堂淡。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市扒腕,隨后出現(xiàn)的幾起案子绢淀,更是在濱河造成了極大的恐慌,老刑警劉巖袜匿,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異稚疹,居然都是意外死亡居灯,警方通過查閱死者的電腦和手機祭务,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來怪嫌,“玉大人义锥,你說我怎么就攤上這事⊙颐穑” “怎么了拌倍?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長噪径。 經(jīng)常有香客問我柱恤,道長,這世上最難降的妖魔是什么找爱? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任梗顺,我火速辦了婚禮,結(jié)果婚禮上车摄,老公的妹妹穿的比我還像新娘寺谤。我一直安慰自己,他們只是感情好吮播,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布变屁。 她就那樣靜靜地躺著,像睡著了一般意狠。 火紅的嫁衣襯著肌膚如雪粟关。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天摄职,我揣著相機與錄音誊役,去河邊找鬼。 笑死谷市,一個胖子當著我的面吹牛蛔垢,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播迫悠,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼鹏漆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了创泄?” 一聲冷哼從身側(cè)響起艺玲,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎鞠抑,沒想到半個月后饭聚,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡搁拙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年秒梳,在試婚紗的時候發(fā)現(xiàn)自己被綠了法绵。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡酪碘,死狀恐怖朋譬,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情兴垦,我是刑警寧澤徙赢,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站探越,受9級特大地震影響狡赐,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扶关,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一阴汇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧节槐,春花似錦搀庶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至揍庄,卻和暖如春咆蒿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蚂子。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工沃测, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人食茎。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓蒂破,卻偏偏與公主長得像,于是被迫代替她去往敵國和親别渔。 傳聞我的和親對象是個殘疾皇子附迷,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容