forked from sheetjs/sheetjs
		
	
		
			
				
	
	
		
			709 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			709 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| 
 | |
| <!DOCTYPE html>
 | |
| <!-- (C) 2013-present  SheetJS http://sheetjs.com -->
 | |
| <!-- vim: set ts=2: -->
 | |
| <html>
 | |
| <head>
 | |
|   <title>SheetJS JS-XLSX In-Browser HTML Table Export Demo</title>
 | |
|   <style>
 | |
|     .xport, .btn {
 | |
|       display: inline;
 | |
|       text-align:center;
 | |
|     }
 | |
|     a { text-decoration: none }
 | |
| 
 | |
|     .button {
 | |
|       padding: 20px;
 | |
|       border-radius: 10px;
 | |
|       background-color:#9b6;
 | |
|       display: block;
 | |
|       width: 200px;
 | |
|     }
 | |
|   </style>
 | |
| </head>
 | |
| <body>
 | |
| <!-- SheetJS js-xlsx library -->
 | |
| <script type="text/javascript" src="http://rawgit.com/protobi/js-xlsx/master/shim.js"></script>
 | |
| <script type="text/javascript" src="http://rawgit.com/protobi/js-xlsx/master/dist/xlsx.full.min.js"></script>
 | |
| 
 | |
| <!-- FileSaver.js is the library of choice for Chrome -->
 | |
| <script type="text/javascript" src="http://rawgit.com/eligrey/Blob.js/master/Blob.js"></script>
 | |
| <script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
 | |
| 
 | |
| <!-- FileSaver doesn't work in older IE and newer Safari; Downloadify is the flash fallback -->
 | |
| <script type="text/javascript" src="http://sheetjs.com/demos/swfobject.js"></script>
 | |
| <script type="text/javascript" src="http://sheetjs.com/demos/downloadify.min.js"></script>
 | |
| <script type="text/javascript" src="http://sheetjs.com/demos/base64.min.js"></script>
 | |
| 
 | |
| <script type="text/javascript">
 | |
