html2canvas截取table合并单元格rowspan失效问题

我会带着你远行 2023-10-05 09:38 33阅读 0赞

1.表格定义

<table id="table" class="tableTitle">                            
    		<tr>                         
                 <td>序号</td>	  
                 <td>项目</td>   	               
                 <td>工作要求</td>	  
                 <td>是/否</td>	
                 <td>得分</td>	
    		</tr>       
    		<tr>
                 <td rowspan="5">1</td>	   
                 <td rowspan="5"><span style="width:100%;height:100%">路网运行监测系统</span></td>	
                 <td>是否开展相关工作</td>	   
                 <td>      
                     <div id="field1" name="field1" class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical" 
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                           
                 </td>	         
                 <td rowspan="5"><input name="field6" id="field6" class="mini-textbox inputStyle" enabled="false"/></td>	     
    		</tr>    
    		<tr>
                 <td>是否实现部省应用系统互联互通</td>	   
                 <td>  
                     <div id="field2" name="field2"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                      
                 </td>	
    		</tr>  
    		<tr>
                 <td>系统数据是否能覆盖全省普通国省道范围</td>	   
                 <td> 
                     <div id="field3" name="field3"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                       
                 </td>	
    		</tr> 
    		<tr>
                 <td>系统功能是否适用</td>	   
                 <td>
                     <div id="field4" name="field4"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	
    		</tr>  
    		<tr>
                 <td>系统是否具有先进性</td>	   
                 <td>
                     <div id="field5" name="field5"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	
    		</tr>   
    		<tr>
                 <td rowspan="5">2</td>	
                 <td rowspan="5">省级综合养护管理系统</td>	
                 <td>是否开展相关工作</td>	   
                 <td>
                     <div id="field7" name="field7"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	  
                 <td rowspan="5"><input name="field12" id="field12" class="mini-textbox inputStyle" enabled="false"/></td>	
    		</tr> 
    		<tr>
                 <td>是否实现路况评定功能</td>	   
                 <td>
                      <div id="field8" name="field8"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	
    		</tr>  
    		<tr>
                 <td>是否实现养护需求分析功能</td>	   
                 <td>
                      <div id="field9" name="field9"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	
    		</tr> 
    		<tr>
                 <td>是否实现建立养护项目库功能</td>	   
                 <td>
                      <div id="field10" name="field10"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	
    		</tr>  
    		<tr>  
                 <td>系统是否具有先进性</td>	   
                 <td>
                      <div id="field11" name="field11"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	
    		</tr>  
    		<tr>
                 <td rowspan="2">3</td>	
                 <td rowspan="2">智慧公路建设</td>	
                 <td>是否开展相关工作</td>	   
                 <td>
                      <div id="field13" name="field13"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	  
                 <td rowspan="2"><input name="field15" id="field15" class="mini-textbox inputStyle" enabled="false"/></td>	
    		</tr>   
    		<tr>
                 <td>是否取得一定成效</td>	      
                 <td>   
                      <div id="field14" name="field14"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                        data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
                 </td>	
    		</tr>               
    	 </table>

2.表格样式设置

/*设置表格头部样式*/
    .tableTitle{        
    	width:100%;
    	border-collapse:collapse;
    	border:1px solid #000000;
    }    
        
    /*设置表格行样式*/
    .tableTitle tr{          
    	border:1px solid #000000
    }  
    
    /*设置表格列样式*/
    .tableTitle td{        
    	border:1px solid #000000 ;
    	width:70px;
    	text-align:center;
    	height:35px;
    	line-height:35px; 
    	color:black
    }  
    
    /*设置输入框样式*/
    .inputStyle{        
    	width:97%;
    	margin:5px
    }  
    
    /*设置文本输入框表格样式*/
    .textareaTd{        
    	border:1px solid #000000 ;
    	text-align:center;
    	height:45px;
    	line-height:45px;
    }  
    
    /*设置单选框表格样式*/
    .mini-radiobuttonlist table{
        border:0px;  
        margin:auto;
        padding:auto;
     }  
      
    /*设置单选框表格行样式*/
    .mini-radiobuttonlist table tr{          
    	border:0px solid #000000
    }  
    
    /*设置单选框表格列样式*/
    .mini-radiobuttonlist table td{        
    	border:0px solid #000000 ;
    	width:120px;  
    	text-align:center;  
    	height:35px;
    	line-height:35px; 
    	color:black;
    	vertical-align:middle;  
    }

3.页面表格，带合并显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70][]

4.生成的图片，不认rowspan

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1][]

5.原因分析：给table的tr设置过样式，去掉tr的样式即可.tableTitle tr

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200905110516741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200905110650467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200905110827461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70