Generating an image from HTML with ColdFusion

2019-06-21 22:40发布

站内问答 / 移动开发
1528 3 6

I have a ColdFusion page with a styled HTML table in it. What I would like to be able to do is set up a feature that allows our customers to save the table as an image file, for use in their slide shows. I have read some of the documentation for cfcontent however, I am beginning to get the feeling that I will need a third party library. I was hoping someone could shed some light on this.

3条回答
淡お忘
2楼-- · 2019-06-21 22:48

Might not be exactly what you're after but cfsilence has a post from the CF8 days that might work:

Initial Post: http://cfsilence.com/blog/client/index.cfm/2008/4/4/Converting-HTML-To-An-Image-With-CFJava

Follow Up: http://cfsilence.com/blog/client/index.cfm/2008/4/5/More-Thoughts-on-HTML-To-Image-Plus-Code

Might get you started ... hope it's helpful!

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
3楼-- · 2019-06-21 22:54

You could render your html table to a static page, then call http://code.google.com/p/wkhtmltopdf/ using cfexecute to render to pdf, or wkhtmltoimage can convert to .png .gif etc

Here's a static page with a test table and some css table.cfm

<html>
<head>
    <title>Table test</title>

</head>
<style>
 *{
     margin:0;
     padding:0;
 }
 body{
     font-family: Georgia, serif;
     font-size: 20px;
     font-style: italic;
     font-weight: normal;
     letter-spacing: normal;
 }
 #content{
     padding:40px;
     margin:0 auto;
     -moz-box-shadow:0px 0px 16px #aaa;
 }

/* Table 1 Style */
table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    border-collapse:separate;
}
.table1 thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.table1 thead th:empty{
    background:transparent;
    border:none;
}
.table1 tbody th{
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    background-color:#9DD929;
    border:1px solid #93CE37;
    border-right:3px solid #9ED929;
    padding:0px 10px;
    background:-webkit-gradient(
        linear,
        left bottom,
        right top,
        color-stop(0.02, rgb(158,217,41)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(123,192,67))
        );
    background: -moz-linear-gradient(
        left bottom,
        rgb(158,217,41) 2%,
        rgb(139,198,66) 51%,
        rgb(123,192,67) 87%
        );
    -moz-border-radius:5px 0px 0px 5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}
.table1 tbody td{
    padding:10px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}
    </style>
<body>
<div id="content">

<table  class="table1">
<thead>
<tr>
    <th>column 1</th>
    <th>column 2</th>
    <th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>

<tr>
    <td>oranges</td>
    <td>lemons</td>
    <td>apples</td>
</tr>
</tbody>
<tfoot>
<tr>
    <td>red</td>
    <td>blue</td>
    <td>green</td>
</tr>

</tfoot>
</table>

</div>

</body>
</html>

Make a simple batch file wkhtmltoimage.bat

f:\temp\wkhtmltoimage --crop-h 250 --crop-w 200 http://localhost:8500/table.cfm f:\temp\outputfile.png

More command line options here

Use cfexecute to run the batch file

<cfexecute name="F:\temp\wkhtmltoimage.bat" timeout="20" variable="result"> 
</cfexecute>

Output is pretty nice

enter image description here

The windows installer libwkhtmltox-0.10.0_rc2.zip contains topdf and wkhtmltoimage

查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
4楼-- · 2019-06-21 22:58

check out <cfdocument format="PDF"> and <cfpdf action="thumbnail">

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)