关于打印整个页面的,没什么好说的。今天我给大家分享一个打印指定区域的方法,你想打印哪里,就打印哪里!

我也是刚刚开始接触打印这一块功能的,然后当然是找度娘深入了解了一番啦,期间试了网上的各种方法,有的压根就没效果;

有的可以实现打印部分区域的页面,但是在打印界面会丢失样式,那样子界面会很丑;下面我会列出网上的部分方法,以及我的方法。(插件我没有试过~)

网上方法一:(该方法我在vue页面使用没有做到指定区域打印,而是打印全部)

网上方法二:(该方法我在vue页面使用可以做到打印部分区域,但是样式会丢失)

我的实现方法:

打印前的页面

点击打印按钮后的页面

实现方法思路:既然是打印页面,那么我们不妨逆向思维推一下,肯定是页面显示什么,就会打印什么,所以,,

我们可以在点击打印按钮的时候,把不需要打印的内容全部隐藏,就可以啦(偷笑)。各位大佬如果有更加好的方法,记得留言分享哦

methods: {
// 点击打印按钮
clickPrinting() {
// 找到需要隐藏的DOM节点
let head = document.getElementsByClassName('gd-biz-header')[0];
let printBtn = document.getElementsByClassName('right-side')[0];
let from1 = document.getElementById('menu2');
let from2 = document.getElementsByClassName('two')[0];
let fclbz1 = document.getElementById('menu3');
let fclbz2 = document.getElementsByClassName('tables')[0];
let footer = document.getElementsByClassName('footer')[0];
let allBtn = document.getElementsByClassName('allBtn')[0]; // 给对应DOM添加class
head.classList.add("printHideCss")
printBtn.classList.add("printHideCss")
from1.classList.add("printHideCss")
from2.classList.add("printHideCss")
fclbz1.classList.add("printHideCss")
fclbz2.classList.add("printHideCss")
footer.classList.add("printHideCss")
allBtn.classList.add("printHideCss") window.print(); // 调用打印功能
window.location.reload(); // 点击取消打印后刷新页面,恢复点击打印按钮之前的原始数据
},

版权声明:本文为博主原创文章,转载需注明出处。https://www.cnblogs.com/silent007/p/9960435.html

一个程序猿开了一个公众号,喜欢的朋友可以关注一下哦《时间的信箱》

***************************************    END   ***************************************

vue项目-打印页面中指定区域的内容(亲测有效!)的更多相关文章

  1. web页面实现指定区域打印功能

    web页面实现指定区域打印功能 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="t ...

  2. 前端Vue项目——登录页面实现

    一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...

  3. vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)

    vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

  4. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

  5. 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

    最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...

  6. Linux中oracle的安装,亲测

    一.下载oracle的软件包 地址: http://www.oracle.com/technetwork/database/enterprise-edition/downloads/112010-li ...

  7. 前端Vue项目——购物车页面

    一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...

  8. VUE项目实现页面跳转

    打开一个VUE项目,目录结构是这样的: 如现在有两个页面aaa和HelloWorld,路由配置在index.js中: import Vue from 'vue' import Router from ...

  9. vue+element打印页面功能

    项目中遇到了要打印页面的功能,我感之前使用的是一个第三方的插件,但是不兼容IE,后来发现直接调用window的API就可以了,MMP // 打印表单 printBtn() { window.print ...

随机推荐

  1. stand up meeting 11/17/2015

    今日工作总结: 冯晓云:代表组内参加了北航软工M1检查,有幸在工作展开之前先观摩别人的工作,吸取经验和教训:现在看来,当时对往届ASE学员的采访还不够深入,只说统筹分工团结合作还是有些空,具体的任务划 ...

  2. 如果这篇文章说不清epoll的本质,那就过来掐死我吧!

    转载自:https://www.toutiao.com/i6683264188661367309/ 目录 一.从网卡接收数据说起 二.如何知道接收了数据? 三.进程阻塞为什么不占用cpu资源? 四.内 ...

  3. asp.net core web api + Element-UI的Vue管理后台

    后端:asp.net core web api + EF Core 前端:VUE + Element-UI+ Node环境的后台管理系统. 线上地址:http://www.wangjk.wang/ 密 ...

  4. Mybatis源码详解系列(三)--从Mapper接口开始看Mybatis的执行逻辑

    简介 Mybatis 是一个持久层框架,它对 JDBC 进行了高级封装,使我们的代码中不会出现任何的 JDBC 代码,另外,它还通过 xml 或注解的方式将 sql 从 DAO/Repository ...

  5. BUUOJ Misc刷题大作战

    你竟然赶我走 随便一个txt文件都可以拿 LSB 当然还有别的,根据里面左右左右变化,在0管道有变化,然后把下面的三个0打钩,导出png,一个二维码,扫出来 乌镇峰会种图 只要会用winhex打开文件 ...

  6. code-breaking picklecode中对signed_cookies引擎分析

    最近做了 ph 牛的 code-breaking,在做 picklecode 这一题时,没有搞懂那个 django 的 signed_cookies 引擎对 session 的操作,就 debug 了 ...

  7. python里的内置函数你知道有多少个吗?

    Python 内置函数最全汇总: 1 abs() 绝对值或复数的模 2 all() 接受一个迭代器,如果迭代器的所有元素都为真,那么返回True,否则返回False 3 any() 接受一个迭代器,如 ...

  8. python-用户输入和while循环

    函数input() 比较大小要同类型: age=iput() 21 age=int(age) age>=10 true prompt = "If you tell us who you ...

  9. 【原创】Linux RCU原理剖析(二)-渐入佳境

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  10. 挑战全网最幽默的Vuex系列教程:第三讲 Vuex旗下的Mutation

    写在前面 上一讲「Vuex 旗下的 State 和 Getter」,告诉了我们怎么去使用仓库 store 中的状态数据.当然,光会用肯定还不够,大部分的应用场景还得对这些状态进行操控,那么具体如何操控 ...