最近項目上，需要用到將網頁上的table報表導出Excel。原先一直用,面對簡單的數結構時只要簡單的套用就能導出了，但是table結構相對復雜時，很難在組成一樣結構，要花很多時間調；這時就想到在百度上搜沒有用JS的形式來導出為EXCEL表的，找了一下果真有，而且再復雜的table表，只需簡單套用就能導出，挺好的，省心省力。下面是詳細。

1，因為是用的JQ的形式頁面上必須引用JQ庫，如

<script src="cssjs/lib/" type="text/javascript"></script>

2，還有一個相應的js也要引入? ，如

<script src="cssjs/js/" type="text/javascript"></script>

可在?原網址：https://github.com/eligrey//tree/master/dist?下載下來，其文件代碼也不多，展示如下可直接保存成來去用

/* * * A saveAs() FileSaver implementation. * * By Eli Grey, * * License : https://github.com/eligrey//blob/master/LICENSE.md (MIT) * source : http://purl.eligrey.com/github/ */// The one and only way of getting global scope in all environments // https://stackoverflow.com/q/3277182/1008999var _global = typeof window === 'object' && window.window === window? window : typeof self === 'object' && self.self === self? self : typeof global === 'object' && global.global === global? global: thisfunction bom (blob, opts) {if (typeof opts === 'undefined') opts = { autoBom: false }elseif (typeof opts !== 'object') {('Deprecated: Expected third argument to be a object')opts = { autoBom: !opts }}// prepend BOM for UTF-8 XML and text/* types (including HTML)// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BFif (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/()) {returnnew Blob([(0xFEFF), blob], { type: })}return blob }function download (url, name, opts) {var xhr = new XMLHttpRequest()('GET', url)xhr.responseType = 'blob'xhr.onload = function () {saveAs(xhr.response, name, opts)}xhr.onerror = function () {('could not download file')}() }function corsEnabled (url) {var xhr = new XMLHttpRequest()// use sync to avoid popup blocker('HEAD', url, false)try {()} catch (e) {}return xhr.status >= 200 && xhr.status <= 299 }// `()` doesn't work for all browsers (#465)function click (node) {try {(new MouseEvent('click'))} catch (e) {var evt = ('MouseEvents')('click', true, true, window, 0, 0, 0, 80,20, false, false, false, false, 0, null)(evt)} }// Detect WebView inside a native macOS app by ruling out all browsers // We just need to check for 'Safari' because all other browsers (besides Firefox) include that too // https://www.whatismybrowser.com/guides/the-latest-user-agent/macosvar isMacOSWebView = /Macintosh/.test() && /AppleWebKit/.test() && !/Safari/.test()var saveAs = || (// probably in some web worker(typeof window !== 'object' || window !== _global)? function saveAs () { /* noop */ }// Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView: ('download' in HTMLAnchorElement.prototype && !isMacOSWebView)? function saveAs (blob, name, opts) {var URL = _global.URL || _global.webkitURLvar a = ('a')name = name || blob.name || 'download'a.download = namea.rel = 'noopener' // tabnabbing// TODO: detect chrome extensions & packaged apps// a.target = '_blank'if (typeof blob === 'string') {// Support regular links= blobif ( !== ) {corsEnabled()? download(blob, name, opts): click(a, a.target = '_blank')} else {click(a)}} else {// Support blobs= URL.createObjectURL(blob)setTimeout(function () { () }, 4E4) // 40ssetTimeout(function () { click(a) }, 0)}}// Use msSaveOrOpenBlob as a second approach: 'msSaveOrOpenBlob' in navigator? function saveAs (blob, name, opts) {name = name || blob.name || 'download'if (typeof blob === 'string') {if (corsEnabled(blob)) {download(blob, name, opts)} else {var a = ('a')= bloba.target = '_blank'setTimeout(function () { click(a) })}} else {(bom(blob, opts), name)}}// Fallback to using FileReader and a popup: function saveAs (blob, name, opts, popup) {// Open a popup immediately do go around popup blocker// Mostly only available on user interaction and the fileReader is async so...popup = popup || open('', '_blank')if (popup) {popup.document.title =popup.document.body.innerText = 'downloading...'}if (typeof blob === 'string') return download(blob, name, opts)var force = === 'application/octet-stream'var isSafari = /constructor/() || _global.safarivar isChromeIOS = /CriOS\/[\d]+/.test()if ((isChromeIOS || (force && isSafari) || isMacOSWebView) && typeof FileReader !== 'undefined') {// Safari doesn't allow downloading of blob URLsvar reader = new FileReader()reader.onloadend = function () {var url = reader.resulturl = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')if (popup) popup.location.href = urlelse location = urlpopup = null// reverse-tabnabbing #460 }(blob)} else {var URL = _global.URL || _global.webkitURLvar url = URL.createObjectURL(blob)if (popup) popup.location = urlelse location.href = urlpopup = null// reverse-tabnabbing #460setTimeout(function () { (url) }, 4E4) // 40s }} )= saveAs.saveAs = saveAsif (typeof module !== 'undefined') {module.exports = saveAs; }

3，前端頁面底部放入如下js代碼 即可成功 導出excel表

<script>var template =' <style type="text/css">'+'table {'+' font-family: verdana,arial,sans-serif;'+' font-size:14px;'+' color:#333333;'+'}'+'table th {'+' padding: 8px;'+' width: 60px;'+' height: 30px;'+' color: #ffffff;'+' background-color: #009688;'+'}'+'table td {'+' width: 60px;'+' height: 30px;'+' padding: 8px;'+' text-align: center;'+'}'+''+'.td_class_0{'+' background-color: #ffffff;'+'}'+''+'.td_class_1{'+' background-color: #f1f5fa;'+'}'+'</style>'; </script><script>function tableToExcel(tableid, sheetName, template, fileName) {if (!) tableid = (tableid);var html ="<html xmlns:x=\"urn:schemas-microsoft-com:office:excel\">\n"+" <head>\n"+" <!--[if gte mso 9]><xml>\n"+" <x:ExcelWorkbook>\n"+" <x:ExcelWorksheets>\n"+" <x:ExcelWorksheet>\n"+" <x:Name>"+ sheetName +"</x:Name>\n"+" <x:WorksheetOptions>\n"+" <x:Print>\n"+" <x:ValidPrinterInfo />\n"+" </x:Print>\n"+" </x:WorksheetOptions>\n"+" </x:ExcelWorksheet>\n"+" </x:ExcelWorksheets>\n"+" </x:ExcelWorkbook>\n"+" </xml>\n"+" <![endif]-->\n"+ template +" </head>"+"<body>"+ tableid.outerHTML +"</body></html>";var blob =new Blob([html], {type: "text/plain;charset=utf-8"});saveAs(blob, fileName); } </script><script>//調用tableToExcel('網頁上tabel的ID名', 'excel表格的sheet名', template, 'excel表格名.xlsx'); </script>

　　END

總結

以上是生活随笔為你收集整理的html table导出excel 插入图片_前端 Table 用 JS 导出EXCEL(支持大量数据，保留报表格式) - pensive2019...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。