Estoy desarrollando una aplicación web que toma las entradas del usuario, hace los cálculos de ingeniería y, a continuación, se muestra un formato de informe o gráfico. Los gráficos son diagramas de ingeniería y no siempre el estándar de gráficos, como los gráficos Circulares. La función principal de la aplicación es permitir que el usuario copie 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. Yo prefiero el SVG enfoque y la creación de prototipos se ve bien, sin embargo, la copia de la SVG gráfico parece ser de manera incompatible compatible en todos los navegadores, especialmente si la gráfica se muestra en un div (es decir, la totalidad de la página no lo es .svg). Por ejemplo, es decir, muestra un «copiar» en el menú desplegable, pero las copias sólo una parte de los gráficos SVG en el portapapeles. Chrome no te da la opción de copia si me clic derecho en los gráficos SVG.

Si he de Google de todo, me sorprende ver la poca información que hay sobre el problema de la obtención de una imagen SVG de una aplicación web en el portapapeles.

Mi pregunta para lectores que se han trabajado a través de este problema:

  1. Es allí una manera consistente para obtener un SVG elemento que es parte de un
    grandes DOM en el portapapeles, de preferencia con JavaScript;

  2. Otras recomendaciones, dado que mi exigencia de obtener gráficos
    desde el navegador en el portapapeles?

InformationsquelleAutor Fritz45 | 2012-09-04

4 Comentarios

  1. 13

    Lugar de mostrar el svg como un svg elemento de la pantalla con el img etiqueta. Esto tiene algunas limitaciones (no se pueden mostrar fuentes personalizadas o incrustar scripts, pero este no parece ser el caso de uso). La ventaja es que se comporta exactamente como usted esperaría de una imagen (puede arrastrar y soltar, haga clic derecho y copiar, etc).

    Para hacer esto usted necesita para codificar con base64. Usted puede hacerlo lado del servidor o del lado del cliente con js. Su etiqueta de imagen termina buscando algo como…

    <img src="data:image/svg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf" width="..." height="..." alt="diagram" />

    Donde R0lGODlhEAAQAMQ... es tu codificado en base64 svg.

    • Gracias Duopixel por tu sugerencia. Esto parece que podría solucionar mi problema. Por favor, dame un día o dos para explorar y si funciona como espero que marcará su sugerencia como la respuesta. Gracias por tomarse el tiempo para ayudar!
  2. 1

    Javascript y el Portapapeles es un dolor en el**.

    Hay una solución para su situación, que yo sepa:

    Si es un verdadero archivo SVG, en Chrome, haga clic derecho sobre la imagen y seleccionar «Inspeccionar Elemento».
    El navegador de la consola de abrir, y debe abrir a una SVG elemento que se puede seleccionar en el inspector.
    Haga clic en la etiqueta svg en el inspector, y seleccione «Copiar» o «Copiar como HTML’ (no puede recordar las opciones que exactamente)

    Pegar texto en un archivo de texto y, a continuación, guarde el archivo con una extensión SVG. A continuación, se puede abrir en cualquier navegador o SVG programa de edición. Inkscape es una buena opción para la edición y depuración, como usted puede ver y editar todo el archivo SVG en un XML editor de estilo.

    **Lo siento – me perdí la primera parte de su solicitud. Que será complicado. Me temo que no te puedo ayudar con esa parte. Copiar y pegar probablemente no es la mejor opción, aunque. Hay clases PHP para manipular SVG y archivos de Excel, y que probablemente va a ser el camino a seguir.

    • También, usted puede investigar raphael.js – raphaeljs.com. No lo he utilizado antes, pero parece que puede haber una solución a su problema, y si no te proporcionarán otras opciones para trabajar con js.
    • Me temo que Raphael iba a salir de la OP en el mismo lugar donde está ahora: un elemento SVG que él no puede copiar en el portapapeles.
    • Gracias user1167442 por sus sugerencias. Creo que son válidos todos los caminos que explorar. Sin embargo, es el USUARIO quien tiene que hacer el copiar y pegar, y ya que sólo son ingenieros (broma), realmente no puedo pedir más a ellos que a haga clic derecho y seleccione copiar. Voy a mirar en la respuesta proporcionada por Duopixel a continuación. Gracias por tomarse el tiempo para ayudar!
  3. 1

    Me las arreglé para copiar contenido SVG al portapapeles en formato XML de texto, pero parecía inútil para mí, porque Inkscape (el que yo uso para trabajar con SVG), no reconoce el texto en el portapapeles como SVG. Parece que la copia de texto de SVG no es suficiente y el navegador también debe establecer la tipo mime a image/svg+xml.

    He probado varios trucos con HTML5 Portapapeles de la API, pero terminó con el problema de que Chrome no es capaz de exportar el tipo mime en el portapapeles del sistema. El pertinente informe de error y jsfiddle enlace porque es aquí https://code.google.com/p/chromium/issues/detail?id=504700

  4. 0

    Me enfrentó al mismo problema en un proyecto. El cliente quería tener un lugar complicado gráfico. Hemos decidido desarrollar el uso de svg. Funcionaba perfecto, pero el cliente quería ser capaz de descargar el gráfico como una imagen. Después de una búsqueda en internet, hemos encontrado saveSvgAsPng (https://www.npmjs.com/package/save-svg-as-png). Que hizo el truco para nosotros.

    El gráfico en la página como esta:

    <svg id="graph1" style="width: 700px; height: 700px">
    ....
    .....
    ...
    </svg>

    El gráfico se muestra, pero no puede ser descargado o copiado. Así que, aquí están los pasos:

    1. He instalado el paquete mencionado anteriormente.
    <script src="/path/to/lib/save-svg-as-png/lib/saveSvgAsPng.js"></script>
    1. Añadido «display: none:» para el svg código, de lo contrario vamos a tener dos instancias de la misma imagen:
    <svg id="graph1" style="width: 700px; height: 700px; display: none">
    
     <!-- //code goes here  -->
    
    
    </svg>
    1. Directamente después de la declaración de la svg gráfico, he añadido una nueva imagen. Esta imagen, es el marcador de posición para la nueva imagen png representación de la imagen svg. Me escondo en primer lugar, para evitar que la imagen parpadea mientras se carga. La fuente es inicialmente no especificado:
    <img id="graph1_as_png" src="" width="700" height="700" style="display: none">
    1. Después de la nueva imagen, he añadido algunas líneas de código, que a la conversión truco:
    <script>
    
        svgAsPngUri(document.getElementById("graph1")).then(uri => {
          $("#graph1_as_png").attr('src', uri).show();
        });
    
    </script>

    El origen de la segunda imagen se llena con una codificación BASE64 versión de la svg. Después de la conversión, se muestra la imagen. Ahora tenemos exactamente la misma imagen que nuestra imagen svg, pero con la posibilidad de descargar o copiar la imagen.

    Espero que esto te ayude wel..

Dejar respuesta

Please enter your comment!
Please enter your name here