const Print = function (dom, options) {
if (!(this instanceof Print)) return new Print(dom, options)
this.options = this.extend({
noPrint: '.no-print',
onStart: function () { },
onEnd: function () { },
}, options)
if ((typeof dom) === 'string') {
this.dom = document.querySelector(dom)
} else {
this.dom = dom
}
this.init()
}
Print.prototype = {
init: function () {
const content = this.getStyle() + this.getHtml()
this.writeIframe(content)
},
extend: function (obj, obj2) {
for (const k in obj2) {
obj[k] = obj2[k]
}
return obj
},
getStyle: function () {
let str = ''
const styles = document.querySelectorAll('style,link')
for (let i = 0; i < styles.length; i++) {
str += styles[i].outerHTML
}
str += '<style>' + (this.options.noPrint ? this.options.noPrint : '.no-print') + '{display:none;}</style>'
str += '<style>html,body,div{height: auto !important;}</style>'
return str
},
getHtml: function () {
let inputs = document.querySelectorAll('input')
let textareas = document.querySelectorAll('textarea')
let selects = document.querySelectorAll('select')
for (let 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 (let k2 = 0; k2 < textareas.length; k2++) {
if (textareas[k2].type === 'textarea') {
textareas[k2].innerHTML = textareas[k2].value
}
}
for (let k3 = 0; k3 < selects.length; k3++) {
if (selects[k3].type === 'select-one') {
let child = selects[k3].children
for (let 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) {
const iframe = document.createElement('iframe')
const f = document.body.appendChild(iframe)
const w = f.contentWindow || f.contentDocument
const doc = f.contentDocument || f.contentWindow.document
iframe.id = 'myIframe'
iframe.style = {...iframe.style, position: 'absolute', width: '0', height: '0', top: '-10px', left: '-10px'}
// iframe.style = 'position:absolute; width:0; height:0; top:-10px; left:-10px;'
doc.open()
doc.write(content)
doc.close()
doc.getElementsByTagName('body')[0].style.height = 'auto'
this.toPrint(w, function () {
// document.body.removeChild(iframe)
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
})
},
toPrint: function (w, cb) {
const _this = this
w.onload = function () {
try {
setTimeout(function () {
w.focus()
typeof _this.options.onStart === 'function' && _this.options.onStart()
if (!w.document.execCommand('print', false, null)) {
w.print()
}
typeof _this.options.onEnd === 'function' && _this.options.onEnd()
w.close()
cb && cb()
})
} catch (err) {
console.log('err', err)
}
}
},
}
export default {
install(Vue) {
Vue.prototype.$print = Print
},
}
1.在main.js文件直接引入,然后全局注册
import print from './print'
Vue.use(print)
2.在要打印的页面
在这里插入图片描述