前端实现浏览器打印

最新推荐文章于 2024-05-31 14:28:35 发布

半夜删你代码·

最新推荐文章于 2024-05-31 14:28:35 发布

阅读量419

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/m0_60376759/article/details/136399513

版权

本文介绍了如何在Vue应用中使用printView组件，通过将特定HTML片段传入iframe，控制浏览器仅打印所需部分，如工作订单详情。组件通过设置iframe的内容并调整页面高度来适应多页打印需求。

摘要由CSDN通过智能技术生成

浏览器的print方法直接调用会打印当前页面的所有元素，使用iframe可以实现局部打印所需要的模块。

组件printView，将传入的信息放入iframe中，调用浏览器的打印功能

<template>
  <div class="print">
    <iframe
      id="iframe"
      style="display: none; width: 100%"
      frameborder="0"
    ></iframe>
  </div>
</template>
<script>
export default {
  name: 'printView',
  methods: {
    setBodyHtml(html) {
      const document = window.document
      const iframe = window.frames[0]
      iframe.document.head.innerHTML = document.head.innerHTML // 获取当前文档的头部给iframe
      iframe.document.body.innerHTML = html // 把传过来的html给iframe头部
      iframe.document.body.style.background = '#fff'
      let arr = document.getElementsByTagName('tr')
      let heightNum = 0
      let onePage = 800 //第一页的高度
      for (let i in arr) {
        heightNum += arr[i].offsetHeight
        if (heightNum > onePage) {
          heightNum = arr[i].offsetHeight
          onePage = 1500 //第二页高度
        }
      }
      iframe.window.print()
    }
  }
}
</script>

<div v-if="detail.work_order_id" class="before" id="print_info">

<work-order-detail :detail="detail"></work-order-detail>

</div>

// 打印

const viewRef = ref(null)

const print = () => {

const html = document.getElementById('print_info').innerHTML

viewRef.value.setBodyHtml(html)

}