如何将 html 表格保存为图像以供客户保存在他们的计算机上
Posted
技术标签:
【中文标题】如何将 html 表格保存为图像以供客户保存在他们的计算机上【英文标题】：How to save html table as an image for client to save on their computer 【发布时间】：2012-11-02 04:52:29 【问题描述】：我有一个网站，它从用户粘贴到文本区域的某些行生成一个表格（使用 php 回显一个表格）。我希望我的客户能够将这张表保存在他们的机器上。这是我到目前为止找到的http://html2canvas.hertzen.com/，但不知道如何使用它。同样在未来的某个时候，我希望它有一个“在 facebook 上分享”按钮，以便将图像上传到他们的 facebook 帐户。
我已经在 Google 上搜索了 2 天，但没有任何结果，我能找到的所有结果都像 php 函数一样将图像保存到服务器而不是客户端计算机。任何帮助将不胜感激。
【问题讨论】：
必须是图片吗？即时生成 PDF 就足够了吗？ 必须是稍后在facebook上发布的图像 【参考方案1】：您可以为此使用画布。只需将所有数据放在画布中，您将获得图像输出。一个更好的例子可以是found here
<html>
<body>
<style type="text/css">
table
border=5;
</style>
<p><canvas id="canvas" style="border:2px solid black;" ></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
"<table><tr><td>HI</td><td>Welcome</td></tr><tr><td>Hello</td><td>World</td></tr> </table>" +
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], type: "image/svg+xml;charset=utf-8");
var url = DOMURL.createObjectURL(svg);
img.onload = function()
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
;
img.src = url;
</script>
</body>
</html>
【讨论】：
谢谢看起来正是我需要的。但是我不知道如何把我的桌子放到画布上，当我做画布时，画布仍然是空白的 在画布内添加一个 标签并在那里输入您的表格。然后在关闭canvas标签之前关闭div标签 只出现一个空白矩形 我希望您查看html5tutorial.info/html5-canvas-text.php 和developer.mozilla.org/en-US/docs/HTML/Canvas/…，因为这可能会有所帮助 如果您只是将 HTML 直接粘贴在 canvas 元素中，那么它会将其视为 fallback content (MDN)【参考方案2】：使用PHP GD 随时随地创建图像。
当调用 php 文件时，使用它会返回一个标头类型Content-type: image/png。 （注意：在这个 php 中，你不能将 html 和图片一起返回，因为我们将 header 类型定义为 image/png）
您也可以生成支持表格的 pdf 文件。生成 pdf 的最佳库是 FPDF
见fpdf中的表格生成示例here
链接：
PHP GD
FPDF
【讨论】：
输出图像是微不足道的...渲染 HTML 是棘手的部分，恐怕你不回答这个问题。 它必须是图像文件，因为无法在 Facebook 上发布 PDF。我也找不到任何东西可以在 PHP GD 中制作表格，但感谢您的及时回答 @brad 我同意你所说的。棘手的部分是为图像中的表格编写代码。但是通过GD绝对可以。例如，以 facebook 上的日历应用为例。他们抓取用户的图像并将其叠加在基本图像上。同样，@philip 可能应该使用分层来实现结果，但同样受到限制。 @SaiSasidhar，当然你可以用 GD 创建任何光栅图形，但这不是他想做的。他想渲染 HTML。仅靠 GD 无法做到这一点。以上是关于如何将 html 表格保存为图像以供客户保存在他们的计算机上的主要内容，如果未能解决你的问题，请参考以下文章