前端打印功能

最新推荐文章于 2025-04-23 14:09:11 发布
最新推荐文章于 2025-04-23 14:09:11 发布
阅读量560 收藏
点赞数
分类专栏： js项目问题 文章标签： html、js
原文链接：https://www.cnblogs.com/weiyu11/p/7574726.html
版权

方法一：
html代码：
在这里插入图片描述
在要打印的内容上加入：<!--startprint-->和<!--endprint-->

js代码：

$('.printData').click(function(){
		bdhtml=window.document.body.innerHTML;   
		sprnstr="<!--startprint-->";   
		eprnstr="<!--endprint-->";   
		prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);   
		prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));   
		window.document.body.innerHTML=prnhtml;  
		window.print();
	 })

去除打印按钮，在css中加入：

@media print {
	  .noprint{
		display: none;
	  }
	}

方法二：

<buttonn>打印</buttton>

<div id="print">
<!-- 要打印的内容 -->
<div>

 $('.printData').click(function(){
// document.getElementById('print')获取需要打印区域的id名
  // innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
  let newstr = document.getElementById('print').innerHTML;
  console.log(newstr)
  window.document.body.innerHTML = newstr;
  let oldstr = window.document.body.innerHTML;
  // 实现打印功能
  window.print();
  window.location.reload();   //解决打印之后按钮失效的问题
  window.document.body.innerHTML = oldstr;
  return false;
})

方法三：lodop 官网：http://www.lodop.net/index.html
在这里插入图片描述

  1. 语法：更详细的可以戳 “这里”
    （1） PRINT_INIT(strPrintTaskName)打印初始化
    （2）SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
    （3）ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
    （4） ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
    （5） ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
    （6） ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
    （7）SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
    （8）PREVIEW打印预览
    （9）PRINT直接打印
    （10）PRINT_SETUP打印维护
    （11）PRINT_DESIGN打印设计
  2. 去下载中心下载案例，保留 js 文件。
    在这里插入图片描述
  3. 我这里用在 vue 项目中，所以要对 js 进行改造。感谢一下https://www.jianshu.com/p/d288963c1a80提供的代码
var CreatedOKLodop7766 = null

export function needCLodop() {
	try {
		var ua = navigator.userAgent
		if (ua.match(/Windows\sPhone/i) != null) return true
		if (ua.match(/iPhone|iPod/i) != null) return true
		if (ua.match(/Android/i) != null) return true
		if (ua.match(/Edge\D?\d+/i) != null) return true

		var verTrident = ua.match(/Trident\D?\d+/i)
		var verIE = ua.match(/MSIE\D?\d+/i)
		var verOPR = ua.match(/OPR\D?\d+/i)
		var verFF = ua.match(/Firefox\D?\d+/i)
		var x64 = ua.match(/x64/i)
		if (verTrident == null && verIE == null && x64 !== null) return true
		else if (verFF !== null) {
			verFF = verFF[0].match(/\d+/)
			if (verFF[0] >= 41 || x64 !== null) return true
		} else if (verOPR !== null) {
			verOPR = verOPR[0].match(/\d+/)
			if (verOPR[0] >= 32) return true
		} else if (verTrident == null && verIE == null) {
			var verChrome = ua.match(/Chrome\D?\d+/i)
			if (verChrome !== null) {
				verChrome = verChrome[0].match(/\d+/)
				if (verChrome[0] >= 41) return true
			}
		}
		return false
	} catch (err) {
		return true
	}
}

//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
	var head =
		document.head ||
		document.getElementsByTagName('head')[0] ||
		document.documentElement
	var oscript = document.createElement('script')
	oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=1'
	head.insertBefore(oscript, head.firstChild)

	//引用双端口(8000和18000）避免其中某个被占用：
	oscript = document.createElement('script')
	oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=0'
	head.insertBefore(oscript, head.firstChild)
}

