将HTML表转换为图像文件

问题描述：

有什么办法将HTML表转换为图像文件？我有一个HTML表格，其中包含像Labels，GridView和CheckBoxes这样的控件。我们如何将此表转换为用于创建PDF文件的图像文件？将HTML表转换为图像文件

你将不得不模拟浏览器的渲染。对我来说，这似乎是一项非常体面的任务。 – 2013-03-22 16:15:11

它需要首先成为图像吗？ PDF生成器应该采取HTML罚款。 – MikeSmithDev 2013-03-22 16:17:25

MikeSmithDev：我检查了PDF生成器，但没有得到确切的一个.. :( – MAC 2013-03-22 16:18:50

答

如果这是一个一次性的，加载它在浏览器中，并采取截图（按Alt-PrtScr上只是当前的应用程序窗口）

如果你需要重复做这件/以自动方式，您可以自动执行browser control或者您也可以使用模拟浏览器

你也应该看看WebKit2Png这会使以同样的方式为Chrome浏览器/其他WebKit浏览器的页面，然后将它保存为PNG格式。它可以选择模拟的JavaScript /等太

同样，有一个wkhtmltopdf这在所有平台上

答

这不是一个简单的任务工作。最终，你需要一个HTML渲染器来将HTML转换为像素。

幸运的是，你不需要自己写。您可以使用WebBrowser control。

您可以在文章Creating Website Thumbnails in ASP.NET中看到我写的一些代码，用于从给定的URL中提取缩略图图像。

我实际上做了类似的事情来创建网站缩略图，我会指出WebBrowser控件需要一个STA线程，在多线程环境中它可能有点复杂。一些关于模态对话的缺陷从未被清除，导致线程等待它最终被回收。我不是说不这样做，只是它有类似的问题来自动化服务器上的办公室 – Basic 2013-03-22 17:05:37

是的，我解决了STA问题在我的文章中如果你找到了一种避免这种情况的方法，请分享 – 2013-03-22 17:06:49

道歉Jonathan，我撇了撇嘴，没有发现，我做了几乎完全一样的事情 - 事实上，我有机会使用你的代码作为参考，它看起来很熟悉。我在一个多线程的控制台应用程序中使用它，它使事情变得有趣，并导致在用户桌面上显示“无法解释的”安全警告对话框/等。 – Basic 2013-03-22 17:15:11

答

转换HTML Table放到图像文件

  $("#selfAssessmentPowerPointDownload").on('mouseover', function() { 
 
       var element = $("#html-content-holder"); // global variable 
 
       var getCanvas; // global variable 
 
       html2canvas(element, { 
 
        onrendered: function (canvas) { 
 
         getCanvas = canvas; 
 
         var imgageData = getCanvas.toDataURL("image/png"); 
 
         var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
 
         $("#selfAssessmentPowerPointDownload").attr("download", "gridData.png").attr("href", newData); 
 
        } 
 
       }); 
 
      });

<button id="selfAssessmentPowerPointDownload">Download</button> 
 

 

 
<table id="html-content-holder"></table>

这是一个答案吗？当给出一个答案时，最好给出[一些解释，为什么你的答案]（http://stackoverflow.com/help/how-to-answer）是一个。 – 2017-03-24 06:25:38

答

Datatables是与表工作了强大的jQuery插件。数据表提供的选项之一是从你的表格中生成pdf或excel。你可以在它的网站上看到很多例子。

将HTML表转换为图像文件

相关推荐