前端浏览器打印

回家写作业了
444 阅读3分钟

起因

突然，老板说需要把后台的数据能够打印出来， 然后呢还得是按照设计稿的或者说按照单据的，还得有二维码或者条形码这些；害，之前从来没有做过，但是只要思想不滑坡，办法总比困难多；搞吧，努力的去调研吧

需求

  1. 可以打印，能打印出来东西就行
  2. 我想要按照设计稿来搞一下，这个可以打印不？
  3. 我要打印二维码，条形码在上面；

目标

  1. 简单的打印一下，意思意思
  2. 针对需求的打印等

实现

浏览器HTML自带打印

打印整页

  • window.print() 直接调用的话是打印的当前html中的整个body
window.print() // 调用浏览器的

不过这样会把整体的所有信息都打印出来

image.png

  • 想要打印指定的区域的话，我们可以在把需要展示的部分，放在一个DOM中，然后在打印的时候将DOM放到Iframe中，再调用 iframe.contentWindow.print() ， 浏览器在调用打印的时候，则只会将这个DOM中的元素进行打印出来；然后移除元素用iframe

这样打印出来的就只是想展示的部分

image.png

window.print 纸张打印样式设置

  • 去除页脚页眉

参考 你不能用 @page 规则来修改所有的 CSS 属性。你只能修改文档的 margin、orphans、widows 和分页符。试图对其他属性的修改都是无效的。

// 直接插入
<style media="print">
  // 去除页眉
  @page {
    margin-top: 0; 
  }
  // 去除页脚
  @page {
    margin-bottom: 0; 
  }
  // 去除页眉页脚
  @page {
    margin: 0mm; 
  }
</style>

// 样式中采用媒体查询
@media print {
  @page {
    margin-top: 0; 
  }
}

// @import 引入

@import url('print.css) print;
  • 纸张大小控制

打印的纸张的大小，方向我们同样可以通过css 样式来进行控制；

@page {
  size: A4 portrait; /* landscape：横向  portrait：竖向 auto: 浏览器控制 */
}

@page {
  size: 5.5in 8.5in; /* 5.5英寸宽 8.5英寸高 */
}

设置纸张左右的距离

/* 设置打印时的左侧文档样式 */
@page :left {
  margin: 2in 3in;
}

/* 当打印时会选择所有文档右页 */
@page :right {
  margin: 2in 3in;
}

分页： 通常当打印的内容过长的时候，打印会进行自动分页，但是当遇到问题分页的时候，可能会被截断； 这个时候可以通过CSS样式进行处理进行分页；需要手动判断DOM可能分页的位置，在DOM 之前加入page-break-before: always;

@media print { h1 {page-break-before: always;} }

插件打印（hiprint）打印

hiprint 可以自定义模板进行打印，支持自定义条形码等；

需要引入jquery 依赖

 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>hiprint</title>
    <!-- hiprint -->
    <link href="hiprint/css/hiprint.css" rel="stylesheet">
    <link href="hiprint/css/print-lock.css" rel="stylesheet">
    <link href="hiprint/css/print-lock.css" media="print" rel="stylesheet">
   
  </head>
  <body>
    <!-- jQuery (hiprint 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 hiprint 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
    <script src="hiprint/polyfill.min.js"></script>
    <!-- hiprint 核心js-->
    <script src="hiprint/hiprint.bundle.js"></script>
    <!-- 条形码生成组件-->
    <script src="hiprint/plugins/JsBarcode.all.min.js"></script>
    <!-- 二维码生成组件-->
    <script src="hiprint/plugins/qrcode.js"></script>
    <!-- 调用浏览器打印窗口helper类，可自行替换-->
    <script src="hiprint/plugins/jquery.hiwprint.js"></script>
  </body>
 </html>

可以自定义模版；指定固定的模版之后，进行封装传输数据即可打印对应的数据；

image.png

总结

如果只是简单的打印图片或者二维码这些，那可以直接采用浏览器自带的window.print() 打印即可；如果需要复杂的打印例如发票和对应的面单等，可能许久需要采用hiprint 去进行打印，进行封装，处理；

avatar
文章
阅读
粉丝