web端打印功能(window.print())

关键代码如下:

function printTable() {
      // setTimeout可以不用,我这里是做了其他操作,所以做了一个异步操作
      setTimeout(() => {
      //获取要打印的页面部分
        const printHtml = document.getElementById('printContent').innerHTML
        //打开一个新窗口进行打印,直接调用windo.print打印会有bug,
        const win = window.open('', 'newwindow', 'height=600, width=1000, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
        //将获取到的页面部分插入到新窗口
        win.document.body.innerHTML = printHtml
        // 设置样式,
        const style = win.document.createElement('style')
        style.innerHTML = getStyle()
        win.document.body.appendChild(style)
        win.print()
      }, 50)
      return false
},
function getStyle() {
// 支持css,不支持less和scss
  return `.print-page {
    background-color: #eee;
  }`
}

SCSS转CSS:
如果是scss,附上一个scss转css的工具,完美转换
https://www.sassmeister.com/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值