通过调用浏览器自带的打印功能，完成对table数据的打印
（打印表格必须要去掉表头中的fixed属性，每一列的宽度可以通过 width 来控制）
<el-table-column width='100' prop="code" label=""> </el-table-column>
代码
<template><div><el-button @click="PrintForm('printData')">打印表格</el-button><el-table :data="tableData" style="width: 100%" id="printData"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div>
</template><script>
export default {name: "",data() {return {tableData: [{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,tag: "家",},{date: "2016-05-04",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1517 弄",zip: 200333,tag: "公司",},{date: "2016-05-01",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1519 弄",zip: 200333,tag: "家",},{date: "2016-05-03",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1516 弄",zip: 200333,tag: "公司",},],};},created() {},watch: {},props: {},methods: {//打印页面内容PrintForm(id) {// 空页面let printStr ="<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";// 定义element-ui table组件的样式const tabStyle = `<style>table{width:100%;display:table-cell!important;box-sizing:border-box;}.el-table__header,.el-table__body,.el-table__footer{width:100%!important;border-collapse: collapse;text-align:center;}table,table tr th, table tr td { border:1px solid #ddd;color:#606266;word-wrap:break-word}table tr th,table tr td{padding:5 10px;word-wrap:break-word }.el-table__body, tr td .cell{width:100%!important}.el-table th.gutter{display: none;}.el-table colgroup.gutter{display: none;}</style><body>`;let content = "";// 获取名为传入id的 dom元素内的内容const html = document.getElementById(id).innerHTML;// 新建一个 DOMconst div = document.createElement("div");const printDOMID = "printDOMElement";div.id = printDOMID;div.innerHTML = html;// elment ui 的表格中表头与内容是用的两个表格去渲染的 所以这里要做拼接// 提取第一个表格的内容 即表头const ths = div.querySelectorAll(".el-table__header-wrapper th");const ThsTextArry = [];for (let i = 0, len = ths.length; i < len; i++) {if (ths[i].innerText !== "") ThsTextArry.push(ths[i].innerText);}// 删除多余的表头div.querySelector(".hidden-columns").remove();// 第一个表格的内容提取出来后已经没用了 删掉div.querySelector(".el-table__header-wrapper").remove();// 将第一个表格的内容插入到第二个表格let newHTML = "<tr>";for (let i = 0, len = ThsTextArry.length; i < len; i++) {newHTML +='<td style="text-align: center; font-weight: bold">' +ThsTextArry[i] +"</td>";}newHTML += "</tr>";div.querySelector(".el-table__body-wrapper table").insertAdjacentHTML("afterbegin", newHTML);let str = div.innerHTML;// 拼接空页面+style样式+dom内容content = content + str;printStr = printStr + tabStyle + content + "</body></html>";// 打开新页面let pWin = window.open("_blank");// 将内容赋值到新页面pWin.document.write(printStr);// 使用setTimeout，等页面dom元素渲染完成后再打印。setTimeout(() => {pWin.print(); // 调用打印功能。pWin.close(); // 关闭 打印创建的当前页面}, 300);},},
};
</script><style lang="less" scoped>
</style>
