2. 程式人生 > >純前臺js json匯出到excel，不與後臺互動

純前臺js json匯出到excel，不與後臺互動

阿新 • • 發佈：2019-01-22

上程式碼

[javascript] view plain copy
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  4.     <script type="text/javascript" src="jquery.min.js"></script>  
  5.     <script type="text/javascript">  
  6.         $(document).ready(function(){  
  7.             $('#wwo').click(function(){  
  8.                 var data = {"title":[{"value":"集團", "type":"ROW_HEADER_HEADER", "datatype":"string"}, {"value":"日期", "type":"ROW_HEADER_HEADER", "datatype":"string"}],"data":[[{"value":"好好", "type":"ROW_HEADER"}, {"value":"2015-08-24", "type":"ROW_HEADER"}]]};  
  9.                 if(data == '')  
  10.                     return;  
  11.                 JSONToExcelConvertor(data.data, "Report", data.title);  
  12.             });  
  13.         });  
  14.         function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {  
  15.             //先轉化json
  16.             var arrData = typeof JSONData != 'object'
     ? JSON.parse(JSONData) : JSONData;  
  17.             var excel = '<table>';      
  18.             //設定表頭
  19.             var row = "<tr>";  
  20.             for (var i = 0, l = ShowLabel.length; i < l; i++) {  
  21.                 row += "<td>" + ShowLabel[i].value + '</td>';  
  22.             }  
  23.             //換行
  24.             excel += row + "</tr>";  
  25.             //設定資料
  26.             for (var i = 0; i < arrData.length; i++) {  
  27.                 var row = "<tr>";  
  28.                 for (var index in arrData[i]) {  
  29.                     var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;  
  30.                     row += '<td>' + value + '</td>';  
  31.                 }  
  32.                 excel += row + "</tr>";  
  33.             }  
  34.             excel += "</table>";  
  35.             var excelFile = "<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'>";  
  36.             excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';  
  37.             excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';  
  38.             excelFile += '; charset=UTF-8">';  
  39.             excelFile += "<head>";  
  40.             excelFile += "<!--[if gte mso 9]>";  
  41.             excelFile += "<xml>";  
  42.             excelFile += "<x:ExcelWorkbook>";  
  43.             excelFile += "<x:ExcelWorksheets>";  
  44.             excelFile += "<x:ExcelWorksheet>";  
  45.             excelFile += "<x:Name>";  
  46.             excelFile += "{worksheet}";  
  47.             excelFile += "</x:Name>";  
  48.             excelFile += "<x:WorksheetOptions>";  
  49.             excelFile += "<x:DisplayGridlines/>";  
  50.             excelFile += "</x:WorksheetOptions>";  
  51.             excelFile += "</x:ExcelWorksheet>";  
  52.             excelFile += "</x:ExcelWorksheets>";  
  53.             excelFile += "</x:ExcelWorkbook>";  
  54.             excelFile += "</xml>";  
  55.             excelFile += "<![endif]-->";  
  56.             excelFile += "</head>";  
  57.             excelFile += "<body>";  
  58.             excelFile += excel;  
  59.             excelFile += "</body>";  
  60.             excelFile += "</html>";  
  61.             var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);  
  62.             var link = document.createElement("a");      
  63.             link.href = uri;  
  64.             link.style = "visibility:hidden";  
  65.             link.download = FileName + ".xls";  
  66.             document.body.appendChild(link);  
  67.             link.click();  
  68.             document.body.removeChild(link);  
  69.         }  
  70.     </script>  
  71. </head>  
  72. <body>  
  73.     <input type="button" id="wwo" value="匯出" />  
  74. </body>  
  75. </html>  

附件是tableExport程式碼

http://download.csdn.net/detail/a410147597/9052583

相關推薦

純前臺js json匯出到excel，不與後臺互動

上程式碼 [javascript] view plain copy <html>  <head>      <meta http-equiv="content-type" content="text/html; charset=utf

純前臺js json匯出到excel，不與後臺互動

<html>   <head>       <meta http-equiv="content-type" content="text/html; charset=utf-8">       <script type="text/

優化poi 匯入匯出excel，不造成電腦卡死問題

其實生活中不乏很多需要從資料庫向excel匯入資料的情況，但是如果資料庫的東西很多且欄位很長，會造成卡宕機的狀態。 那麼如何解決這個一問題呢，其實網路上有一門技術叫做poi，官方介紹是： Apache POI是Apache軟體基金會的開放原始碼函式庫，POI提供

