Introducción: no usar su propia impresión de página se eCharts imprimir el gráfico, porque obtiene nodo css menos de eCharts plug-in de Vue en. Imprimir los resultados estarán vacías. Después de que los documentos de referencia en línea múltiples, resumen de los pasos se establece un poco, con la esperanza de proporcionar un poco de ayuda para todos.
1. Cree un proyecto print.js Vue en una carpeta de archivos, el contenido del archivo:
//打印类属性,方法定义
/ * eslint-disable * /
const Imprimir = function (dom, opciones) {
Si el retorno nueva impresión (dom, opciones) ((este instanceof Imprimir)!);
this.options = this.extend ({
'NOPRINT': '.no-print'
}, opciones);
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 () {
contenido var = this.getStyle () + this.getHtml ();
this.writeIframe (contenido);
},
Extender: function (obj, obj2) {
for (var k en obj2) {
obj [k] = obj2 [k];
}
Devolver obj;
},
GetStyle: function () {
var str = "",
estilos document.querySelectorAll = ( 'estilo, enlace');
for (var i = 0; i <styles.length; i ++) {
str + = estilos [i] .outerHTML;
}
Str + = "<style>" + (this.options.notPrint this.options.notPrint: '.no-print'?) + "{Display: none;} </ style>";
str + = "<style> .results {width: 100% importante;!} .result .title {width: 100%;} </ style>";
str regresar;
},
GetHtml: función) {(
entradas var = document.querySelectorAll ( 'entrada');
var selecciona = document.querySelectorAll ( 'seleccionar');
var escrutinio = document.querySelectorAll ( 'lienzo');
for (var k = 0; k <inputs.length; k ++) {
si (entradas [k] .type == "casilla de verificación" || entradas [k] .type == "radio") {
si (entradas [k] .checked == true) {
entradas [k] .setAttribute ( 'marcado', "marcada")
} else {
entradas [k] .removeAttribute ( 'verificado')
}
} else if (entradas [k] .type == " de texto ") {
entradas [k] .setAttribute ( 'valor', entradas [k] .Value)
} else {
entradas [k] .setAttribute ( 'valor', entradas [k].
if (áreas de texto [k2] .Type == 'textarea') {
áreas de texto [k2] .innerHTML = áreas de texto [k2] .value
}
}
para (var k3 = 0; k3 <selects.length; k3 ++) {
si (selecciona [ k3] .type == 'seleccionar uno') {
niño var = selecciona [k3] .children;
for (var i en niño) {
si (niño [i] .tagName == 'opción') {
si (niño [i] .selected == true) {
niño [i] .setAttribute ( 'selected', "seleccionado" )
} else {
niño [i] .removeAttribute ( 'selected')
}
}
}
}
}
// escrutinio echars图表转为图片
for (var k4 = 0; k4 <canvass.length; k4 ++) {
var imageURL = escrutinio [k4] .toDataURL ( "image / png");
var img = document.createElement ( "img");
img.src = imageURL;
img.setAttribute ( 'estilo', 'max-width: 100%;');
img.className = 'isNeedRemove'
// escrutinio [k4] .style.display = 'none'
// escrutinio [k4] .parentNode.style.width = '100%'
// escrutinio [k4] .parentNode.style.textAlign = 'centro'
escrutinio [k4] .parentNode.insertBefore (img, sondeo [k4] .nextElementSibling);
}
//做分页
// style = "page-break-after: siempre"
páginas var = document.querySelectorAll ( 'contenido');
páginas [K5] .setAttribute ( 'estilo', 'page-break-after: siempre');
}
Devolver this.dom.outerHTML;
},
WriteIframe: function (contenido) {
var w, doc, iframe = document.createElement ( 'iframe'),
f = document.body.appendChild (iframe);
iframe.id = "myIframe";
//iframe.style = "position: absolute; anchura: 0; altura: 0; top: -10px; izquierda: -10px;";
iframe.setAttribute ( 'estilo', 'posición: absolute; anchura:' + document.querySelector ( '# siete') clientWidth + 'px; altura: 0; top: -10px; izquierda: -10px;'.);
w = f.contentWindow || f.contentDocument;
doc = f.contentDocument || f.contentWindow.document;
doc.open ();
doc.write (contenido);
doc.close ();
var elimina = document.querySelectorAll ( 'isNeedRemove');
for (var k = 0; k <removes.length; k ++) {
quita [k] .parentNode.removeChild (elimina [k]);
}
_Está var = esta
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 ( 'imprimir', false, null)) {
frameWindow.print ();
}
} Catch (e) {
frameWindow.print ();
}
FrameWindow.close ();
}, 10);
} Catch (err) {
console.log ( 'ERR', err);
}
},
IsDOM: (typeof HTMLElement === 'objeto')?
función (obj) {
retorno obj instanceof HTMLElement;
}:
Función (obj) {
retorno obj && typeof obj === 'objeto' && obj.nodeType === 1 && typeof obj.nodeName === 'cadena';
}
};
const MyPlugin = {}
MyPlugin.install = función (Vue, opciones) {
// 4.添加实例方法
Vue.prototype.
2. Para inscribirse en main.js encontrados para uso global. Aquí está mi código
Imprimir desde Importar './http/print'
Vue.use (Imprimir)
3. En la página eCharts, su método de impresión personalizados
<Tipo el-botón = "info " @ clic = "printTest ()" sin formato> Impresión </ el-botón> // botón Imprimir
printTest método () {// imprimir
esto. $ Impresión (esto. $ Refs.print, { 'notPrint': 'EL-Button, .el-SELECT.'})
}
4. consideraciones especiales:
en las páginas var = print.js document.querySelectorAll ( 'contenido. );' y document.querySelector ( '# siete px ') clientWidth +.' ; altura: 0; la parte superior: -10px; la izquierda: -10px; ');
la .Este contenido #seven para modificar la propia página personalizada de selección.
Aquí afijo mi elección de la ubicación, hay que prestar atención a la relación entre los anteriores dos selectores anidados en el div
<template>
<div class = "contenido" id "impresión" = "imprimir" ref =>
<div class = "bloque">
<el-selector de fecha
v-modelo = "valor2"
type = "datetimerange"
format = "aaaa-MM-dd HH: mm: ss"
: Picker-options = "pickerOptions"
gama-separador = "至"
puesta en marcador de posición = "开始日期"
end-marcador de posición = "结束日期"
>
</ el-selector de fecha>
<tipo el-botón = "info" @ clic = "dt ()">查询</ el-button>
<tipo el-botón = "info" @ clic = ") printTest (" plain>打印el-botón </ >
</ Div>
<- <P class = "prompt_p"> & nbsp; & nbsp; & nbsp; Prueba de datos dinámicos </ P> ->
<div style = "altura: 580px;" ID = "Siete">
</ div>
</ div>
</ Plantilla>
documentos de referencia:
https://blog.csdn.net/shishuwei111/article/details/94167974#comments
porque él también gracias expresadas!
----------------
responsabilidad: Este artículo es RDCC blogger "Mariscal de campo" del artículo original, siga el CC 4.0 BY-SA acuerdo de derecho de autor, que se reproduce, por favor incluya la fuente original y el enlace esta declaración.
fuente original: https: //blog.csdn.net/qq_43251032/article/details/101281839
