javascript打印页面

木心操作

已于 2024-01-11 11:25:11 修改

阅读量515

点赞数

分类专栏： javascript 文章标签： javascript 前端 vue.js html

于 2023-03-03 10:53:44 首次发布

本文链接：https://blog.csdn.net/qq_41579327/article/details/129315698

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

浏览器打印

方式一

打印方法：window.print()

打印前：window.onbeforeprint

打印后：window.onafterprint

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打印</title>
    <style>
      /* 去除浏览器默认页眉页脚 */
      @media print {
        @page {
          margin: 0;
        }
        body {
          margin: 1cm;
        }
      }
    </style>
  </head>
  <body>
    <div>不打印的内容</div>
    <div class="print">
      <span>打印区域1</span>
      <p>打印区域2</p>
      <div>打印区域3</div>
    </div>
    <input type="button" value="打印" onclick="printHandle()" />
  </body>

  <script>
    function printHandle() {
      let body_box = window.document.body.innerHTML
      let print_box = document.querySelector('.print').innerHTML
      // 打印前
      window.onbeforeprint = () => {
        console.log('开始打印')
        window.document.body.innerHTML = print_box
      }
      // 打印后
      window.onafterprint = () => {
        console.log('结束打印')
        window.document.body.innerHTML = body_box // vue使用此方法第二次点按钮会失效
        // location.reload() // 可使用刷新解决vue按钮失效问题
      }
      // 打印
      window.print()
    }
  </script>
</html>

方式二

调用浏览器打印窗口前要保证body高度不能是100%

<template>
  <div class="page-view">
    <div class="main" v-show="showMain">打印前显示区域</div>
    <!-- 打印区域 -->
    <div class="print-box" v-show="!showMain">
      <div id="header">页眉内容</div>
      <div id="footer">页脚内容</div>
      <div class="print-content">打印区域</div>
    </div>

    <el-button type="primary" size="mini" @click="printDocunemt">打印</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMain: true
    }
  },

  methods: {
    // 打印
    printDocunemt() {
      document.querySelector('body').style.height = 'unset'
      this.showMain = false
      this.$nextTick(() => {
        window.print()
        this.showMain = true
        document.querySelector('body').style.height = '100%'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-view {
  height: 100%;
}

// 打印区域
.print-box {
  width: 710px;
  margin: auto;
}

@media print {
  @page {
    size: A4;
    margin-top: 2cm;
  }
  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: lightgray;
  }
  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: lightgray;
  }
}
</style>

方式三

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        @media print {
            @page {
                size: A4;
                margin: 2cm;
            }
            #header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                text-align: center;
                background-color: lightgray;
            }
            #footer {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                text-align: center;
                background-color: lightgray;
            }
        }
    </style>
</head>
<body>
    <div id="header">页眉内容</div>
    <div id="footer">页脚内容</div>
    
    <!-- 这是你网页的内容 -->
    <h1>标题1</h1>
    <p>网页内容</p>

    <script>
        // 使用 JavaScript 触发打印
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>

参考：前端网页打印window.print()-CSDN博客

vue-print-nb 插件

vue-print-nb - npm

Lodop 打印程序

Lodop和C-Lodop官网主站

<!DOCTYPE html>
<html>
<head>
    <script src="http://127.0.0.1:8000/CLodopfuncs.js?priority=1"></script>
    <script src="http://127.0.0.1:18000/CLodopfuncs.js?priority=0"></script>
    <style type="text/css">
        @media print {
            @page {
                size: A4;
            }
        }
    </style>
</head>
<body>
    <!-- 打印内容 -->
    <h1>标题1</h1>
    <p>网页内容</p>

    <script>
        // 打印
       async function printPage() {
            const body_el = document.querySelector('body')
            body_el.style.height = 'unset'
            const element = document.querySelector('.print-box')
            const canvas_box = await html2canvas(element)
            const img_url = canvas_box.toDataURL('image/png')
            body_el.style.height = '100%'
            const LODOP = await getCLodop()
            LODOP.PRINT_INIT('打印送货单')
            LODOP.ADD_PRINT_IMAGE(10, 10, '100%', '100%', `<img border='0' src='${img_url}' />`)
            if (LODOP.CVERSION) {
              LODOP.On_Return = function (TaskID, Value) {
                console.log(Value)
                if (Number(Value) > 0) {
                  console.log('打印成功！')
                }
              }
            }
            LODOP.PRINT_SETUP()
        }
    </script>
</body>
</html>