js几种打印方法

1、使用printJs插件（优先使用）

printjs官网

 // 官网文档很详细！
// 举例如下：
printJS({
   printable: [this.blobUrl],
   type: 'pdf'
})复制

2、使用window.open的方式

 // 举例如下：
// 其中imgUrl为base64格式：'data:image/' + type + ';base64,' + ...
 let oWin = window.open(
  '',
    'pringwindow',
    'menubar=no,location=no,resizable=yes,scrollbars=no,status=no,width=1000,height=660'
  )
  oWin.document.fn = function () {
    if (oWin) {
      oWin.print()
      oWin.close()
    }
  }
  let html =
    '<div style="height: 100%;width: 100%;">' +
    `<img src="${this.imgUrl}" οnlοad="fn()" style="max-height:100%;max-width: 100%;" />` +
    '</div>'
  oWin.document.open()
  oWin.document.write(html)
  oWin.document.close()复制

3、使用iframe方式

 // 举例如下：
const iframe = document.createElement('iframe')
 
     iframe.style.height = 0
     iframe.style.visibility = 'hidden'
     iframe.style.width = 0
 
     iframe.setAttribute('srcdoc', '<html><body></body></html>')
     document.body.appendChild(iframe)
 
     iframe.addEventListener('load', function () {
       // 这里获取image的前提是html中有一个id为image的dom
       // 例如：<img id="image" :src="图片路径"/>
       const image = document.getElementById('image').cloneNode()
       image.style.maxWidth = '100%'
 
       const body = iframe.contentDocument.body
       body.style.textAlign = 'center'
       body.appendChild(image)
       image.addEventListener('load', function () {
         iframe.contentWindow.print()
       })
     })
 
	iframe.contentWindow.addEventListener('afterprint', function () {
	   iframe.parentNode.removeChild(iframe)
	})复制

4、在electron中封装一个打印pdf的方法（这个一般用不到）

  const reader = new FileReader()
 // blobUrl： 一个blob流
   reader.readAsDataURL(blobUrl)
    reader.addEventListener('loadend', () => {
      nodeApi.sendnew('printResponsePdf', {
        buffer: Buffer.from(
          reader.result.split('base64,')[1],
          'base64'
        ),
    })
})
 
// 提供一个base64转blob的方式吧
 base64ToBlob() {
   let imgSrc = this.imgUrl // imgUrl为base64格式的路径
 
   let arr = imgSrc.split(',')
   let array = arr[0].match(/:(.*?);/)
   let mime = (array && array.length > 1 ? array[1] : type) || type
   // 去掉url的头，并转化为byte
   let bytes = window.atob(arr[1])
   // 处理异常,将ascii码小于0的转换为大于0
   let ab = new ArrayBuffer(bytes.length)
   // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
   let ia = new Uint8Array(ab)
   for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i)
   }
   return new Blob([ab], {
     type: mime,
   })
 },复制

标签

js几种打印方法

1、使用printJs插件（优先使用）

2、使用window.open的方式

3、使用iframe方式

4、在electron中封装一个打印pdf的方法（这个一般用不到）

js html CSS jquery实现无限滚动轮播列表（一）

jQuery之添加节点的几种方式

页面显示，从js转到jquery简介操作

Uncaught ReferenceError: jQuery is not defined 异常处理思路

js根据坐标进行图片截图，获取图片上指定位置的截图

jquery把页面＜table＞里的内容导出为后缀名为.xlsx的excel

echarts折线图颜色-折线图颜色设置-线条设置

echarts折线图设置从左至右缓慢动画效果

echarts图像怎么随浏览器窗口或指定元素变化而变化？

Echarts笔记

前端哥

js html CSS jquery实现无限滚动轮播列表（一）

jQuery之添加节点的几种方式

页面显示，从js转到jquery简介操作

Uncaught ReferenceError: jQuery is not defined 异常处理思路

js根据坐标进行图片截图，获取图片上指定位置的截图

jquery把页面＜table＞里的内容导出为后缀名为.xlsx的excel

echarts折线图颜色-折线图颜色设置-线条设置

echarts折线图设置从左至右缓慢动画效果

echarts图像怎么随浏览器窗口或指定元素变化而变化？

Echarts笔记

1
移动端css布局大全

2024-02-06 15:02:421000

2
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

3
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

4
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

5
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

6
如何利用浏览器测试跨域

2024-02-11 10:02:28998

7
html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

8
响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

9
使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？

2024-02-06 15:02:59995

10
导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994

	// 官网文档很详细！
	// 举例如下：
	printJS({
	printable: [this.blobUrl],
	type: 'pdf'
	})

	// 举例如下：
	// 其中imgUrl为base64格式：'data:image/' + type + ';base64,' + ...
	let oWin = window.open(
	'',
	'pringwindow',
	'menubar=no,location=no,resizable=yes,scrollbars=no,status=no,width=1000,height=660'
	)
	oWin.document.fn = function () {
	if (oWin) {
	oWin.print()
	oWin.close()
	}
	}
	let html =
	'<div style="height: 100%;width: 100%;">' +
	`<img src="${this.imgUrl}" οnlοad="fn()" style="max-height:100%;max-width: 100%;" />` +
	'</div>'
	oWin.document.open()
	oWin.document.write(html)
	oWin.document.close()

	// 举例如下：
	const iframe = document.createElement('iframe')

	iframe.style.height = 0
	iframe.style.visibility = 'hidden'
	iframe.style.width = 0

	iframe.setAttribute('srcdoc', '<html><body></body></html>')
	document.body.appendChild(iframe)

	iframe.addEventListener('load', function () {
	// 这里获取image的前提是html中有一个id为image的dom
	// 例如：<img id="image" :src="图片路径"/>
	const image = document.getElementById('image').cloneNode()
	image.style.maxWidth = '100%'

	const body = iframe.contentDocument.body
	body.style.textAlign = 'center'
	body.appendChild(image)
	image.addEventListener('load', function () {
	iframe.contentWindow.print()
	})
	})

	iframe.contentWindow.addEventListener('afterprint', function () {
	iframe.parentNode.removeChild(iframe)
	})

	const reader = new FileReader()
	// blobUrl：一个blob流
	reader.readAsDataURL(blobUrl)
	reader.addEventListener('loadend', () => {
	nodeApi.sendnew('printResponsePdf', {
	buffer: Buffer.from(
	reader.result.split('base64,')[1],
	'base64'
	),
	})
	})

	// 提供一个base64转blob的方式吧
	base64ToBlob() {
	let imgSrc = this.imgUrl // imgUrl为base64格式的路径

	let arr = imgSrc.split(',')
	let array = arr[0].match(/:(.*?);/)
	let mime = (array && array.length > 1 ? array[1] : type) \|\| type
	// 去掉url的头，并转化为byte
	let bytes = window.atob(arr[1])
	// 处理异常,将ascii码小于0的转换为大于0
	let ab = new ArrayBuffer(bytes.length)
	// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
	let ia = new Uint8Array(ab)
	for (let i = 0; i < bytes.length; i++) {
	ia[i] = bytes.charCodeAt(i)
	}
	return new Blob([ab], {
	type: mime,
	})
	},

js几种打印方法

1、使用printJs插件（优先使用）

2、使用window.open的方式

3、使用iframe方式

4、在electron中封装一个打印pdf的方法（这个一般用不到）

微信扫一扫：分享