//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT, oEMBED) {
	var strHtmInstall =
		"<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后建议重新打开浏览器刷新页面或重新打开浏览器。</font>"
	var strHtmUpdate =
		"<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新打开浏览器。</font>"
	var strHtm64_Install =
		"<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新打开浏览器。</font>"
	var strHtm64_Update =
		"<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新打开浏览器。</font>"
	var strHtmFireFox =
		"<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>"
	var strHtmChrome =
		"<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>"
	var strCLodopInstall =
		"<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行安装</a>,安装后请刷新页面。</font>"
	var strCLodopUpdate =
		"<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行升级</a>,升级后请刷新页面。</font>"
	var LODOP
	try {
		var isIE =
			navigator.userAgent.indexOf('MSIE') >= 0 ||
			navigator.userAgent.indexOf('Trident') >= 0
		if (needCLodop()) {
			try {
				LODOP = getCLodop()
			} catch (err) {}
			if (!LODOP && document.readyState !== 'complete') {
				alert('C-Lodop没准备好，请稍后再试！')
				return
			}
			if (!LODOP) {
				if (isIE) document.write(strCLodopInstall)
				else
					document.body.innerHTML =
						strCLodopInstall + document.body.innerHTML
				return
			} else {
				if (CLODOP.CVERSION < '3.0.4.3') {
					if (isIE) document.write(strCLodopUpdate)
					else
						document.body.innerHTML =
							strCLodopUpdate + document.body.innerHTML
				}
				if (oEMBED && oEMBED.parentNode)
					oEMBED.parentNode.removeChild(oEMBED)
				if (oOBJECT && oOBJECT.parentNode)
					oOBJECT.parentNode.removeChild(oOBJECT)
			}
		} else {
			var is64IE = isIE && navigator.userAgent.indexOf('x64') >= 0
			//=====如果页面有Lodop就直接使用，没有则新建:==========
			if (oOBJECT != undefined || oEMBED != undefined) {
				if (isIE) LODOP = oOBJECT
				else LODOP = oEMBED
			} else if (CreatedOKLodop7766 == null) {
				LODOP = document.createElement('object')
				LODOP.setAttribute('width', 0)
				LODOP.setAttribute('height', 0)
				LODOP.setAttribute(
					'style',
					'position:absolute;left:0px;top:-100px;width:0px;height:0px;',
				)
				if (isIE)
					LODOP.setAttribute(
						'classid',
						'clsid:2105C259-1E0C-4534-8141-A753534CB4CA',
					)
				else LODOP.setAttribute('type', 'application/x-print-lodop')
				document.documentElement.appendChild(LODOP)
				CreatedOKLodop7766 = LODOP
			} else LODOP = CreatedOKLodop7766
			//=====Lodop插件未安装时提示下载地址:==========
			if (LODOP == null || typeof LODOP.VERSION == 'undefined') {
				if (navigator.userAgent.indexOf('Chrome') >= 0)
					document.body.innerHTML =
						strHtmChrome + document.body.innerHTML
				if (navigator.userAgent.indexOf('Firefox') >= 0)
					document.body.innerHTML =
						strHtmFireFox + document.body.innerHTML
				if (is64IE) document.write(strHtm64_Install)
				else if (isIE) document.write(strHtmInstall)
				else
					document.body.innerHTML =
						strHtmInstall + document.body.innerHTML
				return LODOP
			}
		}
		if (LODOP.VERSION < '6.2.2.3') {
			if (!needCLodop()) {
				if (is64IE) document.write(strHtm64_Update)
				else if (isIE) document.write(strHtmUpdate)
				else
					document.body.innerHTML =
						strHtmUpdate + document.body.innerHTML
			}
			return LODOP
		}
		//===如下空白位置适合调用统一功能(如注册语句、语言选择等):===

		//===========================================================
		return LODOP
	} catch (err) {
		alert('getLodop出错:' + err)
	}
}
  1. 把它放到 src 下的 plugs 文件夹中，在需要用的页面中引入
import {getLodop} from '@/plugs/vuePrint/LodopFuncs.js'

5.要注意的是，lodop 不能读取外部样式
在这里插入图片描述
复制demo中的 js 部分到 methods

