前端js打印功能

vue 使用print.js实现前端打印功能 最近新接了一个需求,想要在前端实现打印功能,最开始试了window.print()这个方法,结果发现我想打印的图片它只能打印图片中的一部分,打印的不完整,如下图 调整了缩放比例之后发现还是不可以,后来又尝试了vue里面的一个插件vue-print-nb,但是当所有的东西都配置好之后,点击打印的时候竟然报错,大概意思是说我的css样式获取不到 然后我试了最后一种方法,亲测好使print.js... 阅读详情

今天学习到了一个小技能,记录一下,免得以后忘记了

 

前端打印页面功能

<!DOCTYPE>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="滚动条, scrollbar, 页面底部, 聊天窗口, " />
		<meta name="description" content="有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最 下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部。" />
		<title>将滚动条(scrollbar)保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口, </title>

		<style>
			@media print {
				.noprint {
					display: none
				}
			}
		</style>

	</head>

	<body>
		<div>
			<p class="noprint">我只显示不打印</p>
			<p>
				12<br />
				12<br />
				12<br />
				12<br />
			</p>
			<button id="dianji" type="button">dianji</button>
		</div>
	</body>

</html>
<script src="js/jquery-3.3.1.min.js"></script>

<script>
	$("#dianji").click(function() {
		if(window.ActiveXObject || "ActiveXObject" in window) {
			document.all.WebBrowser.ExecWB(7, 1);
		} else {
			window.print();
		}
	})
</script>

 

 

js 前端打印demo 前端打印demo,非常好用,简单 ,方便,复用性好,一次 立即下载

相关推荐

佳博GP-58L 小票打印机 js局部打印案例

佳博GP-58L 小票打印机 js局部打印案例

html打印指定区域内容,js print打印网页指定区域内容

