vue中使用window.print打印效果

项目要求

  • 打印每页有10行表格,如果接口数据没有十个显示10行

效果图

  • 第一页

  • 第二页

子组件

		<template>
<div>
<div class="print" :key="i" v-for="i in Len">
<p class="print-title">打印页面</p>
<div class="print-header">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione officiis quaerat dolorem nesciunt error et fugit fuga molestias quas labore autem, eligendi eum rem alias quod possimus quae voluptatum? Id?
</div>
<div class="print-layout">
我是来占位置的
</div>
<ul class="print-table">
<li class="first-li">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>电话</span>
<span>住址</span>
</li>
<li class="main-li" v-for="(item,index) in 10" :key="item">
<span v-if="dataList[index+10*(i-1)]">{{item+(10*(i-1))}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].name}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].sex}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].age}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].phone}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].address}}</span>
<span v-else></span>
</li>
</ul>
<div class="print-footer">
我是底部信息
</div>
</div>
</div>
</template>
<script>
export default {
props: ['itemList'],
data() {
return {
dataList: []
}
},
computed:{
Len(){
if(this.dataList.length<=0) {
return 1;
}
else{
return Math.ceil(this.dataList.length/10.0);
}
}
},
created() {
this.dataList = this.itemList || [];
this.dataList=[...this.dataList];
}
}
</script>
<style lang="less">
@media screen {
.print {
display: none;
}
}
@media print {
#app {
display: none;
}
.print {
display: block;
}
}
* {
margin: 0;
padding: 0;
}
ul,li {
list-style-type: none;
}
.print {
page-break-before:always;
width: 297mm;
height: 209mm;
padding: 24px 30px 0 30px;
box-sizing: border-box;
.print-title {
font-size: 18px;
}
.print-header {
height: 146px;
padding-top: 15px;
box-sizing: border-box;
font-size: 14px;
}
.print-layout {
height: 184px;
border: 1px solid #45484d;
box-sizing: border-box;
font-size: 14px;
}
.print-table {
height: 293px;
margin-top: 5px;
border: 1px solid #303339;
box-sizing: border-box;
li {
height: 26px;
border-bottom: 1px solid #dadadc;
box-sizing: border-box;
&:last-child {
border-bottom: none;
}
span {
display: inline-block;
width: 16%;
height: 26px;
vertical-align: top;
line-height: 26px;
text-align: center;
border-right: 1px solid #dadadc;
box-sizing: border-box;
color: #2b2e34;
font-size: 12px;
&:last-child {
border-right: none;
}
}
&.first-li {
height: 30px;
background: #bdbec0 !important;
color: #2b2e34;
span {
height:30px;
line-height: 30px;
}
}
&.main-li { }
} }
.print-footer {
height: 115px;
font-size: 14px;
padding-top: 10px;
box-sizing: border-box;
}
}
</style>

父组件

	<template>
<div class="index">
<button @click="handleClick">点击</button>
<button @click="printClick">打印</button>
<!-- 打印页面 -->
<div v-if="printShow" >
<Print :itemList="itemAjax" ref="printDom"></Print>
</div>
</div>
</template>
<script>
import Print from '../components/print.vue'; export default {
data() {
return{
printShow: false,
itemAjax: [
{
name: '杜二',
sex: '女',
age: '17',
phone: 112365478961,
address: '浙江'
},
{
name: '张三',
sex: '男',
age: '18',
phone: 112365478966,
address: '上海'
},
{
name: '李四',
sex: '男',
age: '38',
phone: 112365478968,
address: '南京'
},
{
name: '王麻子',
sex: '男',
age: '28',
phone: 112365478969,
address: '苏州'
},
{
name: '王大',
sex: '女',
age: '18',
phone: 112365478970,
address: '杭州'
},
{
name: '杜二',
sex: '女',
age: '17',
phone: 112365478971,
address: '浙江'
},
{
name: '张三',
sex: '男',
age: '18',
phone: 112365458966,
address: '上海'
},
{
name: '李四',
sex: '男',
age: '38',
phone: 112365878968,
address: '南京'
},
{
name: '王麻子',
sex: '男',
age: '28',
phone: 112365978969,
address: '苏州'
},
{
name: '王大',
sex: '女',
age: '18',
phone: 112365108970,
address: '杭州'
},
{
name: '杜二',
sex: '女',
age: '17',
phone: 112365474971,
address: '浙江'
}
]
}
},
methods: {
handleClick() {
alert('点击事件')
},
printClick(){
this.printShow = true;
this.$nextTick(()=>{
const print = this.$refs.printDom.$el;
document.body.appendChild(print);
window.print();
this.printShow = false;
})
}
},
components: {
Print
} }
</script>

