El complemento de impresión printThis todavía tiene un gran hoyo, eche un vistazo primero y asegúrese de prestar atención:
Si utiliza la herramienta de desarrollo ( HBuilder.exe ), el formulario de acceso tiene la forma de una IP como: http://127.0.0.1:8020/TestBootStrap11/index.html; al imprimir con estilo de datos,
Sin embargo, si abre index.html localmente, acceda a la dirección: file:///E:/EhtmlWorking/TestBootStrap11/index.html, y luego imprima los datos, no habrá estilo;
Esto se debe a que la forma de introducir el estilo css en el complemento de impresión es en forma de http://ip:puerto/nombredelproyecto/css/bootstrap-table.css; //ip: dirección ip, puerto: número de puerto , projectName: nombre del proyecto, css :carpeta css
Por ejemplo: código en printThis.js: baseURL = documento.ubicación.protocolo + '//' + documento.ubicación.host;
No abra directamente la prueba de compatibilidad localmente, el estilo css no se importará;
No hablaré sobre cómo usar el complemento de impresión bootstrapTable printThis, puede consultar esta dirección: http://www.cnblogs.com/gzcblogs/p/7799621.html
Pero encontrará que el estilo de los datos impresos no se puede agregar. Hay dos soluciones:
La primera forma: (recomendado de esta manera):
① Modifique el importCSS de printThis.js y establezca el valor del atributo en falso; por ejemplo
// valores predeterminados
$.fn.printThis.defaults = { debug: false, // muestra el iframe para depurar importCSS : false , // importa la página principal css importStyle: false, // importa las etiquetas de estilo printContainer: true, // imprime el exterior container/$.selector loadCSS: "", // carga un archivo css adicional - carga varias hojas de estilo con una matriz [] pageTitle: "", // agrega un título a la página de impresión removeInline: false, // elimina todos los estilos en línea printDelay: 333, // encabezado de retraso de impresión variable: nulo, // prefijo a html
pie de página: nulo, // posfijo para html
formValues: verdadero, // preservar los valores de entrada/
formulario lienzo: falso, // copiar el contenido del lienzo (experimental)
base: falso, // preservar la etiqueta BASE o aceptar una cadena para la URL
doctypeString: '<!DOCTYPE html>', // html doctype
removeScripts: false, // elimina las etiquetas de script antes de agregar
copyTagClasses: false // copia las clases de la etiqueta html & body
};
② El proceso de llamada es el siguiente: ( No escriba ni asigne el atributo importCSS a falso, no lo configure a verdadero y debe tener el atributo loadCSS )
function printThis(){ // TestBootStrap11 es el nombre del proyecto (recuerde agregarlo)
$("#tabla").imprimirEsto({
depuración: falso,
// importCSS: fase ,
estilo de importación: falso,
imprimirContenedor: verdadero,
loadCSS: [" TestBootStrap11 /css/bootstrap-table.css"," TestBootStrap11 /css/bootstrap.min.css"],
pageTitle: "Tabla estadística de lavadoras",
retraso de impresión: 333,
valores de formulario: falso
});
};
Resumen: printThis.js proporciona dos formas de imprimir datos con estilos: importCSS y loadCSS El método importCSS agrega rutas de referencia de estilo y nombres de proyectos.
Y loadCSS agrega la ruta por sí mismo. Agregué el nombre del proyecto ( TestBootStrap11 ) sobre la base de la ruta relativa , y está bien.
No diré mucho sobre el segundo método, solo dame algunos consejos: encuentra la ruta a la que se refiere en printThis.js y agrega el nombre del proyecto.
Cómo obtener el nombre del proyecto:
función obtenerNombreProyecto(){
var pathName = documento.ubicación.pathname;
return rutaNombre.substring(0,rutaNombre.substr(1).indexOf('/')+1);
}
En este momento , se puede usar importCSS y el estilo predeterminado en printThis.js también se cambia a verdadero;
Creo que elegir uno de los dos al establecer atributos es una pérdida de rendimiento.
Después de mi uso de varias tablas de datos frontales, la implementación de encabezados de tabla complejos, agrupación de filas, subtotales, totales, exportación, impresión y otras funciones, recomiendo usar el marco de trabajo de la tabla de arranque