1. 程式人生 > >如何將html模板儲存為圖片

如何將html模板儲存為圖片

問題描述:做專案的過程中,遇到這樣一個需求,需要把系統中的某個業務表格,儲存為圖片,而不是儲存整個網頁,便於檢視。

解決方案:

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>