如何在html2canvas中隐藏特定的dom元素？

Question

我使用以下插件在PNG中导出表格数据，

<li><a href="#" onClick ="$('#datawtable').tableExport({type:'excel',escape:'false', ignoreColumn:[0, 4]});"> <img src='icons/xls.png' width='24px'> XLS</a></li>
<li><a href="#" onClick ="$('#datawtable').tableExport({type:'doc',escape:'false', ignoreColumn:[0, 4]});"> <img src='icons/word.png' width='24px'> Word</a></li>
<li><a href="#" onClick ="$('#datawtable').tableExport({type:'png',escape:'false'});"> <img src='icons/png.png' width='24px'> PNG</a></li>

<script type="text/javascript" src="js/tableExport.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>

这样的输出， 在这里，我想隐藏“照片”和“选项”列，我检查了这个https://github.com/niklasvh/html2canvas/issues/126，但没有得到它，所以我怎么能这样做。

Answer 1

由于您有表格格式，因此您可以使用firs-child和last-child来访问表格的第一列和最后一列。

$("#tableID th:first-child, #tableID th:last-child, #tableID td:first-child, #tableID td:last-child").hide();

OR

$("#tableID tr th:first-child, #tableID tr th:last-child, #tableID tr td:first-child, #tableID tr td:last-child").hide();

在使用html2canvas渲染之前，您需要隐藏元素。

在html2canvas渲染之后，你需要使用show（）函数来显示隐藏的td。所以它会像：

 $("#tableID th:first-child, #tableID th:last-child, #tableID td:first-child, #tableID td:last-child").show();

OR

 $("#tableID tr th:first-child, #tableID tr th:last-child, #tableID tr td:first-child, #tableID tr td:last-child").show();

因此，您不需要刷新页面。