功能：vue：浏览器打印小票、打印参数配置

一、需求说明

1、要实现点击打印小票按钮，弹出预览弹框，点击弹框里面的打印，则实现浏览器打印预览，以及浏览器打印。
2、根据对应需求可以做步骤的加减，本例多了一个本地预览。
3、环境：pc端打印、chrome浏览器、爱普生TM-T81热敏打印机、打印小票宽度79.5±0.5(mm)。

二、功能实现

1、打印按钮及其点击事件

代码演示：

// xxx页面.vue
<div class="default-btn primary-btn" @click="printHandle()">打印小票</div>
<!-- 【打印小票】 - 弹框-->
<print ref="printRef" :visible.sync="dialogVisible " :info="dialogInfo" />
import Print from './print' // 引入打印弹框
/**
 * 【打印小票】
 */
printHandle() {
  this.dialogInfo = data || {} // 传给预览弹框的数据
  this.dialogVisible = true // 打开本地预览弹框
},

图片展示：功能：vue：浏览器打印小票、打印参数配置

2、本地打印预览弹框

代码演示：

// print.vue
<!-- 打印预览 -->
<div class="print-wrap" ref="print">
  <div class="print-preview" v-loading="dataListLoading" :style="{ width: '320px' }">
    <div class="title">打印小票</div>
    <div class="divide_line"></div>
    <!-- ...小票内容html -->
    <div class="tip">请保存好小票，不要丢弃！</div>
    <!-- 底下logo二进制文件流，一定要用二进制文件流，保证浏览器打印能够拿到log -->
    <img class="image-wrap" src="data:image/png;base64,二进制文件流">
  </div>
</div>
<!-- 【打印】 -->
<div class="default-btn primary-btn" @click="onPrint">打印</div>
<style lang="scss" scoped>
.print-wrap {
  height: 420px;
  overflow-y: scroll;
}
</style>
/* ...本地打印样式 */

图片展示：
功能：vue：浏览器打印小票、打印参数配置

1、本地预览弹框【打印】按钮事件+浏览器打印预览

代码演示：

// print.js
/**
 * 【打印】
 */
onPrint() {
  // 拿到打印页面dom节点
  const printNode = this.$refs.print
  if(!printNode) return
  // 页面文档创建一个空的内框架，用于挂载打印节点，并设置一定的样式
  const newIframe = document.createElement('iframe'); 
  newIframe.setAttribute('style', 'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;');
  newIframe.setAttribute('align', 'center');
  document.body.appendChild(newIframe);
  // 将打印页面设置为内框架内容
  let doc = null;
  doc = newIframe.contentWindow.document;
  doc.write(`
    <style type="text/css">
      /* 浏览器打印基本样式 */
      @media print {
        @page {
          size: auto;
          margin: 1mm; /* 影响打印小票的边缘margin */
          table { page-break-after: auto; }
          tr    { page-break-inside: avoid; page-break-after: auto; }
          td    { page-break-inside: avoid; page-break-after: auto; }
          thead { display: table-header-group; }
          tfoot { display: table-footer-group; }
        }
      }
      /* 打印页面样式 */
      .print-preview { display: flex; flex-direction: column; color: rgba(51, 51, 51, 1); font-family: Microsoft YaHei, '黑体', STSong, '宋体',Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono; }
      .title { display: flex; justify-content: center; font-size: 21px; height: 50px; line-height: 50px; font-weight: bold; }
      .divide_line { justify-content: center; border-bottom: 1px dashed rgba(51, 51, 51, 1); }
      /* 打印页面样式，一个class一个class写，可以.classA .classB {}, 但不要嵌套，不要.classA { .classB {} } */
    </style>
    /* 渲染打印页面 */
    <div style="width:100%;height:auto;width:320px;margin:0px auto;"align="center">
      ${printNode.innerHTML}
    </div>`)
  doc.close();
  // 浏览器打印页面打开渲染
  setTimeout(() => {
      newIframe.contentWindow.focus();
      newIframe.contentWindow.print();
      document.body.removeChild(newIframe); // 移除打印内框架，下次打印下次再挂载
  }, 10);
}

图片展示：
功能：vue：浏览器打印小票、打印参数配置

三、试验教训成果

1、 右下角logo的打印预览 ：如果是默认的本地图片，可以先将图片转为二进制文件流，再绑定在标签里面，若是后端返回的图片，则需返回 二进制文件流 ，总之要绑定二进制文件流，才能保证浏览器打印的正常预览。
2、 右下角logo的打印消失 ：本地打印预览、浏览器打印预览都可以正常展示，但是一打印，右小角logo就没有了，打印出来的小票是连logo元素的高度都没有，经过多次调试对比，发现并不是代码问题，而是打印机参数配置导致：打印机配置 “半色调设置” 为“启动”时，logo颜色较浅，则被忽略不打印了，具体打印设置见底下链接。
3、 打印字体较浅 ：应考虑字号、字重、字体等原因。在字号字重不好更改的情况下，建议通过调整字体来修正小票颜色较浅的问题。 字体 一般是打印机驱动里面有了，若有“微软雅黑”设置为“微软雅黑”更好，若没有“微软雅黑”则建议“黑体”、“宋体”等，字重逐渐下降。不同字号不同的展示，建议多试试，查看换行等问题。
4、 温馨提示 ：以上代码可以直接拷贝，无需更改，…省略掉的html、css代码为个性化业务代码。
无限试用参数，一直调试就完事了

四、相关链接

《配置：以爱普生TM-T81热敏打印机为例：小票打印安装配置》
《工具：图片转二进制文件流》

标签 , ,

发表回复