vue使用打印功能以及注意事项
/**
* 打印类属性、方法定义
*/
const Print = function (dom, options, styleCss) {
if (!(this instanceof Print)) return new Print(dom, options, styleCss)
this.options = this.extend({
'noPrint': '.el-icon-tickets'
}, options)
if ((typeof dom) === 'string') {
this.dom = document.querySelector(dom)
} else {
this.isDOM(dom)
this.dom = this.isDOM(dom) ? dom : dom.$el
}
this.init(styleCss)
}
Print.prototype = {
init: function (styleCss) {
const content = this.getStyle(styleCss) + this.getHtml()
this.writeIframe(content,styleCss)
},
extend: function (obj, obj2) {
for (let k in obj2) {
obj[k] = obj2[k]
}
return obj
},
getStyle: function (styleCss) {
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;!important;}';
//新增样式，zoom缩小html
if(styleCss == null || styleCss == '' || styleCss == undefined){
str += '</style>'
}else{
str += styleCss+'</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) {
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') {
const child = selects[k3].children
for (let i in child) {
if (child[i].tagName === 'OPTION') {
if (child[i].selected) {
child[i].setAttribute('selected', 'selected')
} else {
child[i].removeAttribute('selected')
}
}
}
}
}
return this.dom.outerHTML
},
writeIframe: function (content,styleCss) {
let headHtml = this.getStyle(styleCss)
let html = ''
console.info("headHtml", headHtml)
console.info("this.getHtml()", this.getHtml())
html += '<html>' + headHtml + '</html><body>' + this.getHtml() + '</body>'
let w; let doc; let iframe = document.createElement('iframe')
let f = document.body.appendChild(iframe)
iframe.id = 'myIframe'
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(html)
doc.close()
const _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: (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) {
Vue.prototype.$print = Print
}
export default MyPlugin
vue中代码使用
我想打印div包含的所有,加上ref="print"
<div class="form_body" ref="print">代码内容等</div>
/**
* 打印
*/
formPrint() {
let self = this
let styleCss = 'body{zoom: 0.45;}'
self.$print(self.$refs.print,null,styleCss)
console.log('htmlToPaper1', this.$refs.print)
},
注意事项，如果要去掉页眉或页脚则使用
<style scoped>
@page{
size: auto A4 landscape;
margin: 3mm;
}
</style>