Vue 使用 print.js 实现打印组件

首先：在 common 文件夹下面创建 print.js 文件代码如下

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {if (!(this instanceof Print)) return new Print(dom, options);this.options = this.extend({'noPrint': '.no-print'}, options);if ((typeof dom) === "string") {this.dom = document.querySelector(dom);} else {this.isDOM(dom)this.dom = this.isDOM(dom) ? dom : dom.$el;}this.init();
};
Print.prototype = {init: function () {var content = this.getStyle() + this.getHtml();this.writeIframe(content);},extend: function (obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},getStyle: function () {var str = "",styles = document.querySelectorAll('style,link');for (var i = 0; i < styles.length; i++) {str += styles[i].outerHTML;}str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";return str;},getHtml: function () {var inputs = document.querySelectorAll('input');var textareas = document.querySelectorAll('textarea');var selects = document.querySelectorAll('select');for (var k = 0; k < inputs.length; k++) {if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {if (inputs[k].checked == true) {inputs[k].setAttribute('checked', "checked")} else {inputs[k].removeAttribute('checked')}} else if (inputs[k].type == "text") {inputs[k].setAttribute('value', inputs[k].value)} else {inputs[k].setAttribute('value', inputs[k].value)}}for (var k2 = 0; k2 < textareas.length; k2++) {if (textareas[k2].type == 'textarea') {textareas[k2].innerHTML = textareas[k2].value}}for (var k3 = 0; k3 < selects.length; k3++) {if (selects[k3].type == 'select-one') {var child = selects[k3].children;for (var i in child) {if (child[i].tagName == 'OPTION') {if (child[i].selected == true) {child[i].setAttribute('selected', "selected")} else {child[i].removeAttribute('selected')}}}}}return this.dom.outerHTML;},writeIframe: function (content) {var w, doc, iframe = document.createElement('iframe'),f = document.body.appendChild(iframe);iframe.id = "myIframe";//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');w = f.contentWindow || f.contentDocument;doc = f.contentDocument || f.contentWindow.document;doc.open();doc.write(content);doc.close();var _this = thisiframe.onload = function(){_this.toPrint(w);setTimeout(function () {document.body.removeChild(iframe)}, 100)}},toPrint: function (frameWindow) {try {setTimeout(function () {frameWindow.focus();try {if (!frameWindow.document.execCommand('print', false, null)) {frameWindow.print();}} catch (e) {frameWindow.print();}frameWindow.close();}, 10);} catch (err) {console.log('err', err);}},isDOM: (typeof HTMLElement === 'object') ?function (obj) {return obj instanceof HTMLElement;} :function (obj) {return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';}
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {// 4. 添加实例方法Vue.prototype.$print = Print
}
export default MyPlugin

在 main.js 注册该模块

// 打印
import print from '@/common/print'
Vue.use(print)

创建需要打印的组件 Print.vue，在父组件引入该组件，并注册

// 引入
import print from './Print'
// 注册
components:{productionTaskListDetail,print},

父组件（也就是触发事件的组件）的基础布局

<!--触发事件按钮-->
<el-button type="primary" icon="el-icon-printer" circle size="mini" plain @click="printerView(scope.row)"></el-button><!--打印的页面-->
<section ref="printer" ><print @changeData='changeData' :printId="printId" class="printer"></print>
</section>

调用打印的方法

printerView(val) {this.$print(this.$refs.printer)
},

给打印的页面添加媒体查询样式（视图隐藏组件设置此样式）

<style scoped>@media screen  {.printer {display: none;}}
</style>

使用注意：如果组件需要父组件的值可使用以下逻辑。所需打印的组件如果有图片，打印预览时可能不会显示图片，解决办法，图片加载完成给父组件传递一个参数 printerId，这里的 printerId 也是父组件传给子组件的数据，父组件接收到 printerId ，且 printerId 不为空时执行打印

// 给子组件传idprinterView(val) {this.printId = val.id;},
// 判断子组件传过来的id，如果不为空证明子组件已经渲染结束
changeData(data) {if(!!data) {this.$print(this.$refs.printer)this.printId = ''}
}

// 图片渲染成功给父组件传递参数
<div class="image"><el-image @load="function(e) {$emit('changeData',printerId)}" class="image-possion" style="width: 150px; height: 150px" :src="`/rebar/base/downQr/?key=SCRUD&id=${headerData.id}`"></el-image></div>

Vue 使用 print.js 实现打印组件相关推荐

vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...
vue使用print.js打印插件
任务:解决vue页面局部打印功能 print.js插件,可以打印 html.pdf.json数据官网:https://printjs.crabbly.com/ 一个整理的很好的讲解:https:// ...
Vue中好用的打印组件 vue-print-nb
首先下载包 npm i vue-print-nb 按需引入页面并使用, 这个组件的好处是可以保留已有的样式, 不用写两套css (如果你使用的是print.js, 你是需要写两套css的) <d ...
前端使用print.js实现打印
前言项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容.下面的内容基于vue. 如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用q ...
Vue使用print.js连续打印多页A4表单
父组件 <el-dialog :visible.sync="printDialog" class="printDialog"><div ref ...
Print.js实现打印pdf，HTML，图片(可设置样式可分页)
目录一.安装及引入Print.js 二.介绍三.常用配置四.具体使用一.安装及引入Print.js 1.安装 npm install print-js --save //or yarn add ...
vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉
拉取历史记录,并在前端做无限下拉展示,是一个非常常见的使用场景. 最近在使用的 Vant (轻量.可靠的移动端 Vue 组件库),实现起来就非常方便. 模板实现代码 v-model="loa ...
vue项目使用Print.js插件实现PDF文件打印
一,Print.js介绍 Print.js主要是为了帮助我们在应用程序中直接打印PDF文件,而不需要离开界面,也不需要使用嵌入.对于用户不需要打开或下载PDF文件的特殊情况,只需要打印即可. 例如,当 ...
使用vue-print.js远程打印功能
安装print-js npm install print-js --save main挂载 import Print from 'vue-printjs'Vue.use(Print) 使用需要打印的 ...

Vue 使用 print.js 实现打印组件

Vue 使用 print.js 实现打印组件相关推荐

最新文章

热门文章