vue使用print.js实现打印功能，以及添加打印机

print.js 一个javascript库，可以实现打印功能

github地址

github地址: https://github.com/crabbly/print.js

官网地址

https://printjs.crabbly.com/

安装print

npm install print-js --save

在项目里面引用

<!-- button调用方法 -->
<el-button title="打印" @click="Toprint"><div><i class="iconfont kf-dayin"></i></div>
</el-button>
//在script里面引用print-js
import printJS from 'print-js'
//使用打印功能
//方法
Toprint() {var someJSONdata = [{name: 'John Doe',email: 'john@doe.com',phone: '111-111-1111'},{name: 'Barry Allen',email: 'barry@flash.com',phone: '222-222-2222'},{name: 'Cool Dude',email: 'cool@dude.com',phone: '333-333-3333'}]printJS({printable: someJSONdata,properties: ['name', 'email', 'phone'],type: 'json'})},

结果

也可以将print.js放如src文件夹内

在main.js引用print

import Print from './libs/Print/print'
Vue.use(Print)

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

使用打印功能

<el-button title="打印" @click="print"><div><i class="iconfont kf-dayin"></i></div>
</el-button>style="height:100%;width:100%;overflow:auto;"ref="templateContainer"
></div>

//打印
print(index, row) {this.$print(this.$refs.templateContainer)console.log(index, row)}

结果

这是我的要打印的数据

这是打印的

修改打印的范围

因为打印的是table，使用我们可以使用样式控制table的显示区域，只有显示的部分才会打印，隐藏起来的不打印
如下所示：对比之前的图，只把需要的内容显示，其他空白部分用样式隐藏起来

page-break-after：always 实现分页打印

页面效果

html

在页面上显示：

使用page-break-after：always可以实现分页打印的效果
打印代码：

printable是标签的id
Toprint() {printJS({printable: 'printJS-table',type: 'html',scanStyles: false})},

添加打印机

因为电脑自带的打印机只有一些常见的纸张，无法自定义纸张大小，所以，自己安装一个打印机，用来调整纸张大小

网盘地址：
链接: https://pan.baidu.com/s/1WOSUXZQ3eocB2uCey6k-Fw提取码: g48d
1.安装下面这个文件即可

2.选择打印机，弹出打印文件层，点击目标打印机，选择查看更多

3.进入选择打印机页面，点击管理

4.点击打印机

5.选择刚刚安装的打印机，点击管理

6.后面点击打印首选项，然后选择高级，点击编辑自定义页面，最后调整自己需要的页面大小

vue使用print.js实现打印功能，以及添加打印机相关推荐

使用vue-print.js远程打印功能
安装print-js npm install print-js --save main挂载 import Print from 'vue-printjs'Vue.use(Print) 使用需要打印的 ...
VUE整合VUE-PRINT-NB实现前端打印功能
VUE整合VUE-PRINT-NB实现前端打印功能插件安装 npm install vue-print-nb --save 插件安装时最好在package.json中同时加入依赖信息,便于项目上其他 ...
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
vue使用print.js打印插件
任务:解决vue页面局部打印功能 print.js插件,可以打印 html.pdf.json数据官网:https://printjs.crabbly.com/ 一个整理的很好的讲解:https:// ...
前端使用print.js实现打印
前言项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容.下面的内容基于vue. 如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用q ...
Vue使用PrintJS实现页面打印功能
说明大家好,我是呆小杰,收到一个需求,要求实现拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能. 实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内 ...
layui js 自定义打印功能实现
打印功能的实现往往是新建一个页面,然后在新建页面中画出你想要的效果,然后调用浏览器的打印功能进行打印项目依赖: layui jquery 记得换layui和jquery引入路径完整项目代码: &l ...
Vue实现PDF导出和打印功能
在Vue页面上实现PDF导出和打印功能依赖于两个npm插件,分别为vue-to-pdf和vue-easy-printer. 安装命令: npm i vue-to-pdf --save npm i vu ...
window.print()前端实现打印功能
方法介绍 window.print()方法用于打印当前窗口的内容. 默认打印页面中body里的所有内容. 调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印配置. 1. 打印方法 1 ...