javascript - una - como ver dos archivos de excel 2010 en dos pantallas

Cómo dividir la ventana del navegador en dos paneles horizontales

Question

Hasta HTML 4 era posible crear diseños con marcos que cargaban diferentes archivos HTML en diferentes paneles.

Lo que quiero hacer es lograr un resultado similar pero cargando y mostrando en pantalla dos partes diferentes del mismo documento .

Mi paradigma ideal es MS Word, que permite dividir la ventana en 2 partes horizontales para mostrar en cada una las diferentes secciones del mismo documento (extremadamente útil cuando se comparan diferentes partes del documento o cuando se mueven partes de un lado distante al otro) documentos) o MS Excel (incluso LibreOffice u OpenOffice Calc tienen una característica similar) que permite dividir el panel de la hoja en 2 (o incluso en 4) secciones por la misma razón o mantener visibles algunas filas en la parte superior o algunas columnas en la derecha (encabezado de fila o columna, por ejemplo).

La siguiente imagen lo muestra:

La flecha roja indica el margen que divide el documento de la ventana en dos, lo que permite desplazar cada parte por separado, como se puede ver al mirar el número de la fila que en el panel superior es 3 y 21 el panel inferior. También el canal es de tamaño variable.

¿Es posible hacer esto usando vanilla JS con HTML y CSS (no jQuery u otro marco, por favor)?

Restricciones

1. El documento debe ser el mismo para los 2 paneles (arriba y abajo) (el antiguo conjunto de marcos debe cargar dos documentos diferentes o el mismo documento dos veces: ¡ya estoy usando esto pero quiero un enfoque más limpio si es posible!)
2. El separador (¿gutter?) Tiene que ser redimensionable
3. Las dos partes diferentes del documento están perfectamente sincronizadas en el sentido de que si modifico algo (con la propiedad contenteditable ) en el panel superior (o inferior), el panel inferior (o superior) muestra instantáneamente la edición que se acaba de hacer, como lo hace MS Word o Excel ... así que si borro algo en cualquier celda del panel inferior, incluso el contenido superior se ajusta en consecuencia (incluso el tamaño de la columna), como ocurre con MS Word, Excel, Calc, etc.
4. La vista dividida se activará y desactivará al hacer clic en un botón específico
5. No me interesan los navegadores antiguos, solo el script ECMA 2015 o los más recientes
6. El archivo HTML tiene muchos detectores de eventos adjuntos con el método addEventListener() para varios elementos HTML como botones, cuadros de texto, casillas de verificación, cuadros de selección, etc.: esto significa que la solución respondida debe poder mantenerlos intactos y trabajar en ambos paneles .

¿Dónde voy a usar esto?

Tengo un montón de tablas en un archivo HTML local (sin servidor web involucrado) que carga datos desde un archivo csv o desde el almacenamiento de la sesión del navegador, y con frecuencia necesito comparar datos de diferentes puntos o mantener el encabezado fijo en la parte superior mientras desplazando el resto de una tabla específica o al insertar nuevos datos o actualizar datos antiguos en uno de ellos para ver continuamente en qué celda de la tabla estoy insertando o actualizando datos.

Situación:

Por el momento estoy usando el siguiente código:

function splitView()
{
    var tgtSrc = location.href;
    var frameset =  ''<frameset rows="*,*">'' +
                        ''<frame name="'' + upFrame + ''" src="'' + tgtSrc + ''">'' +
                        ''<frame name="'' + dwFrame + ''" src="'' + tgtSrc + ''">'' +
                    ''</frameset>'';
    document.write(frameset);   
}

La función anterior divide horizontalmente el panel de la ventana actual en dos marcos llamados upFrame y dwFrame (que son dos variables). Después de dividir un canal de tamaño variable se coloca entre los dos marcos.

Además del algoritmo para sincronizar ambas instancias de los datos del documento: funciona al guardar en cada edición de datos en un marco los datos en el almacenamiento de la sesión de ese marco y volver a cargar los mismos datos en el otro marco.

