En el proyecto vue, la función de impresión de la página HTML. En el proyecto, a veces es necesario imprimir la forma de la página,
Encontré un componente de impresión vue-print-nb en Internet
El código fuente de este blog: https://github.com/shengbid/vue-print , solo existe el código del componente de impresión, solo necesita esta función para descargar este
https://github.com/shengbid/vue-demo En este proyecto, se coloca el código de algunas funciones escrito en el blog habitual. Puedes descargarlo si lo necesitas. Si necesitas ayuda, haz clic en una estrella.
Cómo utilizar
Instalar npm install vue-print-nb --save
Regístrese en el archivo main.js
importar Imprimir desde 'vue-print-nb'
Vue.use (Imprimir);
Usado en la página, agregue una identificación al contenedor que debe imprimirse, y el botón de impresión pasa en esta identificación
html:
<div id="printMe" style="background:red;">
<p>葫芦娃，葫芦娃</p>
<p>一根藤上七朵花 </p>
<p>小小树藤是我家 啦啦啦啦 </p>
<p>叮当当咚咚当当 浇不大</p>
<p> 叮当当咚咚当当 是我家</p>
<p> 啦啦啦啦</p>
<p>...</p>
<div class="describle">
<el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
<el-form-item label="姓名:" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="描述:" prop="describle">
<el-input
:disabled="detail"
type="textarea"
:rows="4"
:maxlength="2000"
placeholder=""
v-model="form.describle">
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<button v-print="'#printMe'">Print local range</button>
Haga clic en el botón Imprimir para imprimir la página.
Encontré un problema en el proceso de uso de este complemento. El contenido de la etiqueta de entrada normal no es un problema. No se puede mostrar el contenido del campo de texto del área de texto. Revisé el complemento y descubrí que el autor usó el valor valor al asignar el formulario. Este tipo de asignación no es válido para algunos formularios de doble etiqueta y debe modificarse
PD: El autor de la nueva versión ha solucionado este problema y los estudiantes que usan la nueva versión pueden ignorarlo.
Este método de cambiar directamente el paquete no es muy bueno. Si otras personas descargan su código, también necesita modificar el paquete. Por lo tanto, es mejor sacar este paquete, ponerlo en el archivo y hacer referencia a él directamente en main .js
main.js 引用 importar Imprimir desde '@ / utils / vue-print-nb /'
Agregar
Recientemente recibí una pregunta sobre cómo establecer el título de la página impresa. Lo probé yo mismo y descubrí que el método anterior no estaba definido. Fui al sitio web oficial y lo verifiqué. El autor modificó este componente nuevamente, y ahora se ha vuelto más configurable.
Nota: Aquí, printObj en v-print = "printObj" debe ser consistente con el valor predeterminado de exportación -> datos -> retorno -> printObj
Razón: El botón se puede imprimir directamente vinculando v-print directamente. El printObj encuadernado está vinculado a los datos predeterminados establecidos por usted mismo, como: vinculando el ID del div del área a imprimir, el título que se muestra después de la impresión, etc.
Ahora lo que se pasa es un objeto,
Cuando hay mucho contenido de impresión, el uso de vue-print-nb puede causar problemas de composición.
Aquí hay un método para convertir primero en una imagen e imprimir:
<template>
<div>
<div id="printMe" ref="printContent">
<ul class="content">
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
</ul>
</div>
<el-button type="primary" @click="toImg">转图片打印</el-button>
<el-button v-print="printObj" type="primary">直接打印</el-button>
<img style="margin-top:20px;" :src="img" alt="">
</div>
</template>
<script>
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
export default {
data() {
return {
img: '',
printObj: {
id: 'printMe',
popTitle: '打印',
extraCss: 'https://www.google.com,https://www.google.com',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
}
},
watch: {
},
created() {
},
methods: {
toImg() { // 转图片打印
html2canvas(this.$refs.printContent, {
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight
}).then((canvas) => {
// let url = canvas.toDataURL('image/jpeg', 1.0)
const url = canvas.toDataURL()
this.img = url
printJS({
printable: url,
type: 'image',
documentTitle: '打印图片'
})
console.log(url)
})
}
}
}
</script>
Contenido complementario: Debido a que no lo he usado por un tiempo, no he encontrado algunos problemas con la versión actual. Recientemente, he visto algunas preguntas de blogueros.
He echado un vistazo a estos dos días en los que tengo tiempo, y adjuntaré algunos de los problemas y soluciones que he resumido a continuación. Puede que haya más imágenes, pero también espero describir el motivo en detalle tanto como sea posible. de simplemente dar una solución.
El código fuente de githup relacionado también se actualizará lo antes posible, es útil recordar la estrella de la canción
PD: debido a que estos problemas son el componente original del componente, la modificación debe cambiar el código fuente del componente, no lo modifique directamente en node_modlues, copie este paquete de instalación vue-print-nb y colóquelo en su propio archivo de proyecto,
Puede que no haya directorio src al copiar al principio, no importa, se generará automáticamente después de ejecutarlo, después de sacarlo, también debe modificar el método de importación de mian.js para introducir el archivo tag_textarea.umd bajo lib
1. Imprime una página más en blanco
Ahora es muy probable que haya una página en blanco más cuando la use. Miro el código combinado con la información, porque el iframe creado tiene elementos de altura: 100%, y la imagen en la imagen es el elemento iframe. generado al imprimir.
Eche un vistazo a la página, porque configuré HTML: altura 100% en esta página, puede mirar su página, o puede ser el 100% del cuerpo u otros elementos. Este componente de impresión es para copiar todos los estilos CSS que introdujo, por lo que también heredará el estilo que establezcas
La solución es establecer una altura para HTML y anular el 100% predeterminado
Imprima de nuevo, agregué más contenido y no hay más páginas en blanco, esta configuración de altura no afectará la altura real de su contenido impreso, si realmente tiene dos páginas, aquí habrá dos páginas
De esta manera, imprimir una página en blanco más resolverá el problema. Este método es efectivo en mi prueba aquí. No se puede garantizar que se aplique a todos los escenarios. Sin embargo, es probable que una página en blanco más sea un problema con la configuración de la altura del elemento.
2. El método de devolución de llamada no surte efecto.
El método de devolución de llamada se agrega en la nueva versión. Lo probé yo mismo y no surtió efecto. Miré el código y no llamé al método de devolución de llamada entrante, ni devolvió nada. Agréguelo al código.
Referencia de componente:
Impresión de páginas
Corrija aquí y modifique el archivo, porque el proyecto que usé para probar tiene traducción de la gramática es5, tag_textarea.umd es la gramática es5, se puede usar, pero lo pondré en otro proyecto vue e introduciré el error gramatical es5,
También estoy muy agradecido a los blogueros por sus comentarios y recordatorios. Es casi engañoso. Si su proyecto no es compatible con la gramática es5, importe los archivos en src, modifique los dos archivos print.js y printarea.js, y busque el código si lo cambia. Mi githup en
Se utiliza el código bajo src, puede consultar https://github.com/shengbid/vue-print si es necesario ,
3. Ocultar el contenido que no necesita imprimirse
Si no necesita imprimir todo el contenido al imprimir, puede eliminar los elementos que no necesitan imprimirse antes de imprimir, el método específico
Se agrega un nuevo atributo ignoreClass al archivo print.js para ocultar los elementos que no necesitan imprimirse
También agregue printarea.js y agregue un método para eliminar elementos ocultos
Cuando se utiliza el componente, pase este elemento
Efecto de impresión
Quitar encabezado y pie de página
El complemento js o vue-print-nb traerá el encabezado, el pie de página y la hora al llamar a chorme para imprimir.
En chorme, puede configurar manualmente si desea imprimir encabezados y pies de página. Si no desea imprimir manualmente, puede consultar el control css:
css:
@page{
size: auto; /* auto is the initial value */
margin: 3mm; /* this affects the margin in the printer settings */
}