很多时候，在web开发的应用程序中，需要调用打印机来打印相关的单据等信息，同时一般根据组件化开发的思想，将整张需要打印的内容封装在一个单独的组件内。这里记录一下自己如何一步步在项目中调用打印接口来打印某个组件内容。

1.下载打印相关的外部JS文件到本地

插件地址：https://github.com/Linwei-RenJian/vuePlugs_printjs-master

2.在项目的main.js文件中注入print方法

import Print from './utils/print'Vue.config.productionTip = falseVue.use(Print)

3.在需要打印的组件中写入相关方法

在组件顶部的div中设置ref属性，在方法中通过$refs方法获取到想要打印的元素内容，代码中的ref=“imageWrapper”

<template><div v-if="dialogVisible" ref="imageWrapper">...</div>
</template>

<script>export default {props: [],data () {return {}},dialogVisible: false}},mounted () {},methods: {init () {this.dialogVisible = truethis.$nextTick(() => {this.handlePrint()// setTimeout(function() {//   that.ToImg()// }, 1000)})},handleClose (done) {done()},handlePrint () {debuggerconsole.log(this.$refs.imageWrapper)this.$print(this.$refs.imageWrapper)this.dialogVisible = false}}}
</script>

4.在调用组件的地方实现打印方法

一般会在调用组件时传入参数，再将参数渲染到打印的页面上。这里可以在调用组件时，为组件的标签也设置一个ref属性，当点击打印按钮时，会通过$refs获取到打印组件，调用打印组件的init方法，同时可以传入参数，设置dialogVisible等属性值。

<!--在另一个组件中调用打印的组件-->
<template>    <div>...<!--打印组件--><weighingSheet ref="weighingSheet"></weighingSheet></div>
</template>

//设置按钮事件触发打印功能
methods: {clickWeighingSheet () {//option是可选的参数this.$refs.weighingSheet.init(option)}},

Vue实现打印机接口打印组件相关推荐

Vue中封装打印组件包括基本信息、表格用途出库单、入库单、请购单等单据
1.我们在工作中,在中后台系统应用中,经常会遇到打印的问题. 2.产品需求将列表详情数据能够打印生产单据,包括列表详情的所有数据. 3.通常我们可以通过接口拿到一定格式的JSON数据. 打印组件,总的 ...
打印机支持打印html页面吗,vue下调用打印功能，打印html页面
wo我今天翻博客,csdn上面有一篇关于我之前记录的工具函数打印html元素的js工具函数没了.我纳闷了,csdn就不重新补了,换掘金来记录. 主要解决: 会有项目需求说要求在html页面下调用打印机 ...
计算机打印中进纸盘2,软件、计算机和打印机接口问题-HP.PDF
软件.计算机和打印机接口问题-HP.PDF 5 第第章章故障排除故障排除第第章章故障排除故障排除软件.计算机和打印机接口问题软件.计算机和打印机接口问题软件.计算机和打印机接口问题软件. ...
bootstrap 打印组件_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
用VB开发USB接口POS打印机进行打印和弹钱箱
用VB开发USB接口POS打印机进行打印和弹钱箱原来并口打印机编写代码: Open "Lpt1" For Output As #1 Print #1, "打印的内容&q ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
VUE 集成 LODOP插件打印
VUE 集成LODOP插件打印 VUE 集成LODOP插件打印 Lodop.C-Lodop使用说明及样例 VUE简单使用lodop 1.创建LodopFuncs.js文件 2.在打印功能vue页面引入 ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
Vue调用后台接口渲染列表
下载Axios npm install axios -s 在min.js中引入 import axios from 'axios' Vue.prototype.$axios= axios 拿到接口先封 ...

Vue实现打印机接口打印组件

1.下载打印相关的外部JS文件到本地

2.在项目的main.js文件中注入print方法

3.在需要打印的组件中写入相关方法

4.在调用组件的地方实现打印方法

Vue实现打印机接口打印组件相关推荐

最新文章

热门文章