通过调用浏览器自带的打印功能，完成对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;
// 新建一个 DOM
const 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>