0

我拼凑了一些代码，允许我解析 CSV 文件，然后根据查询字符串中的变量从中提取变量。我遇到的问题是我能够将 CSV 文件放入页面的唯一方法是使用表单手动加载它。我知道有像 Papa.Parse 这样的很棒的工具可能会让这很容易，但另一个问题是我正在构建它以托管在 Pardot（Salesforce 的营销平台之一，对于那些没有听说过它的人） ，所以我不能只将 3rd 方 javascripts 加载到他们的服务器上。

下面是我的工作“概念证明”代码（特别感谢https://sebhastian.com/和我从中窃取的任何其他人），它让我可以根据 ID 列从 CSV 中提取我想要的任何数据。当然，它需要一个带有 ID、FirstName 和 Phone 列的 CSV，以及一个 id=[CSV 中的 ID 号之一] 的查询字符串才能起作用。

是否有人对修改它以自动加载不会引发 CORS 或其他类型错误的 CSV 有任何建议？请注意，我无法将 CSV 放在与 HTML 相同的物理位置，因为无论我如何加载它，Pardot 都会将文件放在与页面不同的文件夹中，并且它还为我们的页面使用别名（请参阅头）。

<!DOCTYPE html>
<html>
<head>
<base href="https://www2.cbiz.com" >
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="%%description%%"/>
<title>%%title%%</title>
<script type="text/javascript">
    const urlParams = new URLSearchParams(window.location.search);
    const userID = urlParams.get("id")

</script>
</head>
<body>
<p id="name"></p>
<p id="phone"></p>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  </form>
    
<script>
    const myForm = document.getElementById("myForm");
    const csvFile = document.getElementById("csvFile");

    function csvToArray(str, delimiter = ",") {

      const headers = str.slice(0, str.indexOf("\n")).split(delimiter);

      const rows = str.slice(str.indexOf("\n") + 1).split("\n");

      const arr = rows.map(function (row) {
        const values = row.split(delimiter);
        const el = headers.reduce(function (object, header, index) {
          object[header] = values[index];
          return object;
        }, {});
        return el;
      });

      // return the array
      return arr;
    }

    myForm.addEventListener("submit", function (e) {
      e.preventDefault();
      const input = csvFile.files[0];
      const reader = new FileReader();

      reader.onload = function (e) {
        const text = e.target.result;
        const data = csvToArray(text);
        for(var i = 0; i < data.length; i++) {
            if(data[i].ID == userID)    {
                document.getElementById("name").innerHTML = "The first name is: " + data[i].FirstName;              
                document.getElementById("phone").innerHTML = "The phone number is: " + data[i].Phone;
            }
        }
      };
      
      reader.readAsText(input);
    });
</script>
</body>
</html>

感谢您的协助。

4

0 回答 0