프런트 엔드 JavaScript를 사용하여 Excel을 작성하기 위한 코드 예제-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

프런트 엔드 JavaScript를 사용하여 Excel을 작성하기 위한 코드 예제

不言

Mar 25, 2019 pm 02:29 PM

excel html javascript table

이 기사의 내용은 프런트엔드 JavaScript에서 Excel을 작성하기 위한 코드 예제에 관한 것입니다. 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

프론트엔드에서 엑셀을 작성하는 방법은 사실 비교적 간단하지만, 아직 이 부분은 건드리지 않았습니다. 물론 여기서 말씀드리는 것은 단지 간단한 소개에 불과합니다.
여기서 우리는 주로 두 가지 방법에 대해 이야기합니다. 하나는 메인스트림 브라우저를 지원하는 것이고, 다른 하나는 Ie 브라우저를 지원하는 것입니다

메인스트림 브라우저

여기에서는 주로 데이터 프로토콜을 사용하고 Excel의 콘텐츠 유형(application/vnd)을 구문 분석하는 것입니다. 데이터 프로토콜 .ms-excel을 통해)
여기서 형식은 'data:+Content-type;+content'입니다.
Excel의 콘텐츠 형식에는 다음과 같은 템플릿이 있습니다.

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

로그인 후 복사

그런 다음 위 템플릿에 따라 생성하세요. , 다음이 전달됩니다. 이 방법은 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
})()

로그인 후 복사

IE 브라우저

주로 IE에서 ActiveXObject를 사용하여 구현됩니다. 자세한 내용은 다음 코드를 참조하세요.

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

로그인 후 복사

여기서 방금 배웠습니다. Excel을 잘 만들려면 여전히 필요합니다. API를 더 깊이 이해하세요. 좋아요

이 기사는 여기까지입니다. 더 많은 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Video Tutorial 칼럼을 참조하세요.

위 내용은 프런트 엔드 JavaScript를 사용하여 Excel을 작성하기 위한 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.