Funciona un poco, pero los marcos no son el camino a seguir, me gustaría deshacerme de la necesidad de cargar el documento dos veces y sincronizar cada instancia con todos los inconvenientes relacionados. Desafortunadamente, esta no es la respuesta definitiva que estoy buscando porque tiene algunos inconvenientes:

1. Las etiquetas de marcos y conjuntos de marcos no son compatibles con los modernos archivos compatibles con HTML5, incluso si todavía son compatibles con los navegadores
2. El archivo debe cargarse dos veces (una vez por fotograma), lo que significa una notable falta de rendimiento y dificultad para sincronizar en tiempo real las ediciones en un fotograma con el otro fotograma (posiblemente se necesita sincronización bidireccional para que las ediciones se puedan realizar en ambas partes mostradas) del documento). Desafortunadamente, incluso el proceso de sincronización necesario significa perder las actuaciones que bloquean la interfaz de usuario por algún instante en cada bucle de sincronización
3. El proceso de sincronización no se realiza en tiempo real, tiene cierto retraso (algunos segundos): si lo hago más corto, tengo una gran falta de rendimiento que incluye la congelación del navegador.

Así que estoy abierto a mejores respuestas con soluciones más limpias y eficientes. (Incluso le he propuesto a los desarrolladores de Chrome que implementen una función para él en el navegador, porque realmente creo que esta es una característica que debe tener, especialmente teniendo en cuenta la expansión de los sistemas de administración de datos en línea)

Lo que estoy buscando:

El uso del código anterior que estoy usando ya no es obligatorio en absoluto: las respuestas también pueden proponer un enfoque completamente diferente.

Así que la solución definitiva que estoy buscando es algo similar a la función de división utilizada por Google Spreadsheet (si pueden, espero que nosotros también podamos), aquí hay una imagen con el ejemplo.

Míralo con atención: está el canal que se puede mover horizontalmente (también hay un canal vertical, pero no me importa la división vertical, solo horizontal) y cuando la hoja de cálculo se desplaza por las filas, desaparece debajo de ella: en De hecho, la primera fila sobre el canalón es la n. 1 la primera fila por el canal es n. 45.

Observe también la pequeña flecha blanca de dos puntas indicada por la gran flecha roja en el extremo izquierdo de la imagen.

Traté de estudiar el enfoque de la hoja de cálculo de Google para realizar ingeniería inversa y extraer las características más destacadas y adaptar la misma "filosofía" a mi aplicación local, pero no soy lo suficientemente bueno para entender exactamente lo que hicieron: mi sospecha es que cuando aparece una "tabla". fila golpea el canal "solo se esconde detrás de él, pero no estoy seguro.

En mi humilde opinión, esta es una característica que cada navegador (incluso aquellos para dispositivos portátiles) debe haber implementado de forma nativa y sin usar la tecnología antigua de marcos que ya no se admite en html 5. Desafortunadamente, esta posibilidad de dividir el mismo documento para mostrar y editar diferentes partes de ella (como una tabla muy larga, por ejemplo) que mantiene cada panel actualizado recíprocamente, no es (todavía) una función de navegador, por lo que mientras tanto ... se necesita una solución.

Darse cuenta:

La propiedad CSS

position: sticky;

También se podría utilizar para resolver parte del problema (para mantener al lector atascado al editar o al insertar datos en el cuerpo), pero desafortunadamente no parece funcionar como se espera en los elementos del lector, al menos en algunos navegadores. También resuelve solo una parte del problema: de hecho, si es necesario comparar datos de diferentes partes de la misma tabla o de diferentes tablas en el mismo documento, esta solución no es buena en absoluto. Así que se necesita algo más.

Answer 1

Creo que puedes lograr eso con divs.

Primero crea dos divs para mantener las vistas superior e inferior.

luego clonar luego el contenido principal de cada div.

Al ajustar las dimensiones y la posición de cada div, puede obtener la vista de un div dividido en dos partes.

También puede crear secuencias de comandos de tamaño para gestionar la altura de cada div vista

