Code example for writing Excel using front-end JavaScript-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Code example for writing Excel using front-end JavaScript

不言

Mar 25, 2019 pm 02:29 PM

excel html javascript table

The content of this article is about code examples for writing Excel in front-end JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to write excel on the front end is actually relatively simple, but I haven’t touched this part. Of course, what I’m talking about here is just a simple introduction.
Here we mainly talk about two methods, one is to support mainstream browsers, and the other is to support Ie browser

Mainstream browsers

Here we mainly use the data protocol, through The data protocol parses the Contenttype of excel (application/vnd.ms-excel)
So the format here is 'data: Content-type; content'
The content format of excel has a template as follows:

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

Copy after login

Then just create it based on the above template. The following is how to directly export 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
})()

Copy after login

IE browser

It is mainly implemented using ActiveXObject under IE: see for details The following code

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

Copy after login

I have just learned here. To make a good excel, you still need to have a deeper understanding of the API.

This article has ended here, and there are more exciting things. For content, you can pay attention to the JavaScript Video Tutorial column on the PHP Chinese website!

The above is the detailed content of Code example for writing Excel using front-end JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn