Exemple de code pour écrire Excel à l'aide de JavaScript frontal-js tutoriel-php.cn

Exemple de code pour écrire Excel à l'aide de JavaScript frontal

不言

Libérer： 2019-03-25 14:29:23

avant

2819 Les gens l'ont consulté

Le contenu de cet article concerne des exemples de code JavaScript frontal pour écrire Excel. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Comment écrire Excel sur le front-end est en fait relativement simple, mais je n'ai pas encore touché à cette partie. Bien sûr, ce dont je parle ici n'est qu'une simple introduction.
Ici, nous parlons principalement de 2 méthodes, l'une consiste à prendre en charge les navigateurs grand public et l'autre est à prendre en charge le navigateur Ie

Navigateurs grand public

Ici, il s'agit principalement d'utiliser le protocole de données, via Le protocole de données analyse le type de contenu d'Excel (application/vnd.ms-excel)
Le format ici est donc 'data:+Content-type;+content'
Le format de contenu d'Excel a un modèle comme suit :

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

Copier après la connexion

Ensuite, créez-le simplement en fonction du modèle ci-dessus. Voici comment exporter directement 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的内容
                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
})()

Copier après la connexion

Navigateur IE

ActiveXObject est principalement utilisé sous IE. Pour y parvenir : Voir le code suivant pour plus de détails

(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
})()

Copier après la connexion

Je viens de l'apprendre ici Pour faire un bon Excel, vous devez encore comprendre plus profondément l'API

Cet article se termine ici. C'est fini. Pour d'autres contenus passionnants, vous pouvez prêter attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!