google-chrome - official - inspinia v5
Copie imágenes SVG del navegador al portapapeles (3)
Estoy desarrollando una aplicación web que toma las entradas del usuario, realiza cálculos de ingeniería y luego muestra un informe o gráfico formateado. Los gráficos son diagramas de ingeniería y no siempre gráficos estándar como los gráficos circulares. La función principal de la aplicación es permitir al usuario copiar estos diagramas desde el navegador a un documento de Word o Excel.
Tengo que hacer una elección sobre el uso de SVG generado en el cliente, o mapas de bits generados en el lado del servidor. Prefiero el enfoque SVG y la creación de prototipos se ve bien, sin embargo, la copia del gráfico SVG parece ser incompatible con los navegadores, especialmente si el gráfico se muestra en un div (es decir, toda la página no es .svg). Por ejemplo, IE muestra una "copia" en el menú desplegable, pero copia solo parte del gráfico SVG en el portapapeles. Chrome no ofrece ninguna opción de copia si hago clic derecho en el gráfico SVG.
Si hago búsquedas en Google, me sorprende ver la poca información que hay sobre el problema de obtener una imagen SVG de una aplicación web en el portapapeles.
Mi pregunta para los lectores que han trabajado en este problema :
¿Hay una forma consistente de obtener un elemento SVG que sea parte de un DOM más grande en el portapapeles, preferiblemente usando JavaScript?
¿Alguna otra recomendación dado mi requisito de obtener gráficos del navegador en el portapapeles?
Javascript y el Portapapeles es un dolor en el a **.
Hay una solución para su situación que yo sepa:
Si se trata de un archivo SVG verdadero, en Chrome, haga clic con el botón derecho en la imagen y seleccione "Inspeccionar elemento". La consola del navegador se abrirá y se abrirá a un elemento SVG que puede seleccionar en el inspector. Haga clic derecho en la etiqueta svg en el inspector, y seleccione ''Copiar'' o ''Copiar como HTML'' (no puedo recordar exactamente las opciones)
Pegue ese texto en un archivo de texto y luego guárdelo con una extensión SVG. Luego se puede abrir en cualquier navegador o programa de edición SVG. Inkscape es una buena opción para editar y depurar, ya que puede ver y editar todo el archivo SVG en un editor de estilo XML.
* * Disculpa, me perdí la primera parte de tu solicitud. Eso será complicado. Me temo que no puedo ayudar con esa parte. Copiar y pegar probablemente no sea su mejor opción. Hay clases PHP para manipular archivos SVG y Excel, y ese será probablemente el camino a seguir.
En lugar de mostrar el svg como un elemento svg mostrarlo con la etiqueta img . Esto tiene algunas limitaciones (no se pueden mostrar fuentes personalizadas o secuencias de comando incrustadas, pero parece que este no es su caso de uso). La ventaja es que se comporta exactamente como se esperaría de una imagen (puede arrastrar y soltar, hacer clic derecho y copiar, etc.).
Para hacer esto, necesitas codificarlo con base64. Puede hacerlo desde el lado del servidor o del lado del cliente con js. Su etiqueta de imagen termina pareciéndose a ...
<img src="data:image/svg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf" width="..." height="..." alt="diagram" />
Donde R0lGODlhEAAQAMQ... es tu svg codificada en base64.
Logré copiar el contenido de SVG al portapapeles como texto XML simple, pero me pareció inútil, porque Inkscape (que uso para trabajar con SVG) no reconoce el texto en el portapapeles como SVG . Parece que copiar texto de SVG no es suficiente y el navegador también debe establecer el tipo mime en image/svg+xml .
Intenté varios trucos con la API del portapapeles HTML5, pero finalicé con el problema de que Chrome no puede exportar el tipo MIME al portapapeles del sistema. El informe de errores correspondiente y el enlace jsfiddle están aquí https://code.google.com/p/chromium/issues/detail?id=504700