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

最新推荐文章于 2024-08-05 10:03:18 发布

四时之雨

最新推荐文章于 2024-08-05 10:03:18 发布

阅读量746

点赞数 11

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_68695044/article/details/135489964

版权

本文介绍了如何在el-table中处理包含图片的情况，通过将表格转换为HTML并利用html-docx-js库和file-saver模块，实现图片保持预览样式的同时导出为Word文档，解决Excel无法正常显示图片的问题。

摘要由CSDN通过智能技术生成

之前整理了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 = `
    	 	<!DOCTYPE html><html>
            	<head>
	                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	                <style>
	                    ${cssHTML}
	                </style>
	            </head>
	            <body>
	                <table>
                  		${el}
                	</table>
	            </body>
            </html>`;
    let converted = htmlDocx.asBlob(content);
    FileSaver.saveAs(converted, '二维码.docx');
  };

这样就可以正常导出了