用js實現導出功能將html中的table導出為excel

来源:https://www.cnblogs.com/rey888/archive/2018/03/29/8670152.html
-Advertisement-
Play Games

/** * 描述:導出表格對應的excel文件 * 時間:2018-03-29 * 作者:任恩遠 * 調用示例: * onclick = "tableToExcel(tableId,fileName)" */ /** * 描述:導出表格對應的excel文件 * 時間:2018-03-29 * 作者: ...


/**
* 描述:導出表格對應的excel文件
* 時間:2018-03-29
* 作者:任恩遠
* 調用示例:
* onclick = "tableToExcel(tableId,fileName)"
*/
/**
* 描述:導出表格對應的excel文件
* 時間:2018-03-29
* 作者:任恩遠
* 調用示例:
* onclick = "tableToExcel(tableId,fileName)"
*/
var tableToExcel = (function() {
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]-->'+
' <style type="text/css">'+
'.excelTable {'+
'border-collapse:collapse;'+
' border:thin solid #999; '+
'}'+
' .excelTable th {'+
' border: thin solid #999;'+
' padding:20px;'+
' text-align: center;'+
' border-top: thin solid #999;'+
' '+
' }'+
' .excelTable td{'+
' border:thin solid #999;'+
' padding:2px 5px;'+
' text-align: center;'+
' }</style>'+'</head><body><table border="1">{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]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
var downloadLink = document.createElement("a");
downloadLink.href = uri + base64(format(template, ctx));
downloadLink.download = name+".xls";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
})()


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*標簽名查找,名稱相同,格式相同*/ span{ color: coral; } /*id名查找,名稱不可重覆*/ ...
  • <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*固定在頁面某一位置*/ #a{ width: 20px; height: 20px; background-co ...
  • 2月,Github上第二受歡迎的項目是Flutter。Flutter的第一個測試版本是作為2018年世界移動通信大會的一部分而開始的。 Flutter是一款移動UI框架,旨在幫助開發人員在iOS和Android上創建高質量的原生界面。Flutter是免費和開源的,就像Android SDK一樣,並且 ...
  • <form.../>中method屬性指定了該表單是以哪種方式提交請求,有兩種方式:GET請求方式和POST請求方式,預設是GET請求方式。兩種方式的區別:get方式的請求是在瀏覽器地址欄中輸入訪問地址所發送的請求,即他是通過地址欄傳輸的。在地址欄中可以看到請求參數名和值。且get參數有長度限制,傳 ...
  • 寫在最前面:這篇博文是2篇文章組成,詳細介紹了Angularjs中的緩存以及緩存清理,文章由上海尚學堂轉載過來,歡迎大家閱讀和評論。轉載請註明出處,謝謝! 一個緩存就是一個組件,它可以透明地儲存數據,以便以後可以更快地服務於請求。多次重覆地獲取資源可能會導致數據重覆,消耗時間。因此緩存適用於變化性不 ...
  • 因為好長時間的懶惰和懈怠,好久沒有更新文章了,從現在開始我會按時更新一些自己總結的一些知識,和研究的東西,希望能讓大家從我這裡學到一點點的知識。 本文參考了張榮銘的javascript設計模式一書,算是自己對看了文章的總結吧,如果你想學習設計模式,可以去購買一本,學習一下,寫的非常好。 javaSc ...
  • 1 2 3 4 5 AV 6 7 8 9 註意:audio標簽設置controls="controls"才可以再頁面中顯示 10 IE9開始支持 11 12 13 不支持audio 14 ... ...
  • 參考:http://www.jb51.net/article/117191.htm 侵刪 css 部分 js 部分 調用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...