Загрузите файл Excel из HTML, JavaScript и перезагрузите страницу.

Содержание

Вопрос или проблема
Ответ или решение
Загрузка файла Excel с помощью HTML и JavaScript с последующей перезагрузкой страницы
Введение
1. Подготовка HTML-кода
2. Обновление JavaScript
3. Оптимизация
Заключение

Вопрос или проблема

У меня есть веб-сайт, который использует html, css и javascript. У меня есть изображение SVG, на которое загружаются точки данных из файла excel. У меня есть выпадающий список, позволяющий пользователям выбрать более старый файл excel и заполнить точки данных из этого файла на изображении, другими словами, просто загрузить новый файл при нажатии на выпадающий список. У меня работает выпадающий список и имена файлов, но я не могу запустить файл excel и перезагрузить страницу. Может кто-нибудь помочь мне?

HTML

<div class="dropdown">
  <button class="transform btn" id="changeVersion">Прошлые месяцы</button>
  <div id="versionDropDown" class="dropdown-content">
    <a id="v0" onclick="changeVersion(0, true)">Февраль</a>
    <a id="v1" onclick="changeVersion(1, true)">Январь</a>
  </div>
</div>

Javascript

function changeVersion(id, reload) {
  switch (id) {
    case 0:
      version = { id: 0, filepath: "files/data.xlsx", yearMonth: dates[0] };
      break;
    /* Код архива
  case 1:
    version = {id: 1, filepath: "files/dataJanuary.xlsx", yearMonth: dates[1] };
    break;
  case 2:
    version = {id: 2, filepath: "files/dataFebruary.xlsx", yearMonth: dates[2] };
    break;
   
  }
  if (reload) reloadPage();
  else if (id != 0) {
    document.getElementsByClassName("container")[0].classList.add("hidden");
    document.getElementById("files").classList.add("hidden");
  }
}

Щелкните выпадающий список, выберите месяц и перезагрузите страницу с данными из файла excel

Ответ или решение

Загрузка файла Excel с помощью HTML и JavaScript с последующей перезагрузкой страницы

На вашем веб-сайте существует задача, связанная с загрузкой данных из файла Excel в SVG-изображение при выборе пользователя из выпадающего списка. Давайте разберем, как правильно реализовать эту функциональность с учетом всех деталей, представленных в вопросе.

Введение

Загрузка данных из файла Excel требует использования JavaScript для обработки файлов, а также взаимодействия с HTML для создания интерфейса пользователя. Важной частью задачи является обеспечение того, чтобы после выбора нового файла данные корректно обновлялись в SVG и страница перезагружалась.

1. Подготовка HTML-кода

Ваша структура HTML для выпадающего списка уже создана. Убедитесь, что у вас есть соответствующий контейнер для отображения SVG и загрузки данных.

<div class="dropdown">
  <button class="transform btn" id="changeVersion">Прошлые месяцы</button>
  <div id="versionDropDown" class="dropdown-content">
    <a id="v0" onclick="changeVersion(0, true)">Февраль</a>
    <a id="v1" onclick="changeVersion(1, true)">Январь</a>
  </div>
</div>

<!-- Контейнер для SVG изображения -->
<div id="svgContainer">
  <svg id="dataImage" width="500" height="500">
    <!-- Данные отображения будут загружены сюда -->
  </svg>
</div>

2. Обновление JavaScript

Ваш JavaScript-код нуждается в небольших дополнениях для корректной работы с файлами и их загрузки. Мы будем использовать библиотеку SheetJS (xlsx), чтобы загружать и обрабатывать файл Excel. Обязательно подключите эту библиотеку в вашем HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>

Теперь обновим функцию changeVersion, чтобы обрабатывать загрузку файла Excel и перезагрузку страницы:

let version = null;
const dates = ["Февраль 2023", "Январь 2023"]; // Массив с датами

async function loadExcelData(filePath) {
  const response = await fetch(filePath);
  const arrayBuffer = await response.arrayBuffer();
  const workbook = XLSX.read(arrayBuffer, { type: 'array' });
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  const jsonData = XLSX.utils.sheet_to_json(worksheet);

  // Здесь мы должны обновить SVG на основе jsonData
  updateSVG(jsonData);
}

function updateSVG(data) {
  const svg = document.getElementById("dataImage");
  // Очищаем предыдущие данные
  svg.innerHTML = '';

  // Пример: рисуем точки на основе данных из Excel
  data.forEach(point => {
    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute("cx", point.x); // Предполагается, что 'x' и 'y' имеются в файле Excel
    circle.setAttribute("cy", point.y);
    circle.setAttribute("r", 5);
    circle.setAttribute("fill", "blue");
    svg.appendChild(circle);
  });
}

function changeVersion(id, reload) {
  switch (id) {
    case 0:
      version = { id: 0, filepath: "files/dataFebruary.xlsx", yearMonth: dates[0] };
      break;
    case 1:
      version = { id: 1, filepath: "files/dataJanuary.xlsx", yearMonth: dates[1] };
      break;
  }
  if (reload) {
    loadExcelData(version.filepath).then(() => {
      location.reload(); // Перезагружаем страницу после загрузки данных
    });
  }
}

3. Оптимизация

Убедитесь, что вы добавили обработку ошибок для случаев, когда файл не может быть загружен или если данные не соответствуют ожидаемому формату. Также стоит обдумать кэширование или хранение данных в localStorage, чтобы избежать лишних загрузок при повторных запросах.

Заключение

Используя предложенные решения, вы сможете эффективно загружать данные из файлов Excel на свой веб-сайт, а также обновлять данные в SVG элементе при выборе из выпадающего списка. Это обеспечит пользователям более динамичный и интерактивный опыт. Не забывайте тестировать решение на различных браузерах, чтобы убедиться в его совместимости.

Если у вас есть дополнительные требования или вопросы, не стесняйтесь задавать их!