如何在Hostinger中将CSV输出从单列改为多列（仅可加自定义头部代码）

场景说明 #

你从Hostinger内置设计软件导出的CSV所有参数挤在同一列，现在只能通过添加自定义HTML头部代码来处理，下面给两种方案，根据你的需求选择：

方案1：直接在页面上把同列CSV转换成多列表格 #

如果你的CSV内容是直接展示在网站页面上的，用这个脚本：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 找到页面里展示CSV的元素，给它加个id：csv-container
  const csvBox = document.getElementById('csv-container');
  if (!csvBox) return;

  // ********** 关键：替换成你CSV实际的分隔符 **********
  // 常见的是逗号','、分号';'、制表符'\t'，自己打开CSV看一下参数之间用什么分隔
  const separator = ',';

  // 读取并拆分CSV内容
  const rawCsv = csvBox.textContent.trim();
  const allRows = rawCsv.split('\n');

  // 创建带样式的表格
  const table = document.createElement('table');
  table.style.borderCollapse = 'collapse';
  table.style.width = '100%';

  allRows.forEach(rowStr => {
    const row = document.createElement('tr');
    // 拆分当前行的所有参数
    const cols = rowStr.split(separator);
    cols.forEach(colText => {
      const cell = document.createElement('td');
      cell.textContent = colText.trim();
      cell.style.border = '1px solid #ddd';
      cell.style.padding = '8px';
      cell.style.textAlign = 'left';
      row.appendChild(cell);
    });
    table.appendChild(row);
  });

  // 替换原始的同列CSV内容为多列表格
  csvBox.innerHTML = '';
  csvBox.appendChild(table);
});
</script>

使用步骤： #

1. 把这段代码粘贴到你能添加的自定义HTML头部区域
2. 打开你的网站页面，右键检查展示CSV的元素（比如是个<div>或<pre>标签），给它加上id="csv-container"
3. 打开你导出的CSV文件，确认参数之间的分隔符，把代码里的separator改成对应符号

方案2：上传原始CSV，下载拆分好的新CSV #

如果你需要把导出的CSV文件处理成多列后重新下载，用这个脚本：

<script>
// 处理CSV的核心函数，支持带引号的字段（比如字段内容包含分隔符的情况）
function parseCsv(rawText, separator) {
  const rows = [];
  let currentRow = [];
  let currentField = '';
  let inQuotes = false;

  for (const char of rawText) {
    if (char === '"') {
      inQuotes = !inQuotes;
    } else if (char === separator && !inQuotes) {
      currentRow.push(currentField.trim());
      currentField = '';
    } else if (char === '\n' && !inQuotes) {
      currentRow.push(currentField.trim());
      rows.push(currentRow);
      currentRow = [];
      currentField = '';
    } else {
      currentField += char;
    }
  }
  // 处理最后一行未闭合的内容
  if (currentField) {
    currentRow.push(currentField.trim());
    rows.push(currentRow);
  }
  return rows;
}

// 触发处理并下载的函数
function handleCsvProcess() {
  const fileInput = document.getElementById('csv-upload');
  const selectedFile = fileInput.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    const separator = ','; // 替换成你的CSV实际分隔符
    const parsedRows = parseCsv(e.target.result, separator);
    // 把拆分后的行重新拼成CSV格式
    const processedCsv = parsedRows.map(row => row.join(',')).join('\n');

    // 创建下载链接
    const blob = new Blob([processedCsv], { type: 'text/csv' });
    const downloadUrl = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = downloadUrl;
    downloadLink.download = 'processed-csv.csv';
    downloadLink.click();
    URL.revokeObjectURL(downloadUrl);
  };
  reader.readAsText(selectedFile);
}
</script>

<!-- 页面上会显示的上传按钮 -->
<div style="margin: 20px 0;">
  <input type="file" id="csv-upload" accept=".csv" style="margin-right: 10px;">
  <button onclick="handleCsvProcess()" style="padding: 8px 16px; cursor: pointer;">处理并下载拆分后的CSV</button>
</div>

使用步骤： #

1. 把这段代码粘贴到自定义HTML头部区域
2. 打开网站页面，会看到一个上传按钮和处理按钮
3. 选择你从Hostinger导出的原始CSV，点击处理按钮，就能下载拆分好的多列CSV了

注意事项 #

• 一定要确认CSV的分隔符，这是能不能拆分成功的关键，用记事本打开CSV就能看到参数之间的分隔符号
• 如果你的CSV里有带双引号的字段（比如某个参数内容里包含逗号），优先用方案2，它能正确识别这种情况不会拆分错误

内容的提问来源于stack exchange，提问作者The Daddy Show