javascript - ticket - Imprimir solo SVG desde el navegador

javascript print div

Question

Estoy trabajando en una página web que renderizará gráficamente los gráficos SVG en función de la interacción del usuario. Una vez completado, me gustaría que el usuario pueda imprimir solo los gráficos, no solo imprimir la página web en la que reside y el SVG junto con ella, sino solo el SVG. Además, la versión impresa idealmente se dibujará de forma ligeramente diferente a la versión del navegador en pantalla. ¿Es posible este tipo de cosas con los navegadores actuales y SVG?

En Java, puedo proporcionar un motor de pintura o un motor de impresión a la rutina de dibujo de mis aplicaciones, y esto maneja el mismo problema simplemente. Sin embargo, soy un novato en SVG y no puedo determinar si existe algún mecanismo similar.

Answer 1

Puede llamar a window.print para comenzar el proceso de impresión desde javascript.

Puede hacer que las versiones impresas y visibles sean diferentes mediante consultas de medios, por ejemplo,

@media print { different css for print SVG }

Si no desea que las cosas existentes en la página se impriman, utilice la consulta de medios para establecer su visualización: none o visibility: hidden.

Answer 2

Puedes usar jQuery. Suponga que tiene su svg en un DIV (svgDiv) en la página web, incluya un botón de impresión que llame al siguiente, donde la raíz svg tenga un id = mySVG, para obtener ancho / alto, o use el valor / alto svgDiv. Esto imprimirá la vista que se encuentra actualmente en la ventana svg.

//---print button---
var printSVG = function()
{
var popUpAndPrint = function()
{
var container = $(''#svgDiv'');
var width = parseFloat(mySVG.getAttribute("width"))
var height = parseFloat(mySVG.getAttribute("height"))
var printWindow = window.open('''', ''PrintMap'',
''width='' + width + '',height='' + height);
printWindow.document.writeln($(container).html());
printWindow.document.close();
printWindow.print();
printWindow.close();
};
setTimeout(popUpAndPrint, 500);
};