表形式でコピーできるブラウザ拡張機能
2012.07.25

tableを使用したwebページの表の中身をコピーして、エクセルの表やcsvを作成したい。というシーンがあるかと思います。
膨大な表となると、コピーするのも一苦労・・・そんな時に役立つブラウザのアドオンがあります。


table2clipboard - Firefox


<使用方法>
アドオンを追加した状態で、コピーしたいテーブル上で右クリック
120725_01.jpg
 
table2clipboard → 表全体をコピー
(クリップボードに保存されます)
120725_02.jpg
 
エクセルにペースト
120725_03.jpg
 
この通り、結合セルや画像も再現され非常に便利!
しかし、Firefoxなんて使いたくない!!という方もいるかと思います・・
そんな方にはコチラ。
 
Table Capture - Chrome

<使用方法>
アドオンを追加した状態で、アドレスバーに現れる赤いマークをクリック
120725_04.jpg
 
「Copy to Clipboard」をクリック
120725_05.jpg
 
エクセルにペースト
120725_06.jpg
 
table2clipboardと違い、結合セルや画像は再現できないようですが、十分使えます。

| コメント(0)
Fancybox:HTML表示時に高さを自動調整する
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'を入れておいてもいいかもしれません。

ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・

時間があるときにいじってみたいです。
| コメント(0)

月別アーカイブ