vue导出word表格随记

一、我们有时候会遇到这样的业务：将页面展示的表格导出为word表格且每部分都要另取一页。

本文主要记录完成另取一页这个功能的解决办法。

思路：将页面上我们需要导出的html代码摘取下来整合后进行word导出。

根据设置的ref(vue获取元素节点的一个方法)获取我们需要的html，然后进行拼接，最后在我们需要另取一页的地方拼上这段代码：

这里需要注意一下：这段代码如果是在你获取的html里面的话，那它的效果是换行。可以这样理解，这段代码没有父节点的话是另取一页，有父节点的话是换行。

以上仅供参考，希望可以提供一个解决问题的思路。 

二、到表格的列宽设置

实际操作中发现直接在标签上设置宽度的方法在导出的word中没效果，如下

这种方式在网页上有用但是在word却是没效果的，可以这样设置 

利用 标签对table表格进行设置。

一下是部分导出页面代码（不包含js和css）

                
                  

                    
                      
                      
                      
                    
                    

                      

                      
                        {{
                          tpTitle + "(评委姓名：" + ExpertObJECT.ExpertName + ")"
                        }}
                      
                        
                      
                    
                    

                      

                        {{
                          numIndex +
                          1 +
                          (Detail.name == "技术评审"
                            ? "、技术因素(满分"
                            : "、商务因素(满分") +
                          Detail.Score +
                          "分)"
                        }}
                      
                    
                    

                      
序号
                      
评分界定
                      
分值
                      

                        {{ Item.EnterpriseName }}
                      
                    

                    

                      

                        {{ numIndex + 1 + "-" + (indexitem + 1) }}
                      
                      
{{ Enterprise.TmpMenuItemName }}
                      
{{ Enterprise.RuleInfoScore }}
                      

                        {{
                          scopeitem.ItemList[indexitem].ValueScoreAgain
                        }}
                      
                    
                    

                      
                      

                      
合计
                      

                      

                        {{ scopeitem.QualifiedRemark }}
                      
                    
                  
                      

                        

                          {{
                            numIndex +
                            2 +
                            (tableItem.name == "技术评审"
                              ? "、技术因素(满分"
                              : "、商务因素(满分") +
                            tableItem.Score +
                            "分)"
                          }}
                        
                      
                      

                        
序号
                        
评分界定
                        
分值
                        

                          {{ Item.EnterpriseName }}
                        
                      

                      

                        

                          {{ numIndex + 2 + "-" + (indexitem + 1) }}
                        
                        
{{ Enterprise.TmpMenuItemName }}
                        
{{ Enterprise.RuleInfoScore }}
                        

                          {{
                            scopeitem.ItemList[indexitem].ValueScoreAgain
                          }}
                        
                      
                      

                        
                        

                      
合计
                      

                        

                          {{ scopeitem.QualifiedRemark }}
                        
                      
                      

                        
备注
                        

                          
                            {{remarkItem.remarkName}}得分说明：{{contentitem}};
                          
                        
                      
                      

                        

                          评委签字：