如何将csv文件转换为html表？答案

【问题标题】：How to convert csv file to html table?如何将csv文件转换为html表？
【发布时间】：2020-05-04 01:55:25
【问题描述】：

<!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 从源“null”访问“file:///C:/Users/rkuchhadia/Music/Dash/database_backup/iguana.csv”的 XMLHttpRequest 已被 CORS 策略阻止：交叉原始请求仅支持协议方案：http、data、chrome、chrome-extension、https。

【问题讨论】：

这能回答你的问题吗？ XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP
如果我们想在 ajax 中加载 CSV 文件，那么我们必须需要服务器？？

标签： html ajax

【解决方案1】：

问题是您在本地运行网页，没有网络服务器。如果您希望ajax 检索您计算机上的文件，则必须通过网络服务器提供这些文件。

我建议您使用小型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.

您可以找到更多信息here。

【讨论】：