window.print打印方法实现的更多相关文章

  1. window.print() 打印页面部分内容的方法

    用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.pri ...

  2. 用window.print()打印指定div里面的内容(转载的)

    用window.print()打印指定div里面的内容 今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了 <!--window.p ...

  3. 用window.print()打印指定div里面的内容

    用window.print()打印指定div里面的内容 今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了 <!--window.p ...

  4. Web window.print() 打印

    web打印 window.print() 我只给出比较有效的,方便的打印方法,有些WEB打印是调用ActiveX控件的,这样就需要用户去修改自己IE浏览器的Internet选项里的安全里的Active ...

  5. window.print()打印页面指定内容(使用iframe保证原页面不失效)

    使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来 ...

  6. window.print打印指定html元素中的内容

    通常有些时候我们项目过程中使用到打印功能,而wndow.print便是系统里提供的一个函数. 但是直接使用的话,它打印的将是整个页面的所有元素,而有些时候我们又只需要打印部分内容. <body& ...

  7. 用window.print()打印如何去掉页眉和页脚

    用window.print()打印如何去掉页眉和页脚 2007-07-12 11:44:52|  分类: javascript 知识|举报|字号 订阅     <script language= ...

  8. window.print()打印网页(一)

    有时候需要将网页内容打印到纸上,最简单的一种方法是用window对象的print方法. window.print()默认打印当前网页的所有部分.(除了背景,默认打印都是白底黑字,如果有特别的设置 要另 ...

  9. window.print打印指定div

    window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢? 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. <html> <head& ...

随机推荐

  1. Spring点滴四:Spring Bean生命周期

    Spring Bean 生命周期示意图: 了解Spring的生命周期非常重要,我们可以利用Spring机制来定制Bean的实例化过程. -------------------------------- ...

  2. 【Cf #503 C】Sergey's problem(有趣的构造)

    感觉这种构造题好妙啊,可我就是想不到诶. 给出一张无自环的有向图,回答一个独立集,使得图中任意一点都可以被独立集中的某一点两步之内走到. 具体构造方案如下: 下标从小到大枚举点,如果该点没有任何标记, ...

  3. Android Log详解(Log.v,Log.d,Log.i,Log.w,Log.e)

    1.Log.v 的调试颜色为黑色的,任何消息都会输出,这里的v代表verbose啰嗦的意思,平时使用就是Log.v("",""); 2.Log.d的输出颜色是蓝 ...

  4. 【bzoj4826】影魔

    Portal --> bzoj4826 Solution 为什么莫名读了很长时间的题...== 逐渐不会语文qwq 貌似这题的做法很多,丢上来的话是因为..这个化简条件的过程莫名爽哈哈哈哈哈 注 ...

  5. 使用spring cache和ehcache

    一.spring cache Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中,等到下次利用同样的参数来调用该 ...

  6. ORB原理与源码解析

    转载: http://blog.csdn.net/luoshixian099/article/details/48523267 CSDN-勿在浮沙筑高台 没有时间重新复制代码,只能一股脑的复制,所以代 ...

  7. laravel mapSpread 例子

    $collection = collect(range(1, 9)); $chunks = $collection->chunk(2); $labeld = $chunks->mapSpr ...

  8. K8S之Secret

    目录 简介 创建secret 1.加密用户名密码 2.加密证书文件 使用secret 1.使用volume挂载方式 2.将secret用于env 简介 secret顾名思义,用于存储一些敏感的需要加密 ...

  9. ElasticStack系列之十六 & ElasticSearch5.x index/create 和 update 源码分析

    开篇 在ElasticSearch 系列十四中提到的问题即 ElasticStack系列之十四 & ElasticSearch5.x bulk update 中重复 id 性能骤降,继续这个问 ...

  10. CF&&CC百套计划2 CodeChef December Challenge 2017 Chef and Hamming Distance of arrays

    https://www.codechef.com/DEC17/problems/CHEFHAM #include<cstdio> #include<cstring> #incl ...