vue中打印表格,打印不全的问题
html部分
<TableDetails
class="table-box"
ref="inventoryDetails"
></TableDetails>
js打印部分
// 打印
toPrint () {
console.log('this.$refs.inventoryDetails', this.$refs.inventoryDetails)
this.$print(this.$refs.inventoryDetails)
}
css部分,使用媒体查询加zoom
@media print {
.table-box {
zoom: 60%;
}
1.zoom介绍
其实在CSS中的Zoom这个属性一般不为人知,甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。
2.zoom和transform:scale()的区别
zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来)做出页面后,再对页面进行缩放以兼容其他屏幕宽度。
3.css中的zoom的使用
zoom : normal | number
normal : 默认值。使用对象的实际尺寸
number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可 以是数值,也可以是百分比。如:zoom:1,zoom:120%。
ps:网上都说是ie的专有属性,亲测chrome下也可以使用;(Firefox浏览器不支持)
zoom属性相关的问答: