Как преобразовать CSV файл в html таблицу? - PullRequest
Новая
       0

Как преобразовать CSV файл в html таблицу?

1 голос
/ 17 января 2020 
<!DOCTYPE html>
<html>

<head>
  <title>CSV File to HTML Table Using AJAX jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="table-responsive">
      <h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
      <br />
      <div align="center">
        <button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
      </div>
      <br />
      <div id="employee_table">
      </div>
    </div>
  </div>
</body>

</html>

<script>
  $(document).ready(function () {
    $('#load_data').click(function () {
      $.ajax({
        url: "iguana.csv",
        dataType: "text",
        success: function (data) {
          var employee_data = data.split(/\r?\n|\r/);
          var table_data = '<table class="table table-bordered table-striped">';
          for (var count = 0; count < employee_data.length; count++) {
            var cell_data = employee_data[count].split(",");
            table_data += '<tr>';
            for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
              if (count === 0) {
                table_data += '<th>' + cell_data[cell_count] + '</th>';
              }
              else {
                table_data += '<td>' + cell_data[cell_count] + '</td>';
              }
            }
            table_data += '</tr>';
          }
          table_data += '</table>';
          $('#employee_table').html(table_data);
        }
      });
    });

  });
</script>

во время выполнения этого кода я получаю следующую ошибку:

jquery .min. js: 4 Доступ к XMLHttpRequest в файле ': /// C: / Users / rkuchhadia / Music / Dash / database_backup / iguana.csv 'из источника' null 'был заблокирован политикой CORS: запросы на разные источники поддерживаются только для схем протоколов: http, data, chrome, chrome расширение, https.

1 Ответ

2 голосов
/ 17 января 2020

Проблема в том, что вы запускаете веб-страницу локально, без веб-сервера. Если вы хотите, чтобы ajax извлекал файлы на вашем компьютере, вам придется обслуживать их через веб-сервер.

Я бы предложил опубликовать sh вашу веб-страницу с помощью небольшого express сервер: 

const express = require('express');
const app = express();

app.use(express.static('public')); // where 'public' is the folder containing the files that you want to retrieve.

Более подробную информацию можно найти здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...