2012.07.25
tableを使用したwebページの表の中身をコピーして、エクセルの表やcsvを作成したい。というシーンがあるかと思います。
膨大な表となると、コピーするのも一苦労・・・そんな時に役立つブラウザのアドオンがあります。
<使用方法>
アドオンを追加した状態で、コピーしたいテーブル上で右クリック
table2clipboard → 表全体をコピー
(クリップボードに保存されます)
エクセルにペースト
この通り、結合セルや画像も再現され非常に便利!
しかし、Firefoxなんて使いたくない!!という方もいるかと思います・・
そんな方にはコチラ。
●Table Capture - Chrome
<使用方法>
アドオンを追加した状態で、アドレスバーに現れる赤いマークをクリック
「Copy to Clipboard」をクリック
エクセルにペースト
table2clipboardと違い、結合セルや画像は再現できないようですが、十分使えます。
2012.07.11
※14/10/8 追記
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。
ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。
よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。
ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。
jQuery and Fancybox: How to automatically set the height of an iframe lightbox
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
});
上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
'scrolling' : 'no',
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height());
$('#fancybox-overlay').height($(document).height());
});
}
});
これで高さが自動調整されます。
google chromeだとローカルでは動きません。
※12/7/11 追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。
不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。
また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。
ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・
時間があるときにいじってみたいです。
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。
ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。
よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。
ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。
jQuery and Fancybox: How to automatically set the height of an iframe lightbox
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
});
上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
'scrolling' : 'no',
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height());
$('#fancybox-overlay').height($(document).height());
});
}
});
これで高さが自動調整されます。
google chromeだとローカルでは動きません。
※12/7/11 追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。
不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。
また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。
ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・
時間があるときにいじってみたいです。
1