2015-07-20 898 views
0

我採用以下插件來導出PNG表中的數據,如何在html2canvas中隱藏特定的dom元素?

<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> 

而像這樣的輸出, enter image description here 在這裏,我想隱藏「照片」和「選項」欄我檢查這個https://github.com/niklasvh/html2canvas/issues/126,但沒有得到它所以我該怎麼做。

+0

這是表格格式還是div格式? –

+0

@ BhavinSolanki-表格格式 –

回答

1

由於您有表格格式,因此您可以使用firs-childlast-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(); 

所以這樣你就不需要刷新頁面。

+0

它工作正常,我改變了

  • PNG
  • 但問題是,爲了顯示原始的實際輸出,它需要'頁面刷新',這是不方便的。我們可以在插件本身或者你的任何新想法中解決這個問題嗎? –

    +0

    完成html2canvas渲染後,你需要調用.show()來隱藏()元素,這樣你就不需要刷新頁面 –

    +0

    我有更新代碼show hide()td ....你需要添加完成h2ml2canvas渲染後 –