suchen

Heim  >  Artikel  >  Web-Frontend  >  Codebeispiel zum Schreiben von Excel mit Front-End-JavaScript

Codebeispiel zum Schreiben von Excel mit Front-End-JavaScript

不言
不言nach vorne
2019-03-25 14:29:232777Durchsuche

Der Inhalt dieses Artikels befasst sich mit Front-End-JavaScript-Codebeispielen zum Schreiben von Excel. Ich hoffe, dass er für Freunde hilfreich ist.

Wie man Excel im Frontend schreibt, ist eigentlich relativ einfach, aber ich habe diesen Teil noch nicht angesprochen. Ich spreche hier natürlich nur von einer einfachen Einführung.
Hier sprechen wir hauptsächlich über zwei Methoden: Die eine dient der Unterstützung von Mainstream-Browsern und die andere dient der Unterstützung von IE-Browsern

Mainstream-Browser

Hier geht es hauptsächlich um die Verwendung des Datenprotokolls durch Das Datenprotokoll analysiert den Inhaltstyp von Excel (application/vnd.ms-excel)
Das Format hier ist also „Daten:+Inhaltstyp;+Inhalt“
Das Inhaltsformat von Excel hat eine Vorlage wie folgt: 

<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>

Dann erstellen Sie es einfach basierend auf der obigen Vorlage. Im Folgenden erfahren Sie, wie Sie Excel direkt exportieren

(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的内容
                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 = '测试.xls'
            aEle.click()
        }
    }
    window.Excel = Excel
})()

IE-Browser

IE wird hauptsächlich mit ActiveXObject implementiert: Siehe den Code Unten für Details 

(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) {
            // 打开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)
                // 创建一个装内容的容器
                var sel = document.body.createTextRange()
                // 将table中的内容移入容器
                sel.moveToElementText(table)
                // 选中移入的内容
                try {
                    console.log(sel.select)
                    sel.select()
                } catch (e) {
                    console.log(e)
                }
                // 复制容器中的内容
                sel.execCommand("Copy")
                // 黏贴到excel工作簿中
                oSheet.Paste()
            }
            // 关掉Excel
            var filename = oXL.Application.GetSaveAsFilename('test.xls', 'Excel Spreadsheet (*.xls),*.xls')
            // 保存工作簿
            oWB.SaveAs(filename)
            oWB.close()
            oXL.quit()
        }
    }
    window.Excel = Excel
})()

Ich habe es gerade hier gelernt. Um ein gutes Excel zu erstellen, müssen Sie die API noch tiefer verstehen

Dieser Artikel ist hier, mehr für andere spannende Inhalte. Sie können auf die Spalte JavaScript Video Tutorial auf der chinesischen PHP-Website achten!

Das obige ist der detaillierte Inhalt vonCodebeispiel zum Schreiben von Excel mit Front-End-JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript excel
Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Einführung in die implizite Typkonvertierung von Vergleichsoperatoren in JavaScript (mit Beispielen)Nächster Artikel：Einführung in die implizite Typkonvertierung von Vergleichsoperatoren in JavaScript (mit Beispielen)

In Verbindung stehende Artikel

Mehr sehen