js几种打印方法

这篇具有很好参考价值的文章主要介绍了js几种打印方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、使用printJs插件(优先使用)

printjs官网文章来源地址https://www.toymoban.com/news/detail-515415.html

// 官网文档很详细!
// 举例如下:
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几种打印方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(48)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(下)

    在进入文章的正文之前,我们先一起了解一下关于 CSDN 今年的 1024 程序员节。与此同时这也是我在 CSDN 参与的第二个 1024 程序员节日,转眼间也快写博客两年时间,去年很遗憾没有去到深圳(疫情原因)线下参加这个有趣而充实的峰会。今年没有特殊情况的话一定会如约而至

    2024年02月06日
    浏览(49)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)

    今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的使用,以及关于 ElementPlus 中的 el-table 与 el-pagination 的深入使用。本次项目以文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联

    2024年02月06日
    浏览(44)
  • 【Java】打印矩阵的几种方法

    首先创建一个矩阵 int[][] grid = {{1,2,4},{3,3,1},{3,4,5}}; 如果直接输出grid,则会打印矩阵地址,所以,我们需要进行矩阵遍历,得到矩阵的值。 直接打印grid: 首先,用row记录矩阵的行数,用column记录矩阵的列数,并通过行数和列数进行矩阵遍历 得到结果: 结果: 结果:

    2024年02月11日
    浏览(42)
  • vue中实现打印功能的几种方法

    这种方法默认打印整个页面,不能打印局部页面。并且不保留原有样式 这种方法也是调用了原生打印,通过封装好方法,可以指定需要打印的区域,自由度高,缺点就是通过截取全页面的html进行字符串截取,并且不保留原有样式,需要去手动添加样式。 2.1、封装打印方法,

    2024年02月15日
    浏览(41)
  • uniapp(vue3) - 微信小程序平台使用import引入外部js文件出现undefined,正常引入js文件(sdk插件)文件路径正确但console.log控制台打印时却是undefined

    注:uniapp 小程序平台! 在使用 uniapp 微信小程序端导入 SDK 的过程中,您可能会遇到这样的情况: 使用 console.log() 打印导入的模块名称时,实际输出的名称并不是您期望的名称。这是因为 uniapp 进行了编译和打包处理后,会将代码重新命名以减小文件大小和提高执行效率,包

    2024年02月10日
    浏览(87)
  • C/C++打印二维数组的几种方法(都进来给我补充!!!)

    1、双重for循环法: 2、一个for循环打印二维数组 3、利用指针数组来打印二维数组 4、指针数组打印二维数组第二版

    2024年02月09日
    浏览(32)
  • 设置JdbcTemplate打印sql语句的几种实现方式使用Spring Boot打印SQL语句

    在使用JdbcTemplate执行SQL查询时,可以将其配置为打印SQL语句,以便调试和优化查询。以下是一些方法可以设置JdbcTemplate打印SQL语句: 如果你使用Log4j作为日志框架,可以在log4j.properties或log4j.xml文件中添加以下配置,将JdbcTemplate打印的SQL语句输出到控制台或日志文件中: 这将

    2024年02月15日
    浏览(145)
  • JS数组求和的几种方法

    这篇文章主要介绍了JS数组求和的几种常用方法 方法一:通过原型对象扩展内置对象方法(即给Array增加方法) 方法二:普通for循环函数求和 方法三:使用递归 方法四:函数式编程reduce 拓展:注意reduce()方法的最后一个参数(下面是个特例),避坑!!! 方法五:forEach遍历

    2024年02月01日
    浏览(44)
  • JS实现深拷贝的几种方法

    这是最简单的方法。 通过递归的方式深度遍历对象,将每个属性的值进行复制。需要处理被复制对象为值类型的情况以及属性值中包含对象的情况。需要注意的是,为了防止循环引用导致死循环,需要记录已经遍历过的对象。 Lodash Lodash 是一个一致性、模块化、高性能的 J

    2024年02月11日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包