如何將html模板儲存為圖片
阿新 • • 發佈:2019-02-18
問題描述:做專案的過程中,遇到這樣一個需求,需要把系統中的某個業務表格,儲存為圖片,而不是儲存整個網頁,便於檢視。
解決方案:
1.首先把要儲存為圖片的部門html(即業務表單),抽取為單獨的html表格模板
2.然後裡面的資料使用特殊的${fhf_z2_k} 進行填充模板
3,讀取指定位置的html模板檔案,讀取為string字串
4.將模板字串中的要替換的內容進行替換
5.使用工具,將html字串轉換為位元組陣列
6.用流的形式讀取字串,然後設定響應頭為圖片,和設定響應內容,返回即可
下面是部分程式碼:
@RequestMapping(value ="savephoto") private String savePhoto(HttpServletRequest request, HttpServletResponse response, Model model) { response.setHeader("Content-disposition", "attachment; filename=Fertilizermode.jpg");// 設定輸出檔案頭 response.setContentType("image/jpeg");// Map<String,String> map = (Map<String, String>) request.getSession().getAttribute("map"); ////////////////////////////////// String path = request.getSession().getServletContext().getRealPath("img.html"); if("敦煌市".equals(map.get("xmc"))){ path = request.getSession().getServletContext().getRealPath("img_dhs.html"); } String html = ImageUtil.readFile(path, "utf-8"); html = ImageUtil.replaceHtml(html, map); try { byte[] bytes = ImageUtil.htmlToByteString(null, html, ImageUtil.DEFAULT_IMAGE_WIDTH, ImageUtil.DEFAULT_IMAGE_HEIGHT); response.getOutputStream().write(bytes); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; }
<div id="suggest-box1"> <table class="table1" id="ss1" cellspacing="0" cellpadding="0"> <caption align="top" style="padding-top: 0px;text-align: center;margin-bottom: 10px;font-size:18px;font-weight:bold;">單質肥施肥方案</caption> <tr> <td rowspan="3" style="width: 70px;">基肥</td> <td style="width: 73px;">尿素使用量:</td> <td style="width: 60px;">${dz_base_n}</td> </tr> <tr> <td>磷酸二銨使用量:</td> <td style="width: 30px;">${dz_base_p}</td> </tr> <tr> <td>硫酸鉀使用量:</td> <td style="width: 30px;">${dz_base_k}</td> </tr> <tr> <td rowspan="3">第一次追肥</td> <td>尿素使用量:</td> <td style="width: 30px;">${dz_z1_n}</td> </tr> <tr> <td>磷酸二銨使用量:</td> <td style="width: 30px;">${dz_z1_p}</td> </tr> <tr> <td>硫酸鉀使用量:</td> <td style="width: 30px;">${dz_z1_k}</td> </tr> <tr> <td rowspan="3">第二次追肥</td> <td>尿素使用量:</td> <td style="width: 30px;">${dz_z2_n}</td> </tr> <tr> <td>磷酸二銨使用量:</td> <td style="width: 30px;">${dz_z2_p}</td> </tr> <tr> <td>硫酸鉀使用量:</td> <td style="width: 30px;">${dz_z2_k}</td> </tr> </table> </div>