Primero: cree el código de archivo print.js en la carpeta común de la siguiente manera
// 打印类属性、方法定义
/* 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 = 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) {
// 4. 添加实例方法
Vue.prototype.$print = Print
}
export default MyPlugin
Registre el módulo en main.js
// 打印
import print from '@/common/print'
Vue.use(print)
Cree el componente Print.vue que debe imprimirse, introduzca el componente en el componente principal y regístrelo
// 引入
import print from './Print'
// 注册
components:{
productionTaskListDetail,print},
El diseño básico del componente principal (es decir, el componente que desencadena el evento)
<!--触发事件按钮-->
<el-button type="primary" icon="el-icon-printer" circle size="mini" plain @click="printerView(scope.row)"></el-button>
<!--打印的页面-->
<section ref="printer" >
<print @changeData='changeData' :printId="printId" class="printer"></print>
</section>
Llamar al método de impresión
printerView(val) {
this.$print(this.$refs.printer)
},
Agregue un estilo de consulta de medios a la página impresa (ver el componente oculto establece este estilo)
<style scoped>
@media screen {
.printer {
display: none;
}
}
</style>
Nota de uso: si el componente necesita el valor del componente principal, se puede utilizar la siguiente lógica. Si el componente que se va a imprimir tiene una imagen, es posible que la imagen no se muestre durante la vista previa de impresión. La solución es pasar un parámetro printerId al componente principal después de que se cargue la imagen. El printerId aquí también son los datos pasados por el componente principal al componente secundario, y el componente principal recibe el PrinterId E imprima cuando printerId no esté vacío
// 给子组件传id
printerView(val) {
this.printId = val.id;
},
// 判断子组件传过来的id，如果不为空证明子组件已经渲染结束
changeData(data) {
if(!!data) {
this.$print(this.$refs.printer)
this.printId = ''
}
}
// 图片渲染成功给父组件传递参数
<div class="image">
<el-image @load="function(e) {
$emit('changeData',printerId)
}" class="image-possion" style="width: 150px; height: 150px" :src="`/rebar/base/downQr/?key=SCRUD&id=${
headerData.id}`"></el-image>
</div>