Q&A
tableexport.js のバージョンはいくつですか？
以下の記事にあるプラグインを使用したいと考えております。
tableexport.js
自身のサイトで実行しようとした場合に、以下のエラーが出力されたため下記のコードの通り、
本家のコードどおりにローカルで実行しました。
check.html:162 Uncaught TypeError: $(...).tableExport is not a function
at check.html:162
すると同じように上記のエラーが出力されます。
各scriptの配置は適切でソース表示からリンクに飛び表示を確認しております。
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
- <script src="xlsx.core.min.js"></script>
- <script src="Blob.js"></script>
- <script src="FileSaver.js"></script>
- <script src="tableexport.js"></script>
正しくJqueryが読み込まれていない場合にでるエラーという認識なのですが、
原因が分からずに問い合わせさせて頂きました。
アドバイスを頂ければ幸いです。
OS:windows
実行環境:MAMP
ブラウザ：バージョン: 69.0.3497.100（Official Build） （64 ビット）
TableExport:TableExport.js v3.2.5 (http://www.clarketravis.com)
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<meta charset="utf-8"> 6<title>TableExport.js Demo</title> 7<meta name="viewport" content="width=device-width, initial-scale=1"> 8<link href='//fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> 9<link href="tableexport.css" rel="stylesheet"> 10 11<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 12<script src="xlsx.core.min.js"></script> 13<script src="Blob.js"></script> 14<script src="FileSaver.js"></script> 15<script src="tableexport.js"></script> 16<style> 17/* Normalize+ styles*/ 18* { box-sizing:border-box } 19*:before, *:after { box-sizing:inherit } 20 21:focus { 22 outline: 0; 23} 24 25html { 26 font-size: 62.5%; 27 -webkit-tap-highlight-color: rgba(0,0,0,0); 28} 29 30a { text-decoration: none } 31 32ul { 33 margin: 0; 34 padding: 0; 35 list-style: none; 36} 37 38table { 39 border-collapse: collapse; 40} 41 42button { 43 cursor: pointer; 44} 45 46/* Basic styles */ 47body { 48 margin-bottom: 5rem; 49 font-size: 1.4rem; 50 line-height: 1.4; 51 font-family: 'Roboto', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 52 color:#555; 53 text-align: center; 54} 55 56 57#backlink, 58#backlink a{ 59 margin-top: 5rem; 60 text-align: center; 61 font-size: 1.8rem; 62 font-weight: bold; 63 color: #14B694; 64} 65 66#backlink a:hover{ 67 color: #3CC8AB; 68} 69 70h1 { 71 margin-top: 5rem; 72 margin-bottom: 5rem; 73} 74 75h2 { 76 margin-top: 5rem; 77 margin-bottom: 2rem; 78} 79 80.description { 81 margin-bottom: 8rem; 82} 83 84footer { 85 margin-top: 2rem; 86} 87 88.credit a { 89 color: #999; 90} 91 92/* Customize for demo */ 93.box { 94 max-width: 800px; 95 margin: 0 auto; 96} 97.table { 98 width: 100%; 99} 100.table tbody tr:nth-of-type(odd) { 101 background-color: #f9f9f9; 102} 103.table th { 104 border-top: 1px solid #ddd; 105 border-left: 1px solid #ddd; 106 border-right: 1px solid #ddd; 107 border-bottom: 2px solid #ddd; 108} 109.table td { 110 border: 1px solid #ddd; 111 margin: 0; 112} 113.table th, 114.table td { 115 padding: 8px; 116} 117caption.bottom { 118 margin-top: 20px; 119} 120.button-default { 121 margin: 4px 0 4px 5px; 122 padding: 6px 12px; 123 background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%); 124 background-repeat: repeat-x; 125 border-radius: 4px; 126 border: 1px solid #ccc; 127 text-shadow: 0 1px 0 #fff; 128 color: #333; 129} 130.button-default:hover, 131.button-default:focus { 132 background-color: #e0e0e0; 133 background-position: 0 -15px; 134} 135 136</style> 137</head> 138<body> 139<div id="backlink"><a href="https://www.webtoolnavi.com/tableexport/">← 記事に戻る</a></div> 140<h1>TableExport.js Demo</h1> 141<p class="description">HTMLテーブルをxlsx、csv、txt形式でダウンロードできるjQueryプラグインです。</p> 142<section class="box"> 143<table class="table"> 144<thead> 145<tr><th>順位</th><th>国</th><th>一人当たりの名目GDP(USドル)</th></tr> 146</thead> 147<tbody> 148<tr><td>1位</td><td>ルクセンブルク</td><td>101,994</td></tr> 149<tr><td>2位</td><td>スイス</td><td>80,675</td></tr> 150<tr><td>3位</td><td>カタール</td><td>76,576</td></tr> 151<tr><td>4位</td><td>ノルウェー</td><td>74,822</td></tr> 152<tr><td>5位</td><td>マカオ</td><td>69,309</td></tr> 153<tr><td>6位</td><td>アメリカ</td><td>55,805</td></tr> 154<tr><td>7位</td><td>シンガポール</td><td>52,887</td></tr> 155<tr><td>8位</td><td>デンマーク</td><td>52,114</td></tr> 156<tr><td>9位</td><td>アイルランド</td><td>51,350</td></tr> 157<tr><td>10位</td><td>オーストラリア</td><td>50,961</td></tr> 158<tr><td>26位</td><td>日本</td><td>32,485</td></tr> 159</tbody> 160</table> 161</section> 162<script>$("table").tableExport({formats:["xlsx","csv","txt"],bootstrap:false});</script> 163</body> 164</html> 165
コメント有難うございます。バージョンはTableExport.js v3.2.5 (http://www.clarketravis.com)となります。
本家からDLしたのではなく、参考サイトのリンク先からファイルをコピペして再現しているので、同一のバージョンで実行しているものと思われます。
確認してみましたが、http://www.clarketravis.com/ では TableExport.js を使用していなさそうでした。
了解いたしました、有難うございます。
回答2件
0
ベストアンサー
ライブラリの読み込みをネットから読んでみてください
html
1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 2 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.9/xlsx.core.min.js"></script> 3 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.9/js/tableexport.min.js"></script>
投稿2018/10/17 03:14
総合スコア117667
無事解決いたしました。有難うございます。
今後のために原因を知りたいのですが、なぜ、参考サイトではcdnで読み込まずに同じバージョンを実行して適切によりされるにも関らず、ローカルではcdnでネット読み込みをしなければ実行されないのでしょうか。
完全に同一条件と思っていたのですが、私が大きくバージョンや環境、またはscriptの読み込む順番等に根本的に錯誤がある可能性があるため、お願いを申し上げた次第でございます。
ちょっとローカル環境がわからないのですが、なんらかのバージョン違いか
ファイルが壊れているもしくは置き場所がちがう・・的なもののような気がします
個人的には『リンク先からファイルをコピペ』という表現が気になってまして、文字コード大丈夫かなあ、みたいな？
コメント有難うございます。
承知を致しました、それぞれの視点でまた確認してみます。
0
jQueryが読み込まれる前に、実行してしまってるのでは？
（実行環境によって読み込みスピードは変わりますので、可能性大です）
下記でいかがでしょうか。
HTML
1<!-- 前後のHTMLの内容は省略します--> 2<script> 3$(function(){ 4 //この中で、本件の関数を実行 5}); 6</script>
投稿2018/10/17 02:58
総合スコア9555
miyabi_takatsuk様
コメントを頂き、有難うございます。
ご指摘の方法も試してみたのですが、同じエラーが出力されました。
yambe様のご回答の方法で実現はできたのですが、現在原因を調査中でございます。
あなたの回答
tips
プレビュー
