【Functions】前端打印页面指定内容的两种方式

原创已于 2024-10-15 13:40:21 修改 · 682 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-06-21 10:01:32 首次发布

前端工具箱专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用新窗口和iframe在不同浏览器环境下进行页面内容的打印，包括设置打印标题、隐藏iframe并聚焦打印、以及确保行内样式的应用。重点讨论了针对不同场景的代码示例和技术细节。

新窗口打印

参数：

printRef是指打印内容最外层标签的Ref值
测试打印文本为打印页面的title标题

	let obj = ticketRef.value
	let newWindow = window.open()
	// var newWindow = window.open("","_top")
	let docStr = obj.innerHTML
	newWindow.document.write(docStr)
	newWindow.document.title = '测试打印'
	newWindow.document.close()
	setTimeout(function () {
		newWindow.print()
		// newWindow.close();
	}, 10)

iframe浏览器弹窗打印

参数：

printWindow为打印内容最外层的标签

  const el = document.getElementById('winprint')
  const iframe: any = document.createElement('IFRAME')
  let doc = null
  //让iframe结构隐藏不显示
  iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;')
  document.body.appendChild(iframe)
  doc = iframe.contentWindow.document
  doc.write(el.innerHTML)
  doc.close()
  // 获取iframe的焦点，从iframe开始打印
  iframe.contentWindow.focus()
  iframe.contentWindow.print()