エクセルを使ってエクセルの帳票をHTMLに変換する方法

使用パソコン:Windows10Ver1909Pro64bit

対象のエクセルを開く

マウスで範囲を選択する

補足

ブックまたはシートの一部を範囲指定してHTML化することをおすすめします。範囲指定にはひと手間必要です。何もしなければブック全体がHTML化されますが、特に理由がない限り範囲を選択したほうがいいと思います。

名前を付けて保存をし、HTMLを作成する

  1. ファイル名:example.html
  2. ファイルの種類:「Webページhtm、html」
  3. 自動的にウィンドウが拡張され、「ブック全体」と「選択範囲:印刷範囲」が表われます
  4. 選択範囲:印刷範囲を選択、保存
  5. 自動的に「Webページとして発行ウィンドウ」が立ち上がります
    「発行したWebページをブラウザーで開く」のチェックは私は外しています。
    そのまま保存(発行)をクリックします。
  6. HTMLが作成されました

この後、Windowsのメモ帳で発行したHTMLを修正します。以下、文字化けの【対処法1】を実施してください。

ここまでの流れは2、3回やれば覚えると思います。

文字化け対処法

この記事をまとめる前に「文字コード」「文字化け」で少しハマりました。

原因と理由

普段はテキストエディタVScodeを使っています。この発行したHTMLをVScodeで開き、修正し、保存し、ブラウザで開くと文字化けが起こりました。

VScodeで何も修正、保存をしない限り、文字化けは起こりません。よくよく見るとVScodeで修正してもしなくてもctrl+s押した時点でVScode内でも文字化けが起こっていました。

さらによくよく見ると、発行したHTMLのcharsetがShift-JISでした。文字化けは当たり前の結果ですね。こういうすごく基本的なことは忘れがちです。

「charsetをShift-JISで記述し、VSCodeデフォルト?のUTF-8でファイルを保存し直し、ブラウザで開くときはcharsetの記述にShift-JISがあるので、ブラウザで矛盾が起こり、文字化けが起こるということです」

対処法2つ

  1. Windowsのメモ帳でエクセルから発行したHTMLのcharsetをShift-JISからUTF-8へ修正し、ファイル自体をUTF-8で保存し直す。
  1. エクセルから発行したHTMLをブラウザで開き、ブラウザの機能で文字化けを修正する。
    Firefoxの場合、「メニューバー、表示、テキストエンコーディング、Unicode」で文字化けが変換されます。

圧倒的に1がいいと思います。2だと毎回作業が必要です。

追加マークアップ、プログラミング作業

今回の目的は帳票出力でしたので、Firefoxの印刷プレビューで1枚に納めたいです。
ここら辺の取っ掛かりとしてはmarginやpaddingで解決できるなら早いと思います。
フォントサイズとかはそのあとだと思います。

このあとにHTMLフォームからPOST送信でPHPを使い、帳票の各項目に値を入れていくようプログラミングしていくことになります。かなり面倒な作業です。しかし、プログラミングはやればやるだけ、あとがラクになるものだと思っていますので、がんばります!!

タイトルとURLをコピーしました