js 實現純前端將資料匯出excel兩種方式，親測有效

由於專案需要，需要在不呼叫後臺介面的情況下，將json資料匯出到excel表格，參考了好多資料以及很多大佬寫的部落格終於實現，相容chrome沒問題，其他還沒有測試過，這邊介紹兩種實現方式，並附上程式碼和gif動圖，博主不才還望輕噴方法一將table標籤，包括tr、td等對j

js匯出Excel，保留table樣式

正好用到就隨手搜了一個，儲存下來用到可以看看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl

JS匯出Excel，相容IE，且保留樣式

var tableHtml='<html><head><meta charset="UTF-8"></head><body>'; tableHtml += lHtml; tableHtml += '

js 實現純前端將資料匯出excel。chome瀏覽器 親測有效。

有了新的需求 所以就瞭解下怎麼用js 直接匯出excel文件。 html程式碼 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

bootstrap匯出excel，科學計數法BUG，export.js

匯出excel後身份證或者數字很長的情況加excel會改寫成科學計數法 新增 style樣式並沒有解決問題的原因是原始碼裡面有個錯誤 這裡要修改 export.js原始碼 找到 excel 操作 在這裡判斷是否新增 mos-number-format:"\@"

ajax不可以用來做poi的瀏覽器匯出excel，可以用springMvc、strust2和servlet

<script>    function exportExcel(){         location.href="excel/export";         <!--這裡不能用

js前臺控制select二級聯動，不是用Ajax對資料庫的時時查詢

最近做專案要用到二級連動，索性寫了小例子。大致分為兩種情況，一種是select選單是固定的，如省份與市區的連動。還有一種是select選單不是固定的，要按資料庫生成selec。 先以第一種為例。首先是頁面載入前先載入一個數組供select呼叫。 var selectToo

js資料匯出excel

<html> <meta charset="utf-8"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <scrip

java：匯出excel，瀏覽器下載

ExcelUtil類 import com.xjl.student.model.Person; import org.apache.commons.lang.time.DateFormatUtils; import org.apache.poi.hssf.use

Spring Boot實戰之匯出excel，並上傳存入Azure Storage

Spring Boot實戰之匯出excel 本文使用Apache POI實現excel文件的匯出。 實現從資料庫讀取資料——生成excel——上傳到AzureStorage的流程 資料庫操作，及檔案上傳AzureStorage的流程可以參考之前的文章 http://blog

js前端匯出excel表格

執行環境必備要求：excel軟體、IE瀏覽器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <ti

Jquery將div匯出EXCEL，支援多表頭

1:需要檔案：jquery.table2excel.js  和Jquery檔案 jquery.table2excel.js下載地址：https://github.com/rainabba/jquery-table2excel/tree/master/dist2：使用：$(""

SpringBoot 匯出excel，瀏覽器下載

1、新增Dependency <dependency>     <groupId>cn.afterturn</groupId>     <artifactId>easypoi-base&l

js 中匯出excel 較長數字串會變為科學計數法

- js 中匯出excel 較長數字串會變成科學計數法在做專案中，碰到如題的問題。比如要將居民的資訊匯出到excel中，居民的身份證號碼因為長度過長（大於10位），excel會自動的將過長的數字串轉換成 科學計數法。現在網上找到解決方案之一： （在數字串前後加 " "

HSSFWorkbook——匯出excel，動態合併單元格

一 前言 開發中，對於匯出一個excel表格這樣的功能很常見，這裡談談我所知道的相關知識 二 需求  匯出某個套餐所關聯的所有專案的一個Excel表格 三 HSSFWorkbook //建立一個Excel檔案 HSSFWorkbook&

NPOI匯出excel，插入圖片

//add picture data to this workbook. byte[] bytes = System.IO.File.ReadAllBytes(@"D:\MyProject\NPOIDemo\ShapeImage\image1.jpg"); int pi

PHP匯出Excel，親測有用

最近有個專案需要匯出Excel表的功能，上網查了，發現有挺多缺陷的，有些太久遠的了，phpExcel檔案都無法下載，官網都遷移到github上了 第一步 去github下載phpexcel 下載地址 裡面有他的例子和類，其實最主要的就是把裡面的Class