Vue3导出el-table为word文件（含图片）

之前整理了el-table转excel文件的写法，但是如果表格中包含图片，excel是不能正常显示出来的，所以我们可以换成word文件来导出。

同样，我们仍然是一个表格用于分页展示

另一个隐藏的表格用于导出功能

这里设置了id

这种写法的另一个好处是，表格中的图片转word只能通过原生的属性设置来控制大小，而我们通常在表格中使用的是带有图片预览的组件，不存在原生属性，导出后的样式控制十分麻烦

但是分成两个表格的话，外面可以正常使用图片预览组件，导出用的表格就换原生的img标签啦（反正也没人看）

说了这么多，怎么转word才是关键

首先要安装依赖

npm install html-docx-js -S
npm install file-saver -S

导入

import htmlDocx from 'html-docx-js/dist/html-docx';
import FileSaver from 'file-saver';


//导出
const exportBtn = () => {
    const el = document.getElementById('tab').innerHTML;
    console.log(el);
    let cssHTML = `
        .el-table__inner-wrapper{
        width: 100%;
        }
		    table {
		    width: 100% !important;
		    table-layout: fixed;
		    margin-top:10px;
		    border: 1px solid #ddd;
		    border-collapse: collapse;
		    }
        col {
          width: auto !important;
        }
		    .export-tb .thead td {
		    font-weight: bold;
		    }
		    td {
		    border: 1px solid #ddd;
		    color: #333;
		    text-align: left;
		    padding: 6px 10px;
		    }`;

    let content = `
    	 	
            	
	                
	                
	            
	            
	                
                  		${el}
                	
	            
            `;
    let converted = htmlDocx.asBlob(content);
    FileSaver.saveAs(converted, '二维码.docx');
  };

这样就可以正常导出了

希望能为你带来帮助