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

这篇具有很好参考价值的文章主要介绍了功能: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热敏打印机为例:小票打印安装配置》
《工具:图片转二进制文件流》文章来源地址https://www.toymoban.com/news/detail-436992.html

到了这里,关于功能:vue:浏览器打印小票、打印参数配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js中如何使用Vue Router处理浏览器返回键的功能

    在Vue.js中,Vue Router默认提供了处理浏览器返回键的功能。当用户点击浏览器的返回键时,Vue Router会自动导航到历史记录中的上一个路由。然而,如果你想自定义返回键的行为或者在特定的页面上进行特殊处理,你可以使用Vue Router的导航守卫(Navigation Guards)和Vue的生命周期

    2024年04月10日
    浏览(38)
  • 实现微信内置浏览器分享功能(前期准备+VUE前端部分代码+调试+坑记录)

    一、基础准备 1、登录微信公众号(需已认证),找到[【设置与开发】[【公众号设置】【功能设置】【js接口安全域名],在下面填写你的域名。 2、在【设置与开发】【基本配置】中拿到 appid开发者密码 appSecret ,给后端用生成签名时用到。 二、前端代码部分 1、下载微信sdk 2、

    2024年04月17日
    浏览(38)
  • Python Selenium 浏览器打印预览

    在Web开发中,打印预览是一个常见的功能需求。通过打印预览,我们可以预览和调整网页的打印布局、样式和内容。Python的Selenium库是一个强大的工具,可以自动化浏览器操作,包括打印预览。本文将介绍如何使用Python Selenium库来实现浏览器的打印预览功能。 首先,我们需要

    2024年02月03日
    浏览(70)
  • Web自动化Selenium-浏览器定制启动参数

    在自动化测试过程中,为了达到某种效果,我们需要在初始化浏览器的时候做一些特殊的设置,如“阻止图片加载”“阻止JavaScript执行”等。这些需要Selenium的浏览器options(如ChromeOptions、FirefoxOptions)来帮助我们完成。 本节我们再来看一些options的常用属性及方法。 ●optio

    2024年02月14日
    浏览(53)
  • 前端实现调用打印机和小票打印(TSPL )功能

    前端 的方式 点击这个按钮,直接让打印机打印我想要的东西 github地址: https://github.com/whqgo/nodeWebPrint 目前比较好的方式就是直接用 TSPL 标签打印指令集, 基础环境就不多说了,这个功能的实现就是利用usb发送指令,现在缺少个来让我们能够和usb沟通的工具,下面这就是推荐的一个

    2024年02月06日
    浏览(63)
  • python爬虫-seleniumwire模拟浏览器反爬获取参数

    在进行数据爬取时,有时候遇到一些比较复杂的js逆向。在不考虑访问效率的情况下,使用selenium模拟浏览器的方法可以大大减少反反爬逆向工作量。但普通的selenium库是无法获取到类似set-cookie等参数的,这时候需要用到selenium-wire库。其用法类似selenium 首先安装selenium-wire库

    2024年02月03日
    浏览(40)
  • 打开谷歌浏览器远程调试功能

    谷歌浏览器远程调试功能 首先我们来启动Chrome的远程调试端口。你需要找到Chrome的安装位置,在Chrome的地址栏输入 chrome://version 就能找到Chrome的安装路径 开启远程控制命令 开启后的样子(注意要关闭其他谷歌浏览器的窗口) 记住其中的 webSocketDebuggerUrl 后面的地址。这就是我们

    2024年02月11日
    浏览(45)
  • 【浏览器】url参数中的“+”全部变成了空格原因及解决办法

    背景 今天在获取其他站点重定向添加到我cms后台管理的url参数时,碰到参数中的“+”全部变成了空格的情况 原因 是URL中默认的将“+”号转义了 W3C标准规定,当Content-Type为application/x-www-form-urlencoded时,URL中查询参数名和参数值中空格要用加号+替代,所以几乎所有使用该规范

    2024年02月13日
    浏览(40)
  • Python使用Selenium模拟浏览器自动操作功能

    概述 在进行网站爬取数据的时候,会发现很多网站都进行了反爬虫的处理,如JS加密,Ajax加密,反Debug等方法,通过请求获取数据和页面展示的内容完全不同,这时候就用到Selenium技术,来模拟浏览器的操作,然后获取数据。本文以一个简单的小例子,简述Python搭配Tkinter和

    2024年01月17日
    浏览(66)
  • 【爬虫JS逆向-工具篇】浏览器内存漫游加密参数Hook实战教程

    【作者主页】: 吴秋霖 【作者介绍】:Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作! 【作者推荐】:对JS逆向感兴趣的朋友可以关注《爬虫JS逆向实战》,对分布式爬虫平台感兴趣的朋友可以关注《分布式爬虫平台搭建

    2024年02月22日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包