一、需求说明
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 // 打开本地预览弹框
},
图片展示:
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>
/* ...本地打印样式 */
图片展示:
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);
}
图片展示:
三、试验教训成果
1、 右下角logo的打印预览 :如果是默认的本地图片,可以先将图片转为二进制文件流,再绑定在标签里面,若是后端返回的图片,则需返回 二进制文件流 ,总之要绑定二进制文件流,才能保证浏览器打印的正常预览。
2、 右下角logo的打印消失 :本地打印预览、浏览器打印预览都可以正常展示,但是一打印,右小角logo就没有了,打印出来的小票是连logo元素的高度都没有,经过多次调试对比,发现并不是代码问题,而是打印机参数配置导致:打印机配置 “半色调设置” 为“启动”时,logo颜色较浅,则被忽略不打印了,具体打印设置见底下链接。
3、 打印字体较浅 :应考虑字号、字重、字体等原因。在字号字重不好更改的情况下,建议通过调整字体来修正小票颜色较浅的问题。 字体 一般是打印机驱动里面有了,若有“微软雅黑”设置为“微软雅黑”更好,若没有“微软雅黑”则建议“黑体”、“宋体”等,字重逐渐下降。不同字号不同的展示,建议多试试,查看换行等问题。
4、 温馨提示 :以上代码可以直接拷贝,无需更改,…省略掉的html、css代码为个性化业务代码。
无限试用参数,一直调试就完事了文章来源:https://www.toymoban.com/news/detail-436992.html
四、相关链接
《配置:以爱普生TM-T81热敏打印机为例:小票打印安装配置》
《工具:图片转二进制文件流》文章来源地址https://www.toymoban.com/news/detail-436992.html
到了这里,关于功能:vue:浏览器打印小票、打印参数配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!