|   function export_table_to_excel() {
 | |
|     var wb = {
 | |
|       "SheetNames": [
 | |
|         "Main"
 | |
|       ],
 | |
|       "Sheets": {
 | |
|         "Main": {
 | |
|           "!merges": [
 | |
|             {
 | |
|               "s": {
 | |
|                 "c": 0,
 | |
|                 "r": 0
 | |
|               },
 | |
|               "e": {
 | |
|                 "c": 2,
 | |
|                 "r": 1
 | |
|               }
 | |
|             }
 | |
|           ],
 | |
|           "A1": {
 | |
|             "v": "This is a submerged cell",
 | |
|             "s": {
 | |
|               "border": {
 | |
|                 "left": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "top": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "bottom": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "B1": {
 | |
|             "v": "Pirate ship",
 | |
|             "s": {
 | |
|               "border": {
 | |
|                 "top": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "bottom": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "C1": {
 | |
|             "v": "Sunken treasure",
 | |
|             "s": {
 | |
|               "border": {
 | |
|                 "right": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "top": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "bottom": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A2": {
 | |
|             "v": "Blank",
 | |
|             "t": "s",
 | |
|             "s":{
 | |
|               "border": {
 | |
|                 "left": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "top": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "bottom": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
|             }
 | |
|           },
 | |
|           "B2": {
 | |
|             "v": "Red",
 | |
|             "s": {
 | |
|               "fill": {
 | |
|                 "fgColor": {
 | |
|                   "rgb": "FFFF0000"
 | |
|                 }
 | |
|               },
 | |
| 
 | |
|               "border": {
 | |
| 
 | |
|                 "bottom": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "C2": {
 | |
|             "v": "Green",
 | |
|             "s": {
 | |
|               "fill": {
 | |
|                 "fgColor": {
 | |
|                   "rgb": "FF00FF00"
 | |
|                 }
 | |
|               },
 | |
|               "border": {
 | |
| 
 | |
|                 "bottom": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "right": {
 | |
|                   "style": "thick",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
| 
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "D2": {
 | |
|             "v": "Blue",
 | |
|             "s": {
 | |
|               "fill": {
 | |
|                 "fgColor": {
 | |
|                   "rgb": "FF0000FF"
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "E2": {
 | |
|             "v": "Theme 5",
 | |
|             "s": {
 | |
|               "fill": {
 | |
|                 "fgColor": {
 | |
|                   "theme": 5
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "F2": {
 | |
|             "v": "Theme 5 Tint -0.5",
 | |
|             "s": {
 | |
|               "fill": {
 | |
|                 "fgColor": {
 | |
|                   "theme": 5,
 | |
|                   "tint": -0.5
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A3": {
 | |
|             "v": "Default",
 | |
|             "t": "s"
 | |
|           },
 | |
|           "B3": {
 | |
|             "v": "Arial",
 | |
|             "s": {
 | |
|               "font": {
 | |
|                 "name": "Arial",
 | |
|                 "sz": 24,
 | |
|                 "color": {
 | |
|                   "theme": "5"
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "C3": {
 | |
|             "v": "Times New Roman",
 | |
|             "s": {
 | |
|               "font": {
 | |
|                 "name": "Times New Roman",
 | |
|                 bold: true,
 | |
|                 underline: true,
 | |
|                 italic: true,
 | |
|                 strike: true,
 | |
|                 outline: true,
 | |
|                 shadow: true,
 | |
|                 vertAlign: "superscript",
 | |
|                 "sz": 16,
 | |
|                 "color": {
 | |
|                   "rgb": "FF2222FF"
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "D3": {
 | |
|             "v": "Courier New",
 | |
|             "s": {
 | |
|               "font": {
 | |
|                 "name": "Courier New",
 | |
|                 "sz": 14
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A4": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n"
 | |
|           },
 | |
|           "B4": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n"
 | |
|           },
 | |
|           "C4": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n"
 | |
|           },
 | |
|           "D4": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n",
 | |
|             "s": {
 | |
|               "numFmt": "0.00%"
 | |
|             }
 | |
|           },
 | |
|           "E4": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n",
 | |
|             "s": {
 | |
|               "numFmt": "0.00%",
 | |
|               "fill": {
 | |
|                 "fgColor": {
 | |
|                   "rgb": "FFFFCC00"
 | |
|                 }
 | |
|               }
 | |
|             }
 | |
|           },
 | |
|           "A5": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n",
 | |
|             "s": {
 | |
|               "numFmt": "0%"
 | |
|             }
 | |
|           },
 | |
|           "B5": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n",
 | |
|             "s": {
 | |
|               "numFmt": "0.0%"
 | |
|             }
 | |
|           },
 | |
|           "C5": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n",
 | |
|             "s": {
 | |
|               "numFmt": "0.00%"
 | |
|             }
 | |
|           },
 | |
|           "D5": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n",
 | |
|             "s": {
 | |
|               "numFmt": "0.000%"
 | |
|             }
 | |
|           },
 | |
|           "E5": {
 | |
|             "v": 0.618033989,
 | |
|             "t": "n",
 | |
|             "s": {
 | |
|               "numFmt": "0.0000%"
 | |
|             }
 | |
|           },
 | |
|           "F5": {
 | |
|             "v": 0,
 | |
|             "t": "n",
 | |
|             "s": {
 | |
|               "numFmt": "0.00%;\\(0.00%\\);\\-;@",
 | |
|               "fill": {
 | |
|                 "fgColor": {
 | |
|                   "rgb": "FFFFCC00"
 | |
|                 }
 | |
|               }
 | |
|             }
 | |
|           },
 | |
|           "A6": {
 | |
|             "v": "Sat Mar 21 2015 23:47:34 GMT-0400 (EDT)",
 | |
|             "t": "s"
 | |
|           },
 | |
|           "B6": {
 | |
|             "v": 42084.99137416667,
 | |
|             "t": "n"
 | |
|           },
 | |
|           "C6": {
 | |
|             "v": 42084.99137416667,
 | |
|             "s": {
 | |
|               "numFmt": "d-mmm-yy"
 | |
|             },
 | |
|             "t": "n"
 | |
|           },
 | |
|           "A7": {
 | |
|             "v": "left",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "horizontal": "left"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "B7": {
 | |
|             "v": "center",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "horizontal": "center"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "C7": {
 | |
|             "v": "right",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "horizontal": "right"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A8": {
 | |
|             "v": "vertical",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "vertical": "top"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "B8": {
 | |
|             "v": "vertical",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "vertical": "center"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "C8": {
 | |
|             "v": "vertical",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "vertical": "bottom"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A9": {
 | |
|             "v": "indent",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "indent": "1"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "B9": {
 | |
|             "v": "indent",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "indent": "2"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "C9": {
 | |
|             "v": "indent",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "indent": "3"
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A10": {
 | |
|             "v": "In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. ",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "wrapText": 1,
 | |
|                 "horizontal": "right",
 | |
|                 "vertical": "center",
 | |
|                 "indent": 1
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A11": {
 | |
|             "v": 41684.35264774306,
 | |
|             "s": {
 | |
|               "numFmt": "m/d/yy"
 | |
|             },
 | |
|             "t": "n"
 | |
|           },
 | |
|           "B11": {
 | |
|             "v": 41684.35264774306,
 | |
|             "s": {
 | |
|               "numFmt": "d-mmm-yy"
 | |
|             },
 | |
|             "t": "n"
 | |
|           },
 | |
|           "C11": {
 | |
|             "v": 41684.35264774306,
 | |
|             "s": {
 | |
|               "numFmt": "h:mm:ss AM/PM"
 | |
|             },
 | |
|             "t": "n"
 | |
|           },
 | |
|           "D11": {
 | |
|             "v": 42084.99137416667,
 | |
|             "s": {
 | |
|               "numFmt": "m/d/yy"
 | |
|             },
 | |
|             "t": "n"
 | |
|           },
 | |
|           "E11": {
 | |
|             "v": 42065.02247239584,
 | |
|             "s": {
 | |
|               "numFmt": "m/d/yy"
 | |
|             },
 | |
|             "t": "n"
 | |
|           },
 | |
|           "F11": {
 | |
|             "v": 42084.99137416667,
 | |
|             "s": {
 | |
|               "numFmt": "m/d/yy h:mm:ss AM/PM"
 | |
|             },
 | |
|             "t": "n"
 | |
|           },
 | |
|           "A12": {
 | |
|             "v": "Apple",
 | |
|             "s": {
 | |
|               "border": {
 | |
|                 "top": {
 | |
|                   "style": "thin"
 | |
|                 },
 | |
|                 "left": {
 | |
|                   "style": "thin"
 | |
|                 },
 | |
|                 "right": {
 | |
|                   "style": "thin"
 | |
|                 },
 | |
|                 "bottom": {
 | |
|                   "style": "thin"
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "C12": {
 | |
|             "v": "Apple",
 | |
|             "s": {
 | |
|               "border": {
 | |
|                 "diagonalUp": 1,
 | |
|                 "diagonalDown": 1,
 | |
|                 "top": {
 | |
|                   "style": "dashed",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "right": {
 | |
|                   "style": "medium",
 | |
|                   "color": {
 | |
|                     "theme": "5"
 | |
|                   }
 | |
|                 },
 | |
|                 "bottom": {
 | |
|                   "style": "hair",
 | |
|                   "color": {
 | |
|                     "theme": 5,
 | |
|                     "tint": "-0.3"
 | |
|                   }
 | |
|                 },
 | |
|                 "left": {
 | |
|                   "style": "thin",
 | |
|                   "color": {
 | |
|                     "rgb": "FFFFAA00"
 | |
|                   }
 | |
|                 },
 | |
|                 "diagonal": {
 | |
|                   "style": "dotted",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "E12": {
 | |
|             "v": "Pear",
 | |
|             "s": {
 | |
|               "border": {
 | |
|                 "diagonalUp": 1,
 | |
|                 "diagonalDown": 1,
 | |
|                 "top": {
 | |
|                   "style": "dashed",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 },
 | |
|                 "right": {
 | |
|                   "style": "dotted",
 | |
|                   "color": {
 | |
|                     "theme": "5"
 | |
|                   }
 | |
|                 },
 | |
|                 "bottom": {
 | |
|                   "style": "mediumDashed",
 | |
|                   "color": {
 | |
|                     "theme": 5,
 | |
|                     "tint": "-0.3"
 | |
|                   }
 | |
|                 },
 | |
|                 "left": {
 | |
|                   "style": "double",
 | |
|                   "color": {
 | |
|                     "rgb": "FFFFAA00"
 | |
|                   }
 | |
|                 },
 | |
|                 "diagonal": {
 | |
|                   "style": "hair",
 | |
|                   "color": {
 | |
|                     "auto": 1
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A13": {
 | |
|             "v": "Up 90",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "textRotation": 90
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "B13": {
 | |
|             "v": "Up 45",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "textRotation": 45
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "C13": {
 | |
|             "v": "Horizontal",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "textRotation": 0
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "D13": {
 | |
|             "v": "Down 45",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "textRotation": 135
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "E13": {
 | |
|             "v": "Down 90",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "textRotation": 180
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "F13": {
 | |
|             "v": "Vertical",
 | |
|             "s": {
 | |
|               "alignment": {
 | |
|                 "textRotation": 255
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "A14": {
 | |
|             "v": "Font color test",
 | |
|             "s": {
 | |
|               "font": {
 | |
|                 "color": {
 | |
|                   "rgb": "FFC6EFCE"
 | |
|                 }
 | |
|               }
 | |
|             },
 | |
|             "t": "s"
 | |
|           },
 | |
|           "!ref": "A1:F14"
 | |
|         }
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     var wbout = XLSX.write(wb, {bookType:'xlsx', bookSST:true, type: 'binary'});
 | |
|     var fname =   'test.xlsx';
 | |
|     try {
 | |
|       saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), fname);
 | |
|     } catch(e) { if(typeof console != 'undefined') console.log(e, wbout); }
 | |
|     return wbout;
 | |
|   }
 | |
|   function s2ab(s) {
 | |
|     if(typeof ArrayBuffer !== 'undefined') {
 | |
|       var buf = new ArrayBuffer(s.length);
 | |
|       var view = new Uint8Array(buf);
 | |
|       for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
 | |
|       return buf;
 | |
|     } else {
 | |
|       var buf = new Array(s.length);
 | |
|       for (var i=0; i!=s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
 | |
|       return buf;
 | |
|     }
 | |
|   }
 | |
| </script>
 | |
| 
 | |
| <button class="button" onclick="export_table_to_excel()">Export</button>
 | |
| </body>
 | |
| </html>
 |