iPad页面打印window.print()不正确问题

iPad页面打印window.print()不正确问题

最近有一个业务场景，是使用iPad打印表单，表单为grid前端代码所绘制，所以使用的技术方案是window.print()

document.querySelector('body>.layout').style.display = 'none'
document.body.append(this.$refs.print)
window.print()
document.body.removeChild(this.$refs.print)
document.querySelector('body>.layout').style.display = ''
复制代码

在PC上没有任何问题，是可以正常打印的

但是！！！iPad上一旦触发打印

document.body.removeChild(this.$refs.print)
document.querySelector('body>.layout').style.display = ''
复制代码

会立即执行，导致打印的页面永远不是想要的那一部分，并且iPad的safari第二次打印会弹窗【该网站禁止自动打印、是否忽略、允许】，在这种情况下，不适合使用js控制dom节点的方式打印了，故而使用了另一种技术方案

css部分，如果是vue，需要去除scope

<style lang="css">
@media print {
  body {
    display: none;
  }
  .print-view {
    display: block !important;
  }
}
</style>
复制代码

js部分，点击打印按钮

document.body.appendChild(this.$refs.print)

setTimeout(() => {
    window.print()
    setTimeout(() => {
        document.body.removeChild(printHtml)
    }, 2000)
}, 200)
复制代码

使用setTimeout是因为iPad触发打印，生成打印预览快照时，document.body.removeChild会迅速执行，导致生成的预览不是想要打印的节点

以上方式可以实现iPad网页打印，亲测ok，就算是print.js这样强大的第三方库，也只能实现在iPad的safari打印，chrome不可以～～～现在网上关于iPad网页打印的资料太少，文笔虽烂，也要把踩过的坑记录下来，希望有所帮助～～