彰化一整天的論壇

 找回密碼
 立即註冊
查看: 112|回復: 0

網頁資料存成 CSV 需要解決的問題整理﹍亂碼 + JS 技巧 + Boo...

[複製鏈接]
發表於 2018-6-8 10:36:58 | 顯示全部樓層 |閱讀模式
本帖最後由 discuz 於 2018-6-8 10:38 編輯

網頁資料存成 CSV 需要解決的問題整理﹍亂碼 + JS 技巧 + Bootstrap 表格


  1. <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
  2. <link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'></link>
  3. <a id="exportBtn" class="btn btn-success" target="_blank" download="WFUBLOG-會員資料.csv">匯出 WFU BLOG 會員資料</a>
  4. <br/><br/>
  5. <style>
  6. #member_list {white-space: nowrap;}
  7. #member_list thead{background: #5893c8;color:#fff;}
  8. </style>
  9. <div id="member_list" class="table-responsive">
  10. <table class="table table-striped table-bordered">
  11. <thead>
  12. <tr>
  13. <th>權限</th>
  14. <th>序號</th>
  15. <th>暱稱</th>
  16. <th>性別</th>
  17. <th>註冊日期</th>
  18. </tr>
  19. </thead>
  20. <tbody>
  21. <tr>
  22. <td>加值會員</td>
  23. <td>W00001</td>
  24. <td>Wayne Fu</td>
  25. <td>男生</td>
  26. <td>2014/9/12</td>
  27. </tr>
  28. <tr>
  29. <td>一般會員</td>
  30. <td>W00002</td>
  31. <td>Che</td>
  32. <td>女生</td>
  33. <td>2014/9/17</td>
  34. </tr>
  35. <tr>
  36. <td>一般會員</td>
  37. <td>W00003</td>
  38. <td>Ken</td>
  39. <td>男生</td>
  40. <td>2014/9/17</td>
  41. </tr>
  42. <tr>
  43. <td>一般會員</td>
  44. <td>W00004</td>
  45. <td>Sun</td>
  46. <td>男生</td>
  47. <td>2014/9/17</td>
  48. </tr>
  49. <tr>
  50. <td>一般會員</td>
  51. <td>W00005</td>
  52. <td>Liu</td>
  53. <td>男生</td>
  54. <td>2014/9/17</td>
  55. </tr>
  56. <tr>
  57. <td>一般會員</td>
  58. <td>W00006</td>
  59. <td>Don</td>
  60. <td>男生</td>
  61. <td>2014/9/18</td>
  62. </tr>
  63. <tr>
  64. <td>一般會員</td>
  65. <td>W00007</td>
  66. <td>Cha</td>
  67. <td>女生</td>
  68. <td>2014/9/18</td>
  69. </tr>
  70. <tr>
  71. <td>一般會員</td>
  72. <td>W00008</td>
  73. <td>Tun</td>
  74. <td>女生</td>
  75. <td>2014/9/18</td>
  76. </tr>
  77. <tr>
  78. <td>一般會員</td>
  79. <td>W00009</td>
  80. <td>陳</td>
  81. <td>男生</td>
  82. <td>2014/9/18</td>
  83. </tr>
  84. <tr>
  85. <td>一般會員</td>
  86. <td>W00010</td>
  87. <td>HY</td>
  88. <td>男生</td>
  89. <td>2014/9/18</td>
  90. </tr>
  91. <tr>
  92. <td>一般會員</td>
  93. <td>W00011</td>
  94. <td>美</td>
  95. <td>女生</td>
  96. <td>2014/9/18</td>
  97. </tr>
  98. <tr>
  99. <td>一般會員</td>
  100. <td>W00012</td>
  101. <td>Kat</td>
  102. <td>女生</td>
  103. <td>2014/9/19</td>
  104. </tr>
  105. <tr>
  106. <td>一般會員</td>
  107. <td>W00013</td>
  108. <td>Mar</td>
  109. <td>男生</td>
  110. <td>2014/9/19</td>
  111. </tr>
  112. <tr>
  113. <td>一般會員</td>
  114. <td>W00014</td>
  115. <td>Wan</td>
  116. <td>男生</td>
  117. <td>2014/9/20</td>
  118. </tr>
  119. <tr>
  120. <td>一般會員</td>
  121. <td>W00015</td>
  122. <td>Bas</td>
  123. <td>女生</td>
  124. <td>2014/9/20</td>
  125. </tr>
  126. <tr>
  127. <td>一般會員</td>
  128. <td>W00016</td>
  129. <td>莊</td>
  130. <td>男生</td>
  131. <td>2014/9/23</td>
  132. </tr>
  133. <tr>
  134. <td>一般會員</td>
  135. <td>W00017</td>
  136. <td>詹</td>
  137. <td>女生</td>
  138. <td>2014/9/23</td>
  139. </tr>
  140. <tr>
  141. <td>一般會員</td>
  142. <td>W00018</td>
  143. <td>Li</td>
  144. <td>男生</td>
  145. <td>2014/10/2</td>
  146. </tr>
  147. <tr>
  148. <td>一般會員</td>
  149. <td>W00019</td>
  150. <td>陳</td>
  151. <td>女生</td>
  152. <td>2014/10/2</td>
  153. </tr>
  154. <tr>
  155. <td>一般會員</td>
  156. <td>W00020</td>
  157. <td>淵</td>
  158. <td>男生</td>
  159. <td>2014/10/3</td>
  160. </tr>
  161. </tbody>
  162. </table>
  163. </div>
  164. <script>
  165. // 點擊匯出
  166. $("#exportBtn").click(function() {
  167. var csvList = [],
  168. titleList = [],
  169. memberContent = "",
  170. csvContent;

  171. // 取得標題
  172. $("#member_list th").each(function() {
  173. titleList.push(this.innerHTML);
  174. });
  175. csvList.push(titleList);

  176. // 取得所有資料
  177. $("#member_list tbody > tr").each(function() {
  178. var regList = [];
  179. $(this).children("td").each(function() {
  180. regList.push(this.innerHTML);
  181. });
  182. csvList.push(regList);
  183. });

  184. // 產生 csv 內容
  185. csvList.forEach(function(rowArray) {
  186. var row = rowArray.join(",");
  187. memberContent += row + "\r\n";
  188. });

  189. // 產生 csv Blob
  190. csvContent = URL.createObjectURL(new Blob(["\uFEFF" + memberContent], {
  191. type: 'text/csv;charset=utf-8;'
  192. }));

  193. // 產生 csv 連結
  194. this.href = csvContent;
  195. });
  196. </script>
複製代碼


https://www.wfublog.com/2018/05/ ... csv-unicode-js.html

回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2018-10-16 21:25 , Processed in 0.191964 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表