Help us understand the problem. What is going on with this article?

ブラウザからExcelにコピペした結果の違いについて

More than 3 years have passed since last update.

Webシステムを開発しております。
「ブラウザに表示されている内容をExcelにも出力して欲しい」という要望を承りました。
しかし時間がかかりそうなので、「とりあえずはコピペでお願いします」とお客様に提案。
JavaScripで「コピペ対象の内容を範囲選択する」機能までは作り、コピペ操作(Ctrl+C, Ctrl+V)はお客様に実施していただく、ということで一件落着。
と思いきや、Excelに貼り付けた結果がブラウザごとに違うじゃありませんか。

そんな訳で、Excelにコピペした結果の違いをまとめてました。

調査の結果

調査環境

  • Firefox 46
  • Internet Explorer 11
  • Chrome 52
  • Windows7
  • Excel2003

基本的なCSSを検証しました。

CSS

スタイルの指定方法 Firefox IE Chrome
style属性 OK OK OK
<style>要素 NG OK OK
外部CSS NG OK OK

Firefoxはstyle属性で指定したスタイルしかコピペできませんでした。
この時点で、「Excelへのコピペ結果がブラウザと同じ」であることを期待しない方がよさそう。。。

以下、スタイルの確認はstyle属性で指定します。

フォントのスタイル

<span id="font-test" 
 style="font-weight:bold;font-size:48px;font-style:italic;text-decoration: underline;color:red;">
   font test
</span>
項目 CSS Firefox IE Chrome
太字 font-weight:bold; OK OK OK
フォントサイズ font-size:48px; OK OK OK
イタリック体 font-style:italic; OK OK OK
下線 text-decoration: underline; OK OK OK
フォントの色 color:red; OK OK OK

問題なくコピペできました。
フォントサイズはピクセル数からポイントに変換されました。

リンク要素

<a href="sample.html">link test</a>
項目 Firefox IE Chrome
ハイパーリンク OK OK OK

画像要素

<img src="sample.jpg" style="width:100px; height:100px;">
項目 CSS Firefox IE Chrome
画像表示 - OK OK OK
width:100px; OK OK OK
高さ height:100px; OK OK OK

画像はコピペできましたが、原寸大で表示されました。

tableの罫線関係

<table>
    <tr><td style="border:solid 1px;">1</td><td style="border:solid 3px;">Alice</td></tr>
    <tr><td style="border:double 1px;">2</td><td>Bob</td></tr>
</table>
項目 CSS Firefox IE Chrome
実線 border:solid 1px OK NG OK
二重線 border:double 1px OK NG OK
線の太さ border:solid 3px OK NG OK

IEでは罫線はコピペできませんでした。

tableのセル関係

<table>
    <tr><td style="background-color:red;">1</td><td style="width:100px; text-align:center;">Alice</td></tr>
    <tr style="height:100px;"><td style="vertical-align:bottom;">2</td><td>Bob</td></tr>
</table>
項目 CSS Firefox IE Chrome
背景色 background-color:red; OK OK OK
行揃え border:double 1px OK OK OK
縦方向の位置揃え vertical-align:bottom; OK OK OK

tableの非表示

<table>
    <tr><td>1</td><td style="display:none;">Alice</td></tr>
    <tr style="display:none;"><td>2</td><td>Bob</td></tr>
</table>
項目 CSS Firefox IE Chrome
tr要素の非表示 display:none; OK NG OK
td要素の非表示 display:none; OK NG OK

IEでは非表示にしてもコピペできました。

まとめ

項目 Firefox IE Chrome
style要素 or 外部CSS NG OK OK
罫線 OK NG OK
tr要素, td要素の非表示 OK NG OK

基本的にExcelで指定できるスタイルは、ブラウザからExcelにコピペできそうです。
ただIEで罫線がコピペできないこと、Firefoxで外部CSSのスタイルがコピペできないのは、注意が必要です。

「Excelへのコピペ結果がブラウザと同じ」であることを、期待しない方がいいですね。。。

yuji38kwmt
愛知のIT企業で修行しております。2018年4月に転職しました。 基本的に自分用のメモとして、記事を書いております。 所属先の見解とは一切関係ありません。 https://qiita.com/yuji38kwmt/items/a474ad97e0d86f6081a2
kurusugawa
「いいソフトウェアを楽に作る」技術を追求する企業。今は、機械学習、画像認識中心。
http://kurusugawa.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away