时间戳

首页 > 解决方案 > 如何将csv文件转换为html表？

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

问题描述

<!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。

标签： htmlajax

解决方案

问题是您在本地运行网页，没有网络服务器。如果要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.

您可以在此处找到更多信息。

推荐阅读