起因:
做打印页面功能,页面中有el-table元素,发现弹出来的打印页面,只打印了几个table列,还有好几个列没打印。
然后看代码,用到的方法是: window.print();并不是这个方法错了,百度上说是el-table的宽度什么的,是有些bug的。目前还不知道具体bug在哪里。
经过:
1、首先我调整el-table-column width=“300” 的width为很小,结果效果很丑。而且效果不好。
2、(成功方法)用其他打印插件、使用了这两个插件
import html2canvas from ‘html2canvas’;
import printJs from ‘print-js’;
在使用这两个插件的基础下,还得
用原生的table代替了el-table才实现不同分辨率屏幕下都可以打印的全el-table,不缺失列的效果。
实现原因:
使用了 printJs转图片打印,所以打印table都显示全了,没有出现缺失的情况。
上代码:
<template>
<div>
<el-card shadow="never" >
<el-button v-print="printObj">nb打印</el-button>
<el-button @click="onPrint">printJs打印</el-button>
<table ref="printId" id="printId" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<td>名称1</td>
<td>地点2</td>
<td>时间3</td>
<td>武汉4</td>
<td>北京5</td>
<td>上海6</td>
<td>广州7</td>
<td>深圳8</td>
<td>杭州9</td>
<td>香港10</td>
<td class="class-width">名称11</td>
<td>成都12</td>
</tr>
</thead>
<tbody v-if="list.length">
<tr v-for="item in list">
<td>{{item.name1}}</td>
<td>{{item.name2}}</td>
<td>{{item.name3}}</td>
<td>{{item.name4}}</td>
<td>{{item.name5}}</td>
<td>{{item.name6}}</td>
<td>{{item.name7}}</td>
<td>{{item.name8}}</td>
<td>{{item.name9}}</td>
<td>{{item.name10}}</td>
<td>{{item.name11}}</td>
<td>{{item.name12}}</td>
</tr>
</tbody>
</table>
<div v-if="!list.length" class="table-empty">
<span class="table-empty-text">暂无数据</span>
</div>
</el-card>
</div>
</template>
<script>
import html2canvas from 'html2canvas';
import printJs from 'print-js';
export default {
name: "",
data() {
return {
list: [],
printObj:{
id:"printId",
popTitle:" ",
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printId { width: 100%; !important; } <style>'
},
nameList: ["香蕉","苹果","梨子","葡萄","哈密瓜","车厘子","草莓","榴莲","石榴","黄瓜","圣女果"]
};
},
mounted() {
const len = Math.ceil(Math.random()*20);
for (let i = 0; i < len; i++) {
this.list.push({
name1: this.createName(i),
name2: this.createName(i),
name3: this.createName(i),
name4: this.createName(i),
name5: this.createName(i),
name6: this.createName(i),
name7: this.createName(i),
name8: this.createName(i),
name9: this.createName(i),
name10: this.createName(i),
name11: this.createName(i) + "我很长" + new Date().getTime(),
name12: this.createName(i)
});
}
},
methods: {
createName(index){
const name = this.nameList[Math.ceil(Math.random()*10)];
return name + index + Math.ceil(Math.random()*100);
},
// printJs转图片打印
onPrint() {
const printContent = this.$refs.printId;
// 获取dom 宽度 高度
const width = printContent.clientWidth;
const height = printContent.clientHeight;
// 创建一个canvas节点
const canvas = document.createElement('canvas');
const scale = 4; // 定义任意放大倍数,支持小数;越大,图片清晰度越高,生成图片越慢。
canvas.width = width * scale; // 定义canvas 宽度 * 缩放
canvas.height = height * scale; // 定义canvas高度 *缩放
canvas.style.width = width * scale + 'px';
canvas.style.height = height * scale + 'px';
canvas.getContext('2d').scale(scale, scale); // 获取context,设置scale
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度
html2canvas(printContent, {
canvas,
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight,
scrollX: -scrollLeft, // 解决水平偏移问题,防止打印的内容不全
scrollY: -scrollTop
}).then((canvas) => {
const url = canvas.toDataURL('image/png')
printJS({
printable: url,
type: 'image',
documentTitle: '', // 标题
style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚
})
}).catch(err=>{
console.error(err);
})
}
}
};
</script>
<style lang="scss" scoped>
table {
font-family: Arial, sans-serif;
font-size: 14px;
background-color: #f0f2f5;
border-collapse: collapse;
color: #454545;
table-layout: auto;
width: 100%;
text-align: center;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dadcde;
thead {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dadcde;
line-height: 40px;
font-weight: bold;
color: #454c70;
}
tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dadcde;
line-height: 23px;
}
td{
padding: 5px 10px;
font-size: 14px;
font-family: Verdana;
width: 100px;
word-break: break-all; // 元素换行
}
// 斑马纹效果stripe
tr:nth-child(even) {
background: #F5F7F9;
}
tr:nth-child(odd) {
background: #FFF;
}
}
.table-empty {
min-height: 60px;
text-align: center;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #ebeef5;
.table-empty-text {
line-height: 60px;
width: 50%;
color: #909399;
}
}
</style>
插件下载
npm install --save print-js
npm install --save html2canvas
转载:https://www.cnblogs.com/scallop/p/14184580.html
由于公司项目涉及保密xxx,所以图片什么的不展示。这个方法实现是可以解决table显示不全的问题,但是并没有真正的解决el-table打印显示不全的问题,因为以上方法还是用了原生table替代了el-table才得以解决问题,所以要是有人有办法真正实现,直接打印el-table可以打印全,那么可以评论一下,互相交流学习一下。