前端JavaScript如何寫(xiě)Excel

發(fā)布時(shí)間：2020-12-02 13:33:03 來(lái)源：億速云閱讀：411 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下前端JavaScript如何寫(xiě)Excel，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

前端如何才能寫(xiě)excel，其實(shí)也是比較簡(jiǎn)單的，只是沒(méi)有接觸這一塊，當(dāng)然這邊講的只是簡(jiǎn)單的入門(mén)。
這邊主要講述2種方式，一種是支持主流瀏覽器，一種是支持Ie瀏覽器

主流瀏覽器

這邊主要是使用data協(xié)議，通過(guò)data協(xié)議解析excel的Contenttype（application/vnd.ms-excel）
所以這邊格式就是 ‘data:+Content-type;+內(nèi)容’
excel的內(nèi)容格式是有模版的如下：

<html 
    xmlns:o="urn:schemas-microsoft-com:office:office" 
    xmlns:x="urn:schemas-microsoft-com:office:excel" 
    xmlns="http://www.w3.org/TR/REC-html40">
    <head>
        <meta charset="UTF-8"><!--[if gte mso 9]>
        <xml>
            <x:ExcelWorkbook>
                <x:ExcelWorksheets>
                    <x:ExcelWorksheet>
                        <x:Name>sheet</x:Name>
                        <x:WorksheetOptions>
                            <x:DisplayGridlines/>
                        </x:WorksheetOptions>
                    </x:ExcelWorksheet>
                </x:ExcelWorksheets>
            </x:ExcelWorkbook></xml>
    </head>
    <body>
        {tableData}
    </body>
</html>

然后就是就是根據(jù)上述模板進(jìn)行創(chuàng)建即可,以下就是通過(guò)這種方式直接導(dǎo)出excel

(function() {
    var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>sheet</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>{tableData}</body></html>'
    var Excel_URL = 'data:application/vnd.ms-excel;base64,'
    var Excel = {
        ToExcel: function (data) {
            var isIe = window.navigator.userAgent.toLocaleUpperCase().indexOf('trident')
            if (isIe !== -1) {
                this._IEExport(data)
            } else {
                this._otherExport(data)
            }
        },
        _otherExport: function (data) {
            var content = ''
            if (typeof data === 'string') {
                // 傳入id，獲取table的內(nèi)容
                var ele = document.querySelector(data)
                content = template.replace('{tableData}', ele.outerHTML)
            } // else可以做更多操作
            var aEle = document.createElement('a')
            aEle.href = Excel_URL + window.btoa(unescape(encodeURIComponent(content)))
            aEle.download = '測(cè)試.xls'
            aEle.click()
        }
    }
    window.Excel = Excel
})()

IE瀏覽器

IE下主要就是使用ActiveXObject來(lái)實(shí)現(xiàn)的：具體見(jiàn)如下代碼

(function() {
    var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>sheet</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>{tableData}</body></html>'
    var Excel_URL = 'data:application/vnd.ms-excel;base64,'
    var Excel = {
        ToExcel: function (data) {
            var isIe = window.navigator.userAgent.toLocaleUpperCase().indexOf('trident')
            if (isIe !== -1) {
                this._IEExport(data)
            } else {
                this._otherExport(data)
            }
        },
        _IEExport: function (data) {
            // 打開(kāi)excel
            var oXL = new ActiveXObject('Excel:Application')
            // 新建工作博
            var oWB = oXL.WorkBooks.Add()
            // 激活新建工作博
            var oSheet = oWB.ActiveSheet

            if (typeof data === 'string') {
                // table id
                var table = document.querySelector(data)
                // 創(chuàng)建一個(gè)裝內(nèi)容的容器
                var sel = document.body.createTextRange()
                // 將table中的內(nèi)容移入容器
                sel.moveToElementText(table)
                // 選中移入的內(nèi)容
                try {
                    console.log(sel.select)
                    sel.select()
                } catch (e) {
                    console.log(e)
                }
                // 復(fù)制容器中的內(nèi)容
                sel.execCommand("Copy")
                // 黏貼到excel工作簿中
                oSheet.Paste()
            }
            // 關(guān)掉Excel
            var filename = oXL.Application.GetSaveAsFilename('test.xls', 'Excel Spreadsheet (*.xls),*.xls')
            // 保存工作簿
            oWB.SaveAs(filename)
            oWB.close()
            oXL.quit()
        }
    }
    window.Excel = Excel
})()

看完了這篇文章，相信你對(duì)前端JavaScript如何寫(xiě)Excel有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

前端JavaScript如何寫(xiě)Excel

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