比较简单的办法使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。细如下:代码如下.noprint{visibility:hidden}要打印的内容。哈哈!代码如下将不打印的代码放在这里。打印方法二利用js来操作代码如下function preview(){bdhtml=window.document.body.innerHTML;sprnstr="";eprns...

weixin_33411550的博客 1007

java实现web的打印

java实现web的打印,可以分页打印,可以批量打印,可以根据格式选择打印

vue使用PrintJS插件打印

第一步,先安装 print-js 插件 npm install print-js --save 第二步,在想要打印的Vue页面引入组件 import print from 'print-js'; 第三步,在想要局部打印的 div 上 添加 id <div id="codeList"> <!-- page-break-after 属性 是分页 --> <div v-for="i in 10" style="page-break-after: a

qq826303461的博客 2798

Understanding Lockup Cells

工具会分析扫描链和EDT逻辑之间的控制时序元素的时钟的时序关系,当必须要同步时钟并保持数据完整性时插入边沿触发寄存器(lockup cells)。可以使用report_edt_lockup_cells命令来展示工具已经插入的lockup cells的详细报告。

weixin_44954910的博客 1082

如何用Python实现SPEI指数计算?从数据准备到结果可视化完整指南

本文提供了一份完整的Python实现SPEI指数计算指南,涵盖从数据准备、潜在蒸散量计算到结果可视化的全流程。详细介绍了使用Thornthwaite方法计算PET、拟合三参数log-logistic分布以及标准化转换的核心算法,并提供了模块化代码和可视化方案,帮助用户构建可复用的干旱分析工具。

cola5的博客 269

js打印WEB页面内容代码大全

第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。 详细如下: <style media=print type="text/css"> .noprint{visibility:hidden} </style> 要打印的内容。哈哈!<p class="noprint">将不打...

weixin_30312557的博客 1042

【STM32实战】利用STM32CubeMX配置PWM互补输出驱动电机

本文详细介绍了如何利用STM32CubeMX配置STM32高级定时器的PWM互补输出功能,以驱动电机等需要半桥/全桥电路的应用。通过图形化界面设置定时器参数、使能互补通道并配置关键的死区时间,结合代码示例演示了如何启动PWM输出和动态调整占空比,确保输出安全、精确的互补信号,避免MOS管直通风险,提升驱动可靠性。

weixin_29161785的博客 536

iframe打印底部高度问题

我使用了jQuery 的打印插件 printThis.js,但它打印的方式是在body下创建一个iframe,然后放入你打印的内容在iframe 里面。

qq_23237041的博客 489

VIVADO中的IP核在MATLAB中仿真

VIVADO中的IP核在MATLAB中仿真项目简述VIVADO建立FFT IP核MATLAB调用FFT IP核 项目简述 我们都会用MATLAB进行算法验证,但是经常会发现如果VIVADO中调用了IP核,那么最终会发现VIVADO与MATLAB之间的数据不可以统一的对应起来。那么,MATLAB验证的效果就会大大下降,那么可不可以想办法将VIVADO中的IP核封装成一个函数在MATLAB中调用呢?答案是可以的。这篇博客主要以FFT的IP核为例讲解封装成一个函数并且成功在MATLAB中调用。 本次实验所使用的软

zhangningning1996的博客 6993

【科学文献计量】标准参考出版年谱(Standard RPYS)和多维参考出版年谱(Multi RPYS)

@[TOC](标准参考出版年谱(Standard RPYS)和多维参考出版年谱(Multi RPYS)) 1 标准参考出版年谱与多维参考出版年谱 1.1 标准参考出版年谱(Standard RPYS) 标准参考出版年谱(Standard Reference Publication Year Spectroscopy)是由Marx, Bornmann, Barth, and Leydesdorff(2014)和Marx and Bornmann(2014)提出的一种量化历史出版物对研究领域影响的方法。该方法通

lys_828的博客 1104

js 设置网页打印的页眉页脚和页边距

http://blog.sina.com.cn/s/blog_629788b70100n9zr.html    var HKEY_Root,HKEY_Path,HKEY_Key;   HKEY_Root="HKEY_CURRENT_USER";   HKEY_Path="//Software//Microsoft//Internet Explorer//PageSetup/

` 1万+

华为OD机试双机位A卷 - VLAN资源池 (C++ & Python & JAVA & JS & GO)

华为OD机试2025双机位A卷 VLAN资源池,提供Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解

qq_45776114的博客 879

前端JS打印功能

前端JS打印功能 嘿嘿 小伙伴们以下代码直接 ctrl+C 复制到html页面即可打印 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面实现打印功能</title> <style type="text/css"> bo...

weixin_40441810的博客 609

《UDS协议从入门到精通》系列——到底什么是DTC?

到底什么是DTC?看这里,深度图解DTC格式,详述DTC状态位、快照信息和扩展信息!!

车载系统攻城狮 1万+

PDD psnl_verification anti_content 生成顺序与环境校验说明

K不是明文 URL,而是从当前href再派生出来的一小段摘要值。页面 URL 变,K会跟着变但K不是直接肉眼可读的 URL 字串可以把它理解成“URL 的短摘要字段”。这一步是最容易被误解的地方。它吃进去的是压缩后的中间串不是直接吃环境字段它内部还带有长度预算 / 字符映射 / 位置处理逻辑所以最终看到的环境字段 bytes协议头deflate 压缩自定义编码多层叠加后的结果。先把字段总包做再把压缩结果转成raw再拼fTail最后走做字符级输出因此,当前看到的协议字段流。

码王吴彦祖的博客 70

vue页面使用js实现前端打印功能

vue页面使用js实现前端打印功能 printContent实现打印功能,针对于打印表单时获取不到页面数据可以使用js原生。遍历循环你所要获取的元素。 针对于打印出来的页面会出现页眉和页脚重新在写一个style 这样数据就可以渲染上去了,然后页眉页脚也没有了。这里margin的值可以自己随便更改。如果你觉得再添加一个style麻烦的话,可以在打印页面的时候取消掉页眉和页脚也是一样的。 这样...

jasmine0178的博客 1万+

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

前端 js 实现打印功能

基于js 浏览器实现打印功能

weixin_51445493的博客 125

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

前端打印功能

前端js方法打印功能。

weixin_58385082的博客 137

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

前端js实现打印功能

如果电脑没有连接打印机,则会导出包含内容的pdf文件,打印页面内指定内容: html页面: <button type="button" onclick="exportpdf();"> 打印</button> <div id="test" class="row"> Hello world!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! </div> javascript: ffunction exportpdf(para

small_33的博客 956

前端实现打印功能Print.js

前端实现打印功能Print.js

红烧咸咸鱼 1625

使用 Print-js 实现打印、预览功能 前端部分

一、传送门:官方文档 、大神文档 二、使用方式 安装: npm install print-js --save 引入: import print from 'print-js' 直接使用: // base64格式 let base64Data = res.data print({ printable: base64Data, type: 'pdf', base64: true }) 三、封装 打印预览 组件封装: <template> <div style="height:au

weixin_41668951的博客 5137

js 前端实现打印功能

// 此处是一个打印的方法 可以在点击事件的时候调用 dayin = () =>{ // 获取当前页面要打印的内容 // 这里的className(‘print’)是我给要打印的区域起的名字 const print = document.getElementsByClassName('print')[0].innerHTML; // 把当前页面替换成要打印的内...

weixin_30507269的博客 894

js实现打印功能

前端代码实现打印功能功能描述 功能描述 前端代码实现打开 Print_window 从而实现打印功能,可实现打印的基本设置,可保存本地文件,也可连接打印机 html实例: <form action="" id="internalfrom"> <table class="outtable" style="margin-bottom:60px;"> <tr style="text-align:center"> <td colsp

我de博客 8173
上一篇: spring websocket 教程,spring websocket 实现聊天室功能
下一篇: windows下 安装 rabbitMQ 及操作常用命令
Yuwen_forJava
博客等级 码龄9年 28粉丝 90原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值