利用VUE实现打印功能,前端中级工程师面试题

42 阅读3分钟

基础学习:

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计:HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互:JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

开源分享:docs.qq.com/doc/DSmRnRG…

1、 打印指定区域

npm install vue-print-nb --save

//安装好以后在main.js文件中引入

import Print from 'vue-print-nb'

Vue.use(Print); //注册

需要打印的区域

打印整个div

在这里插入图片描述

2、 调出当前页面打印,去除不需要的

template中

<el-button type="success" @click="print">打印全局

js中

methods: {

print() {

window.print(); // 打印

},

},

style中

@media print{

.noprint{ //不打印的部分,隐藏起来

display:none;

}

.print{ //要打印的部分,显示

display:block;

}

}

在这里插入图片描述

3、完整代码