|
業務場景常見于一些訂單記錄發票等的一些pdf 打印，保留了樣式，可以打印彩色內容也可以打印黑白內容，如果業務復雜的比如添加水印的目前不支持，一般會特定處理，通過canvas 的方式處理。 封裝打印腳本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 (dom instanceof 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 = this; iframe.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: HTMLElement instanceof Object ? function(obj) { return obj instanceof HTMLElement; } : function(obj) { return ( obj && obj instanceof Object && obj.nodeType === 1 && obj.nodeName instanceof String ); }};const MyPlugin = {};MyPlugin.install = function(Vue, options) { // 4. 添加實例方法 Vue.prototype.$print = Print;};export default MyPlugin; print.js 注冊插件在vue項目main.js 中加入 使用測試說明： 在需要打印的地方添加ref,不需要打印的地方添加 no-print 的class 類名，通過 $print 去調用需要打印的ref（或者用定義id然后調用id節點的方式也可以，vue中推薦用ref） 說明： 在需要打印的地方添加ref,通過 $print 去調用需要打印的ref<template> <div class='wrapper'> <button @click='$print($refs.print)'>打印</button> <button @click='handleClick'>JS調用打印</button> <div ref='print'> <h1>這是打印區域</h1> <small style='color:red'>字體顏色備注</small> <p class='no-print'>這是不用打印區域</p> </div> </div></template><script>export default { name: 'demo', methods: { // JS 操作調用 handleClick() { this.$print(this.$refs.print) } }}</script><style lang='scss' scoped>.wrapper { padding: 2rem; background: #ffffff; margin: 1rem;}</style>效果展示 打印前  打印后 其他相關插件
這兩個文檔都很完善，我簡單介紹下安裝使用 Print.js 地址： https://printjs./
<el-button @click='handleClickPrint'>打印</el-button><div id='print'> <el-table :data='tableData' style='width: 100%'> <el-table-column prop='date' label='日期' width='180'> </el-table-column> <el-table-column prop='name' label='姓名' width='180'> </el-table-column> <el-table-column prop='address' label='地址'> </el-table-column> </el-table></div>
vue-print-nb 地址： https://github.com/Power-kxLee/vue-print-nb
npm install vue-print-nb --savemain.js 中導入注冊import Print from 'vue-print-nb'Vue.use(Print);
其他細節可以看官方文檔，每一個技術官方文檔最詳細的，最起碼都應該看一遍的。 |
|
|
