在项目里有个打印功能,将页面的部分内容打印出来,所以下面这篇文章主要给大家介绍了关于利用vue实现打印页面的几种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
1.第一种就是直接调用 window.print()方法
这种方法的坏处就是 默认打印整个页面，不能打印局部页面。
2.第二种使用v-print
首先先下载 npm install vue-print-nb --save
然后在main.js中引入 main.js中引入
import Print from 'vue-print-nb' Vue.user(Print)
由于我用的是jeecg所以和你们不太一样
然后就是在代码里面用了
//以是要打印的内容//打印结束打印
点击上面那个打印按钮 就会自动打印你想要的部分了
3.第三种使用print.js
使用这种的好处就是可以在打印前进行一些自己想要的操作 比如校验
第一步先下载print.js
我这边直接把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 "; return str; }, getHtml: function () { var inputs = document.querySelectorAll('input'); var textareas = document.querySelectorAll('textarea'); var selects = document.querySelectorAll('select'); for (var k = 0; k 然后把js放在自己的目录中
我的目录是这样子的
第二步在main.js中引入
import Print from '@/utils/printTest' // Vue.use(Print)
最后就是在页面中使用了
总结
到此这篇关于利用vue实现打印页面的几种方法的文章就介绍到这了,更多相关vue打印页面内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是利用vue实现打印页面的几种方法总结的详细内容，更多请关注0133技术站其它相关文章！
