2010/08/19

[HTML][CSS] 使用 HTML <table> 匯出 Excel 時的斷行 (<br/>) 處理

在網頁的應用上, 有時我們會用 HTML 的 <table> 包裝要匯出的資料, 並設定匯出的檔案是 Excel.
例如在 HTTP Header 中利用 Content-disposition 讓使用者下載指定的檔案:
Content-Disposition: inline; filename=data.xls
不過有人會以為在 <td> 中加入 <br/> 會讓資料在 Excel 的儲存格中換行. 結果實際並不是這樣.

例如以下的 HTML, 會在 Excel 中形成下圖的結果 (加入 <br> 造成分成兩列的結果).
<table align="center" border="1" cellpadding="3" 
  cellspacing="1" bgcolor="#336699" class="e12" width="98%">
  <tr bgcolor="#CCDDEE">
    <td><p align="center">No.</p></td>
    <td><p align="center">Content</p></td>
  </tr>
  <tr bgcolor="#FFFEEE">
    <td align="center">1</td>
    <td align="center">
      Hello<br />World
    </td>  
  </tr>  
</table>
加入 <br> 造成分成兩列的結果 若我們將一個簡單的 Ecxcel 另存成網頁, 再將該網頁檔用文字編輯器開啟, 可以發現該網頁加入了許多 <style>, 其中有一個 br 的 CSS 設定:
br
    {mso-data-placement:same-cell;}
接下來就試著把 <br> 加上這個 style 的設定看看:
<table align="center" border="1" cellpadding="3" 
cellspacing="1" bgcolor="#336699" class="e12" width="98%">
  <tr bgcolor="#CCDDEE">
    <td><p align="center">No.</p></td>
    <td><p align="center">Content</p></td>
  </tr>
  <tr bgcolor="#FFFEEE">
    <td align="center">1</td>
    <td align="center">
      Hello<br style="mso-data-placement:same-cell;">World
    </td>  
  </tr>  
</table>
最後就會產生我們希望的斷行結果, 如下圖:
在單一儲存格斷行的結果
結論: 請記得在 <br> 中加上 style="mso-data-placement:same-cell;", 才能正確地在儲存格中斷行.

4 則留言:

Bruce 提到...

我現在都改用xml了
http://msdn.microsoft.com/en-us/library/bb226687%28v=office.11%29.aspx
table匯出的格線實在是好醜啊><

yilinliu 提到...

為了快點改掉舊程式的bug, 只好先將就用. 要等有空才能好好處理這部分.

湯圓 提到...

哇~ 原來Yilin 大師已搬家到這裏了!
先膜拜一下。

湯圓 提到...
作者已經移除這則留言。