para acciones en cascada en múltiples vistas. puede utilizar eventos en la vista superior para realizar los cambios en la vista inferior. y en la vista inferior para hacer los cambios en la vista superior.

Finalmente lo siento por la mala explicación.

Hice jsfiddle para explicar el enfoque

[1]: https://jsfiddle.net/EmadElpurgy/r9w93zo7/ sample code

Answer 2

Probablemente haya mejores soluciones que el hack que he encontrado, pero intentémoslo.

Si desea tomar la página completa y simplemente dividirla, puede usar su solución de conjunto de marcos, pero en lugar de hacer que el navegador cargue el recurso dos veces, solo puede copiar su HTML y escribirlo en los marcos:

<html>
  <head>
    <style type="text/css">
        body { color: red; } /* Only used to test if CSS is copied as well
    </style>
  </head>
  <body>
      Hello world!
  </body>

  <script type="text/javascript">
    function inFrame () {
      try {
    return window.self !== window.top;
      } catch (e) {
        return true;
      }
    }


    function buildFrames() {
      const documentHTML = document.documentElement.innerHTML;

      const frameset = document.createElement(''frameset'');
      frameset.rows = ''*,*'';

      const frame1 = document.createElement(''frame'');
      const frame2 = document.createElement(''frame'');

      document.documentElement.innerHTML = ''<html><body></body></html>'';

      frameset.appendChild(frame1);
      frameset.appendChild(frame2);

      document.body.appendChild(frameset);

      frame1.src = ''data:text/html;charset=utf-8,'' + encodeURI(documentHTML);
      frame2.src = ''data:text/html;charset=utf-8,'' + encodeURI(documentHTML);
    }

    if (!inFrame()) {
        buildFrames();
    }
  </script>
</html>

Sin embargo, debes tener cuidado con el código javascript que se ejecuta dentro de tus páginas. Como puede ver, también he tenido que comprobar si la página aún no está dentro de un marco, de lo contrario seguiría agregando conjuntos de marcos al documento para siempre (o al menos hasta que el navegador lo impida).

Answer 3

Solo por curiosidad, si son archivos locales en su computadora, ¿por qué intenta editar datos de tablas de archivos csv en un navegador en lugar de usar las habilidades nativas de un programa como Excel que mencionó anteriormente? ¿O si quieres hacerlo en el navegador, las hojas de Google permiten la pantalla dividida? Sin faltarle el respeto, no entiendo por qué no usar un programa dedicado y optimizado para este tipo de trabajo.

Si desea continuar utilizando marcos, debería poder volver a cargar el archivo en un marco y simplemente copiar el HTML interno de un marco a otro, algo como lo siguiente. Si está utilizando el almacenamiento de sesión, debería (?) Ser más rápido para guardar las ediciones en eso y en el archivo csv, pero cargar desde el almacenamiento de sesión en lugar del archivo.

window.frames[upFrame].document.body.innerHTML = window.frames[dwFrame].document.body.innerHTML;

En lugar de usar marcos, puede usar DIV como contenedores, cargar en el almacenamiento local como sugiera y rellenar ambos DIV desde allí. los archivos guardados irían tanto al archivo csv como al almacenamiento local como la solución de marcos. Javascript puede realizar un seguimiento de la parte superior de desplazamiento, por lo que una vez que se recarga desde el almacenamiento local, puede "abrir" las dos secciones a las filas en las que estaban.

Sin embargo, una solución más rápida podría ser mantener los datos CSV en la memoria (matriz) y guardarlos en el CSV, pero la actualización desde la memoria sería mucho más rápida que un archivo en teoría.

Answer 4

Solo voy a abordar parcialmente su pregunta, ya que no tengo una solución completa.

Las etiquetas de marcos y conjuntos de marcos no son compatibles con los modernos archivos compatibles con HTML5, incluso si todavía son compatibles con los navegadores

Frame ha sido desaprobado a favor de iframe . Esto debería comportarse más o menos de la misma manera.

Para garantizar la sincronización entre los dos paneles con las restricciones que ha establecido, tendrá que escribir JS personalizados, especialmente porque es contrario al marco / paquete.