前端实现打印功能的方式
EipGemms的博客
10-04 1133
在前端开发中，打印功能是一个常见需求，允许用户将当前页面或特定内容打印成纸质文档。方法来触发打印操作。选择合适的方法，根据你的需求为用户提供打印功能，以增强网站的可用性和用户体验。这样，我们可以隐藏或重新排列某些元素，以适应打印的需求。上述代码创建了一个按钮，当用户点击按钮时，浏览器将弹出打印对话框，并打印当前页面。除了浏览器原生的打印功能，还有一些第三方库可以提供更多的定制选项和功能。属性指定了要打印的元素的ID，可以是整个页面或特定的DOM元素。是一个常用的前端打印库，可以用于在浏览器中控制打印操作。
Vue3轻松实现前端打印功能
bjzhang75的博客
10-02 1444
Vue3轻松实现前端打印功能
前端实现打印功能
热门推荐
weixin_55846296的博客
04-15 2万+
打印的方式很多，大家选择适合自己项目的即可。就像王者荣耀，哈哈哈（肯定会有人突然疑惑，为什么会突然提到游戏，因为前两天我肯开心自己粉丝在增加，但是感觉自己博客不怎么生动，同事就给了我一个建议，可以说说王者荣耀，嘻嘻嘻，第一次说，以后不一定啥时候说），所以最后总结只有第一句话有用，后边大家随便看看就行，代码机器们，加油，在努力个四五十年，马上就可以退休了！！！
window.print() 前端实现网页打印详解
最新发布
有问题可关注公众号：前端研究院 后台输入问题回复
04-23 459
前言print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。一、print()方法print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。
前端实现打印
qq_39285162的博客
04-12 1051
先下载插件print-js npm install print-js --save 然后在页面引入 import printJS from 'print-js' 具体使用 <template> <div> <el-button round class="btn" @click="handlePrint(item)">打印</el-button> </div> </template> <s
前端打印功能的实现
weixin_30295091的博客
07-03 331
备忘，记录一下。 在需要打印页面生成一个div,ID为“Printing”；状态为display:none;使打印内容隐藏在该页面上，div里面的内容就是打印的内容根据需求填充即可。 然后给打印按钮加点击事件点击时调用该方法，一个简单打印功能就实现了，但是该方法调整样式不是很方便，建议直接直接生成一个页面。 function PrintArticle() { ...
前端实现打印图像功能
11-21
之前前端表单打印功能有使用过LODOP打印插件，需安装相应的LODOP的打印软件，lodop的使用方法2种。第一种方式是通过收集前端标签内容元素成对象 var htmlstr= $("#ECGReport").html(); 通过 LODOP.ADD_PRINT_HTM(20...
调用web前端打印功能，对页面进行打印
03-15
web页面调用的打印，包含可实现整页打印，区域打印，选择打印三种方法，直接复制可用（缺点：格式不好控制，建议使用插件打印或PDF打印，详见本人其他分享）
前端打印功能实现与优秀实践
前端打印是指在Web浏览器中直接打印网页内容的功能，而不是指...前端打印功能的实现不仅提升了网页的可用性，也增加了用户与网页交互的灵活性。未来随着Web技术的不断进步，前端打印功能的实现将会更加智能化和人性化。
前端打印功能增强：printThis插件使用教程
这个插件似乎是基于jQuery进行开发的，目的是为了方便地实现前端打印功能。下面将详细介绍“printThis”插件相关的知识点。 ### 知识点一：前端打印功能的重要性 在网页设计中，打印功能是一个基本但又非常重要的...
web前端实现多页打印
11-19
web前端实现打印功能，并且可多页打印
前端打印Demo(Jquery)
01-17
自己写的Demo，强大的JQuery打印工具（兼容IE6到最新版，谷歌火狐也可兼容）
js 前端打印demo
10-27
前端打印demo,非常好用，简单 ，方便，复用性好，一次
基于jquery.print.js插件的js打印demo
04-21
基于jquery.print.js插件的js打印demo，简单易用，使用详细教程请查看我的个人主页的博客《一款很好用的Jquery 打印插件——jQuery.print.js》
JavaScript 实现打印操作
weixin_38168139的博客
08-30 1254
一.打印当前页面指定元素中的内容 方式一：直接使用window.print(); （1）首先获得元素的html内容（这里建议如果有样式最好是用内联样式的方式） var newstr = document.getElementById(myDiv).innerHTML;//得到需要打印的元素HTML （2）保存当前页面的整个html，因为window.print()打印操作是打...
利用前端实现打印功能
weixin_30800987的博客
11-06 710
先引入两个CSS,文件下载地址：https://github.com/xiaorenwu-dashijie/print.git <link rel="stylesheet" type="text/css" href="css/print.css" media="print"/> <link rel="stylesheet" type="text/css" href="...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值