Hola, resulta que tengo un proyecto web local con html, js y css que va bastante bien, pero al intentar añadir importacion de archivos csv y json no van las funciones, estaria agradecido si alguien le hecha un vistazo y da con la solucion, gracias por anticipado. El proyecto es funcional al 90 por ciento cumple con la previsualizacion y la impresion.



index3.htmlscript.js [code]document.addEventListener('DOMContentLoaded', function() {
    // Elementos del DOM
    const elements = {
        dataForm: document.getElementById('dataForm'),
        idInput: document.getElementById('id'),
        codigoEnvioPrefijoInput: document.getElementById('codigoEnvioPrefijo'),
        numeroEnvioInput: document.getElementById('numeroEnvio'),
        setNumeroBtn: document.getElementById('setNumeroBtn'),
        baseCodeInput: document.getElementById('baseCodeInput'),
        setBaseCodeBtn: document.getElementById('setBaseCodeBtn'),
        destinatarioInput: document.getElementById('destinatario'),
        destinatarioList: document.getElementById('destinatarioList'),
        direccionInput: document.getElementById('direccion'),
        poblacionInput: document.getElementById('poblacion'),
        codigoPostalInput: document.getElementById('codigoPostal'),
        provinciaInput: document.getElementById('provincia'),
        expedienteInput: document.getElementById('expediente'),
        tramitadorInput: document.getElementById('tramitador'),
        asuntoInput: document.getElementById('asunto'),
        clearBtn: document.getElementById('clearBtn'),
        orderSelect: document.getElementById('order'),
        dateFilterInput: document.getElementById('dateFilter'),
        searchInput: document.getElementById('searchInput'),
        resultsTable: document.getElementById('resultsTable'),
        tableBody: document.querySelector('#resultsTable tbody'),
        recordCountSpan: document.getElementById('recordCount'),
        selectAllCheckbox: document.getElementById('selectAllCheckbox'),
        selectAllBtn: document.getElementById('selectAllBtn'),
        deselectAllBtn: document.getElementById('deselectAllBtn'),
        bulkEditBtn: document.getElementById('bulkEditBtn'),
        printPreviewBtn: document.getElementById('printPreviewBtn'),
        printExecuteBtn: document.getElementById('printExecuteBtn'),
        printAcuseBtn: document.getElementById('printAcuseBtn'),
        exportJsonBtn: document.getElementById('exportJsonBtn'),
        exportCsvBtn: document.getElementById('exportCsvBtn'),
        refreshDataBtn: document.getElementById('refreshDataBtn'),
        clearStorageBtn: document.getElementById('clearStorageBtn'),
        rawDataView: document.getElementById('rawDataView'),
        numeroModal: document.getElementById('numeroModal'),
        nuevoNumeroInput: document.getElementById('nuevoNumero'),
        confirmNumeroBtn: document.getElementById('confirmNumeroBtn'),
        cancelNumeroBtn: document.getElementById('cancelNumeroBtn'),
        bulkEditModal: document.getElementById('bulkEditModal'),
        bulkPrefixInput: document.getElementById('bulkPrefixInput'),
        bulkStartNumberInput: document.getElementById('bulkStartNumberInput'),
        bulkIncrementCheckbox: document.getElementById('bulkIncrementCheckbox'),
        bulkSuffixInput: document.getElementById('bulkSuffixInput'),
        confirmBulkEditBtn: document.getElementById('confirmBulkEditBtn'),
        cancelBulkEditBtn: document.getElementById('cancelBulkEditBtn'),
        themeToggle: document.getElementById('themeToggle'),
        printContainer: document.getElementById('printContainer'),
        importModal: document.getElementById('importModal'),
        importCount: document.getElementById('importCount'),
        overwriteOption: document.getElementById('overwriteOption'),
        appendOption: document.getElementById('appendOption'),
        confirmImportBtn: document.getElementById('confirmImportBtn'),
        cancelImportBtn: document.getElementById('cancelImportBtn'),
        importCsvBtn: document.getElementById('importCsvBtn'),
      importJsonBtn: document.getElementById('importJsonBtn'),
      fileInput: document.getElementById('fileInput'),
    };

    // Variables de estado
    const state = {
        lastId: 0,
        lastEnvioNumber: 0,
        envioPrefijo: 'CD',
        baseCode: null,
        destinatariosIndex: {},
        selectedRecords: [],
        currentBulkEditStart: 0,
        currentTheme: 'light',
        pendingImportData: []
    };

    // Inicialización
    function initApp() {
        loadThemePreference();
        initData();
        setupEventListeners();
        generateNextId();
        generateNextNumeroEnvio();
        loadRecords();
        updateDataViewer();
        elements.destinatarioInput.focus();
    }

    function loadThemePreference() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
            document.documentElement.setAttribute('data-theme', 'dark');
            state.currentTheme = 'dark';
        } else {
            document.documentElement.removeAttribute('data-theme');
            localStorage.setItem('theme', 'light');
            state.currentTheme = 'light';
        }
    }

    function toggleTheme() {
        if (state.currentTheme === 'light') {
            document.documentElement.setAttribute('data-theme', 'dark');
            state.currentTheme = 'dark';
            localStorage.setItem('theme', 'dark');
        } else {
            document.documentElement.removeAttribute('data-theme');
            state.currentTheme = 'light';
            localStorage.setItem('theme', 'light');
        }
    }

    function initData() {
        if (!localStorage.getItem('personasData')) {
            localStorage.setItem('personasData', JSON.stringify([]));
        } else {
            try {
                const savedData = JSON.parse(localStorage.getItem('personasData'));
                if (savedData && Array.isArray(savedData)) {
                    buildDestinatariosIndex(savedData);
                   
                    if (savedData.length > 0) {
                        const ids = savedData.map(item => parseInt(item.id));
                        state.lastId = Math.max(...ids);
                       
                        const numbers = savedData.map(item => {
                            const match = parseCodigoEnvio(item.numeroEnvio);
                            return match ? match.number : 0;
                        });
                        state.lastEnvioNumber = Math.max(...numbers);
                       
                        const lastMatch = parseCodigoEnvio(savedData[savedData.length-1].numeroEnvio);
                        if (lastMatch) {
                            state.envioPrefijo = lastMatch.prefix;
                            elements.codigoEnvioPrefijoInput.value = state.envioPrefijo;
                        }
                    }
                }
            } catch (e) {
                console.error("Error cargando datos:", e);
                localStorage.setItem('personasData', JSON.stringify([]));
            }
        }
       
        if (localStorage.getItem('lastEnvioNumber')) {
            const storedNumber = parseInt(localStorage.getItem('lastEnvioNumber'));
            if (!isNaN(storedNumber)) {
                state.lastEnvioNumber = Math.max(state.lastEnvioNumber, storedNumber);
            }
        }
       
        if (localStorage.getItem('envioPrefijo')) {
            state.envioPrefijo = localStorage.getItem('envioPrefijo');
            elements.codigoEnvioPrefijoInput.value = state.envioPrefijo;
        }
       
        if (localStorage.getItem('baseCode')) {
            state.baseCode = localStorage.getItem('baseCode');
            elements.baseCodeInput.value = state.baseCode;
        }
    }

    function buildDestinatariosIndex(data) {
        state.destinatariosIndex = {};
        data.forEach(item => {
            if (item.destinatario) {
                const key = item.destinatario.toLowerCase();
                if (!state.destinatariosIndex[key]) {
                    state.destinatariosIndex[key] = {
                        destinatario: item.destinatario,
                        direccion: item.direccion || '',
                        poblacion: item.poblacion || '',
                        codigoPostal: item.codigoPostal || '',
                        provincia: item.provincia || ''
                    };
                }
            }
        });
        updateDestinatarioList();
    }

    function updateDestinatarioList() {
        elements.destinatarioList.innerHTML = '';
        Object.values(state.destinatariosIndex).forEach(destinatario => {
            const option = document.createElement('option');
            option.value = destinatario.destinatario;
            elements.destinatarioList.appendChild(option);
        });
    }

    function updateDataViewer() {
        const data = getData();
        elements.rawDataView.value = JSON.stringify(data, null, 2);
    }

    function generateNextId() {
        state.lastId++;
        elements.idInput.value = state.lastId;
    }

    function parseCodigoEnvio(codigo) {
        if (!codigo) return null;
        const match = codigo.match(/^([A-Za-z]{2,4})(\d+)(.*)$/);
        if (match) {
            return {
                prefix: match[1],
                number: parseInt(match[2]),
                suffix: match[3] || ''
            };
        }
        return null;
    }

    function generateNextNumeroEnvio() {
        const allData = getData();
        let maxId = state.lastId;
       
        if (allData.length > 0) {
            const ids = allData.map(item => parseInt(item.id));
            maxId = Math.max(...ids);
        }
       
        const nextNumber = maxId + 1;
        const prefix = elements.codigoEnvioPrefijoInput.value || state.envioPrefijo;
       
        elements.numeroEnvioInput.value = `${prefix}${String(state.lastEnvioNumber + 1).padStart(11, '0')}`;
        state.lastEnvioNumber = nextNumber;
        localStorage.setItem('lastEnvioNumber', nextNumber);
    }

    function setupEventListeners() {
      // Formulario principal
      elements.dataForm.addEventListener('submit', handleFormSubmit);
      elements.clearBtn.addEventListener('click', clearForm);
      
      // Código de envío
      elements.codigoEnvioPrefijoInput.addEventListener('change', updateCodigoEnvio);
      elements.setNumeroBtn.addEventListener('click', showNumeroModal);
      elements.setBaseCodeBtn.addEventListener('click', setBaseCode);
      
      // Autocompletado de destinatario
      elements.destinatarioInput.addEventListener('input', handleDestinatarioInput);
      
      // Filtros y búsqueda
      elements.orderSelect.addEventListener('change', loadRecords);
      elements.dateFilterInput.addEventListener('change', loadRecords);
      elements.searchInput.addEventListener('input', debounce(loadRecords, 300));
      
      // Selección de registros
      elements.selectAllBtn.addEventListener('click', selectAllRecords);
      elements.deselectAllBtn.addEventListener('click', deselectAllRecords);
      elements.selectAllCheckbox.addEventListener('change', toggleSelectAll);
      
      // Acciones masivas
      elements.bulkEditBtn.addEventListener('click', showBulkEditModal);
      
      // Impresión
      elements.printPreviewBtn.addEventListener('click', showPrintPreview);
      elements.printExecuteBtn.addEventListener('click', executePrint);
      elements.printAcuseBtn.addEventListener('click', imprimirAcuseIndividual);
      
      // Importación/Exportación
      elements.importCsvBtn.addEventListener('click', () => {
         elements.fileInput.accept = '.csv';
         elements.fileInput.click();
      });
      elements.importJsonBtn.addEventListener('click', () => {
         elements.fileInput.accept = '.json';
         elements.fileInput.click();
      });
      elements.fileInput.addEventListener('change', handleFileImport);
      elements.exportJsonBtn.addEventListener('click', exportToJSON);
      elements.exportCsvBtn.addEventListener('click', exportToCSV);
      
      // Datos y almacenamiento
      elements.refreshDataBtn.addEventListener('click', updateDataViewer);
      elements.clearStorageBtn.addEventListener('click', clearStorage);
      
      // Modal de número
      elements.confirmNumeroBtn.addEventListener('click', confirmNumeroChange);
      elements.cancelNumeroBtn.addEventListener('click', hideNumeroModal);
      
      // Modal de edición masiva
      elements.confirmBulkEditBtn.addEventListener('click', applyBulkEdit);
      elements.cancelBulkEditBtn.addEventListener('click', hideBulkEditModal);
      elements.bulkIncrementCheckbox.addEventListener('change', toggleIncrementVisibility);
      
      // Modal de importación
      elements.confirmImportBtn.addEventListener('click', confirmImport);
      elements.cancelImportBtn.addEventListener('click', cancelImport);
      
      // Tema
      elements.themeToggle.addEventListener('click', toggleTheme);
      
      // Navegación con Enter en campos de formulario
      const inputFields = [
         elements.destinatarioInput,
         elements.direccionInput,
         elements.poblacionInput,
         elements.codigoPostalInput,
         elements.provinciaInput,
         elements.expedienteInput,
         elements.tramitadorInput,
         elements.asuntoInput
      ];

      inputFields.forEach(input => {
         if (input) {
            input.addEventListener('keydown', function(e) {
               if (e.key === 'Enter') {
                  e.preventDefault();
                  
                  const currentIndex = inputFields.indexOf(input);
                  if (currentIndex < inputFields.length - 1) {
                     inputFields[currentIndex + 1].focus();
                  } else {
                     elements.asuntoInput.blur();
                  }
               }
            });
         }
      });
      
      // Configurar el submit solo con el botón
      elements.dataForm.addEventListener('submit', function(e) {
         e.preventDefault();
         handleFormSubmit(e);
      });
   }

    function handleFormSubmit(e) {
        e.preventDefault();
       
        const newRecord = {
            id: elements.idInput.value,
            numeroEnvio: elements.numeroEnvioInput.value,
            envioPrefijo: elements.codigoEnvioPrefijoInput.value,
            destinatario: elements.destinatarioInput.value,
            direccion: elements.direccionInput.value,
            poblacion: elements.poblacionInput.value,
            codigoPostal: elements.codigoPostalInput.value,
            provincia: elements.provinciaInput.value,
            expediente: elements.expedienteInput.value,
            tramitador: elements.tramitadorInput.value,
            asunto: elements.asuntoInput.value,
            fecha: new Date().toISOString()
        };
       
        const currentData = JSON.parse(localStorage.getItem('personasData'));
        currentData.push(newRecord);
        localStorage.setItem('personasData', JSON.stringify(currentData));
       
        const key = newRecord.destinatario.toLowerCase();
        if (!state.destinatariosIndex[key]) {
            state.destinatariosIndex[key] = {
                destinatario: newRecord.destinatario,
                direccion: newRecord.direccion,
                poblacion: newRecord.poblacion,
                codigoPostal: newRecord.codigoPostal,
                provincia: newRecord.provincia
            };
            updateDestinatarioList();
        }
       
        generateNextId();
        generateNextNumeroEnvio();
        loadRecords();
        updateDataViewer();
        clearForm(false);
    }

    function clearForm(resetId = true) {
        if (resetId) {
            elements.idInput.value = '';
        }
        elements.destinatarioInput.value = '';
        elements.direccionInput.value = '';
        elements.poblacionInput.value = '';
        elements.codigoPostalInput.value = '';
        elements.provinciaInput.value = '';
        elements.expedienteInput.value = '';
        elements.tramitadorInput.value = '';
        elements.asuntoInput.value = '';
        elements.destinatarioInput.focus();
    }

    function updateCodigoEnvio() {
        const prefix = elements.codigoEnvioPrefijoInput.value || state.envioPrefijo;
        elements.numeroEnvioInput.value = `${prefix}${String(state.lastEnvioNumber + 1).padStart(11, '0')}`;
        state.envioPrefijo = prefix;
        localStorage.setItem('envioPrefijo', prefix);
    }

    function showNumeroModal() {
        elements.nuevoNumeroInput.value = state.lastEnvioNumber + 1;
        elements.numeroModal.classList.remove('hidden');
        elements.nuevoNumeroInput.focus();
    }

    function hideNumeroModal() {
        elements.numeroModal.classList.add('hidden');
    }

    function confirmNumeroChange() {
        const nuevoNumero = parseInt(elements.nuevoNumeroInput.value);
        if (!isNaN(nuevoNumero) && nuevoNumero >= 1) {
            state.lastEnvioNumber = nuevoNumero - 1;
            localStorage.setItem('lastEnvioNumber', state.lastEnvioNumber);
            generateNextNumeroEnvio();
            hideNumeroModal();
        } else {
            alert('Por favor ingrese un número válido mayor o igual a 1');
        }
    }

    function setBaseCode() {
        const baseCode = elements.baseCodeInput.value.trim();
        if (!baseCode) return;
       
        const match = parseCodigoEnvio(baseCode);
        if (match) {
            state.envioPrefijo = match.prefix;
            state.lastEnvioNumber = match.number - 1;
           
            elements.codigoEnvioPrefijoInput.value = state.envioPrefijo;
            localStorage.setItem('envioPrefijo', state.envioPrefijo);
            localStorage.setItem('lastEnvioNumber', state.lastEnvioNumber);
           
            state.baseCode = baseCode;
            localStorage.setItem('baseCode', baseCode);
           
            generateNextNumeroEnvio();
            alert(`Código base establecido a ${baseCode}. El próximo código será ${elements.numeroEnvioInput.value}`);
        } else {
            alert('Formato de código inválido. Use formato: PREFIJO+NÚMERO (ej: NA1000)');
        }
    }

    function handleDestinatarioInput() {
        const input = elements.destinatarioInput.value.toLowerCase();
        const match = state.destinatariosIndex[input];
       
        if (match) {
            elements.direccionInput.value = match.direccion;
            elements.poblacionInput.value = match.poblacion;
            elements.codigoPostalInput.value = match.codigoPostal;
            elements.provinciaInput.value = match.provincia;
        }
    }

    function loadRecords() {
        const data = getFilteredData();
        elements.tableBody.innerHTML = '';
       
        data.forEach(record => {
            const row = document.createElement('tr');
            row.dataset.id = record.id;
            const isSelected = state.selectedRecords.some(r => r.id === record.id);
           
            row.innerHTML = `
                <td><input type="checkbox" class="record-checkbox" ${isSelected ? 'checked' : ''}></td>
                <td>${record.id}</td>
                <td>${record.numeroEnvio}</td>
                <td>${record.destinatario}</td>
                <td>${record.poblacion}</td>
                <td>${record.provincia}</td>
                <td>${record.expediente}</td>
                <td>${record.asunto}</td>
                <td class="no-print">${new Date(record.fecha).toLocaleDateString()}</td>
            `;
           
            row.querySelector('.record-checkbox').addEventListener('change', function() {
                const recordId = row.dataset.id;
                if (this.checked) {
                    if (!state.selectedRecords.some(r => r.id === recordId)) {
                        state.selectedRecords.push({
                            id: recordId,
                            numeroEnvio: record.numeroEnvio
                        });
                    }
                } else {
                    state.selectedRecords = state.selectedRecords.filter(r => r.id !== recordId);
                }
            });
           
            elements.tableBody.appendChild(row);
        });
       
        elements.recordCountSpan.textContent = `(${data.length})`;
    }

    function getFilteredData() {
        const data = JSON.parse(localStorage.getItem('personasData')) || [];
        const order = elements.orderSelect.value;
        const dateFilter = elements.dateFilterInput.value;
        const searchTerm = elements.searchInput.value.toLowerCase();
       
        let filtered = [...data];
       
        if (dateFilter) {
            const filterDate = new Date(dateFilter);
            filtered = filtered.filter(item => {
                const itemDate = new Date(item.fecha);
                return itemDate >= filterDate;
            });
        }
       
        if (searchTerm) {
            filtered = filtered.filter(item =>
                item.destinatario.toLowerCase().includes(searchTerm) ||
                item.expediente.toLowerCase().includes(searchTerm) ||
                item.numeroEnvio.toLowerCase().includes(searchTerm)
            );
        }
       
        filtered.sort((a, b) => {
            const dateA = new Date(a.fecha);
            const dateB = new Date(b.fecha);
            return order === 'asc' ? dateA - dateB : dateB - dateA;
        });
       
        return filtered;
    }

    function getData() {
        return JSON.parse(localStorage.getItem('personasData')) || [];
    }

    function selectAllRecords() {
        document.querySelectorAll('.record-checkbox').forEach(checkbox => {
            checkbox.checked = true;
            const row = checkbox.closest('tr');
            const recordId = row.dataset.id;
            if (!state.selectedRecords.some(r => r.id === recordId)) {
                state.selectedRecords.push({
                    id: recordId,
                    numeroEnvio: row.cells[2].textContent
                });
            }
        });
        elements.selectAllCheckbox.checked = true;
    }

    function deselectAllRecords() {
        document.querySelectorAll('.record-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
        state.selectedRecords = [];
        elements.selectAllCheckbox.checked = false;
    }

    function toggleSelectAll() {
        const isChecked = elements.selectAllCheckbox.checked;
        if (isChecked) {
            selectAllRecords();
        } else {
            deselectAllRecords();
        }
    }

    function getSelectedRecords() {
        return state.selectedRecords;
    }

    function showBulkEditModal() {
        const selectedRows = getSelectedRecords();
        if (selectedRows.length === 0) {
            alert('Selecciona al menos un registro para modificar');
            return;
        }

        state.selectedRecords = selectedRows;
        state.currentBulkEditStart = 0;
       
        const firstCode = parseCodigoEnvio(selectedRows[0].numeroEnvio);
        if (firstCode) {
            elements.bulkPrefixInput.value = firstCode.prefix;
            elements.bulkStartNumberInput.value = firstCode.number;
        }
       
        elements.bulkEditModal.classList.remove('hidden');
        elements.bulkPrefixInput.focus();
    }

    function hideBulkEditModal() {
        elements.bulkEditModal.classList.add('hidden');
    }

    function toggleIncrementVisibility() {
        document.getElementById('incrementControls').style.display =
        &

Yo puede que sea la 1er vez que veo tu tema.

No sé de los lenguajes que usas, ni del tema, por ejemplo qué significa 128 auto, ergo no podría haber comentado incluso si hubiera visto el tema.

Muchas de las visitas puede que sean de bots.

El código parece muy largo e incluso incompleto y no está puesto con el formato que se recomienda aquí, no sé si para json hay, tienes que buscar donde dice Código GeSHi en la derecha del modo responder (no está en respuesta rápida).
Digo, eso puede que haya desalentado a varios a responder.

Podrías haber probado un proyecto más simple a ver si te daba el mismo problema, eso sí se me ocurre como recomendación. Y siendo más simple eso, también el tema que hubieras planteado y hubiera habido más probabilidad de que te lo respondieran.

No leí todo esto pero puede que te ayuden algunas partes
https://foro.elhacker.net/dudas_generales/faq_como_hacer_preguntas_inteligentes-t7122.0.html

Hola, elinventor sería bueno que compartas con el foro el sistema que estás usando actualmente, nos comentas que es mucho más potente que lo que querías hacer, tu aporte sería de ayuda para otros usuarios que busquen o necesiten lo mismo o algo similar.