web導出excel那些坑

時間 2019-11-11

標籤 web 導出 excel 那些欄目 HTML 简体版

原文原文鏈接

背景介紹

昨天在一個前端的微信公衆號看到一篇文章介紹導出cvs文件的,想一想以前作導出excel的踩過的坑,心想記錄一下,或許能夠幫助別人吧!
需求很簡單,在某個報表頁面須要把table導出excel.html

尋找解決方案

方案一

首先想到的上github尋找解決方案,經過關鍵詞的搜索找到了
tableExport.jquery.plugin
功能全面有以下功能:前端

table2JSONnode
table2XMLjquery
table2PNGgit
table2CSVgithub
table2Excel微信
table2Wordapp
table2Powerpoint.net
table2txtexcel
table2PDF
用法在github上也有詳細的描述.
不過在使用過程當中又utf8字符支持問題見issue6 答案中也有解決方案

方案二

根據JSFiddle 修改以下方法,此方法只支持導出excel tableId是須要導出的table的id

var tableToExcel = function(tableId, name) {
                    var uri = 'data:application/vnd.ms-excel;base64,'
                        , 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><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
                        , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
                        , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
                    if (!table.nodeType) table = document.getElementById(table)
                    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
                    window.location.href = uri + base64(format(template, ctx))
                }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。