使用ColdFusion从超文本标记语言生成图像
我有一个带有样式的超文本标记语言表格的ColdFusion页面。我希望能够做的是设置一个功能，允许我们的客户将表保存为图像文件，以便在他们的幻灯片放映中使用。我已经阅读了cfcontent的一些文档，但是，我开始感觉到我需要一个第三方库。我希望有人能解释清楚这件事。
回答 3
Stack Overflow用户
发布于 2011-09-21 07:14:23
您可以将html表呈现为静态页面，然后使用cfexecute调用http://code.google.com/p/wkhtmltopdf/以呈现为pdf，或者wkhtmltoimage可以转换为.png .gif等。
这是一个带有测试表和一些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>创建一个简单的批处理文件wkhtmltoimage.bat
f:\temp\wkhtmltoimage --crop-h 250 --crop-w 200 http://localhost:8500/table.cfm f:\temp\outputfile.png 更多命令行选项here
使用cfexecute运行批处理文件
<cfexecute name="F:\temp\wkhtmltoimage.bat" timeout="20" variable="result">
</cfexecute> 输出结果相当不错
windows installer libwkhtmltox-0.10.0_rc2.zip包含topdf和wkhtmltoimage
Stack Overflow用户
发布于 2011-09-21 02:45:54
查看<cfdocument format="PDF">和<cfpdf action="thumbnail">
Stack Overflow用户
发布于 2011-09-21 04:47:27
这可能不是你想要的，但cfsilence有一篇来自CF8时代的帖子，可能会有用：
初始帖子：http://cfsilence.com/blog/client/index.cfm/2008/4/4/Converting-HTML-To-An-Image-With-CFJava
后续：http://cfsilence.com/blog/client/index.cfm/2008/4/5/More-Thoughts-on-HTML-To-Image-Plus-Code
可能会让你开始...希望对您有帮助！
https://stackoverflow.com/questions/7490094
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号