:::

用網頁來做合併列印!HTML合併列印小工具 / Online HTML Mail Merger

image

如果要用試算表資料搭配有格式的文件,批次地產生大量檔案的話,要怎麼呢?Word為主的合併列印方案都只能在單一檔案中產生許多重複範本的內容,不符合我的需求。於是我乾脆重新寫一個能夠以CSV試算表檔案搭配HTML網頁範本產生合併列印效果的線上版合併列印小工具:HTML Mail Merger。它會讀取CSV中的欄位資料以及檔案名稱(filename)欄位,以此批次產生取代以大括弧「{}」夾住的佔位符號和指定檔案名稱的檔案。合併列印再也不用仰賴Word,直接線上就處理完成吧。


準備合併列印所需的資料 / Preparing files for mail merging

image

要製作合併列印的話,我們必須準備好兩種檔案:

以下說明這兩種檔案怎麼來的。

CSV試算表資料來源 / CSV spreadsheet data source

image

首先要準備一個合併列印的資料來源:CSV試算表檔案。

2017-08-31_145521

我建議大家使用Google試算表來建立合併列印的CSV試算表資料來源。在試算表中,第一列為每一個變數的名稱。變數名稱不一定要用在範本中。其中「filename」代表這是合併列印產生檔案時的檔案名稱。

image

您可以先用Google試算表編輯資料來源,然後進入「檔案 > 下載格式 > 逗號分隔值檔案 (.csv,目前工作表)」來下載CSV格式的檔案。或是用以下網址下載範例檔:

HTML範本檔案 / HTML template 

image

接下來還要準備HTML範本。這個檔案必須用HTML程式語言撰寫,並且以UTF-8編碼儲存。

image

上圖是名片範本的網頁結果。

變數佔位符號 / Variable Placeholder

image

上圖是HTML範本檔範例的HTML程式碼內容。在範本檔中,要用CSV試算表資料來源取代的地方,請以大括弧「{}」包著變數名稱表示。例如要顯示公司名字的地方,就用「{公司名稱}」來表示。在產生合併列印的時候,這個位置就會自動被取代為「欣同公司」、「聖佳公司」跟「裕祿公司」。

為了確保列印時能符合正確的版面,這個網頁裡面使用的CSS度量單位最好都是以「cm」為主,而不是一般網頁常用的「px」或「rem」。

如果最後合併列印產生的結果並沒有取代變數佔位符號,那可能是因為你使用的HTML編輯器把「{變數}」拆開了。在Word或Google Doc轉存HTML檔案中很常發生這個問題,這是因為它們會把英文跟中文字元拆開,而「{」、「變數」、「}」則各別隸屬於英文、中文、英文,或是它們會用Big5、將中文編碼等方式來產生HTML檔案,這樣的檔案是不能作為範本檔的。

範本編輯器 / Template Editor

image

我建議大家使用布丁版TinyMCE編輯器來編輯HTML範本檔,它所產生的HTML程式語言相當乾淨,不會有Word或Google Doc影響變數佔位符號,非常好用。

    

線上HTML合併列印 / HTML Mail Merge


使用說明 / Usage 

image

線上HTML合併列印工具功能很簡單,主要只有5個功能,請搭配上圖的1~5一起閱讀:

  1. 開啟CSV試算表資料來源檔案
  2. 檢視開啟的CSV檔案內容
  3. 開啟HTML範本檔案
  4. 檢視開啟的HTML範本檔案內容
  5. 產生HTML合併列印

使用方式是:

  1. 按「1」開啟CSV試算表
  2. 按「3」開啟HTML範本檔案
  3. 按「5」產生HTML合併列印

image

會產生一個ZIP壓縮檔。

aaaa

壓縮檔裡面是合併列印產生的三個檔案。

image

其中一個檔案內容如上圖所示。原本的{公司名稱}、{職稱}、{姓名}已經被取代為「聖佳公司」、「財務車長」、「平翠」。而檔案名稱也如「filename」欄位所設定的,被命名為「聖佳公司-平翠.html」了。


結語 / In closing

繼我之前寫過的「純文字的合併列印:CSV文字範本產生器」,最近我需要用試算表資料與有格式的文件批次產生大量的檔案。雖然合併列印是Word的一個很好用的功能,但其實我每次都很不會用Word的合併列印。這大概是因為Word的合併列印邏輯一直是為了印製大量信件而設計,不是印信件的話,好像就不會想到這個功能。

這次乾脆自己重頭來寫這樣的合併列印功能,而且是用比較穩定的HTML格式,自己也比較能夠掌控合併列印的範本內容。雖然這對不會寫HTML程式語言的人來說可能比較辛苦,這時候可以借助布丁版TinyMCE編輯器來編輯HTML範本檔,這樣應該會好很多。

從以前到現在,我仍然希望HTML格式會成為世界標準的文件格式啊……

0 意見:

留言工具: