如何将html模板保存为图片

时间:2022-05-06 11:53:28

问题描述:做项目的过程中,遇到这样一个需求,需要把系统中的某个业务表格,保存为图片,而不是保存整个网页,便于查看。

解决方案:

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>