如何将数组的每个值放在Excel的每个单元格上？

Question

我会请求你的帮助来解决我的问题；（仅供参考：我附上了 HTML 的屏幕截图和控制台）按下“制作CSV文件！”的按钮时，我可以下载一个包含以下值的 csv 文件。

这是我的问题：当我用 Excel 打开 csv 文件时，你能给我任何想法让每个单元格都有标签的每个值吗？

目前，我的 csv 在一个单元格中有每个值。（例如，A1 单元格有“Mansfield Park”、“Jane Austine”、“”。A2 单元格有“远大前程”、“Charles Dickens”、“”）那么，你能告诉我在每个单元格中都有每个值吗？（例如 A1 有“Mansfield Park”，B1 有“Jane Austine”，C1 有“”）

如果您能解决我的问题，我将不胜感激。供您参考，这里有 html 和 JS 代码。而且我认为我需要重写这个 JS 代码

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>Make Your Words</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="head">
      <h1>Be Free to Create your Vocabulary!</h1>
    </div>
    <div class="transtable">
      <table class="table" id="ENJP" border="1">
          <tr>
            <th scope="col">Title</th>
            <th scope="col">Author</th>
            <th scope="col">NOTE</th>
          </tr>
          <!-- Data is fetched by MongoDB -->
      </table>
    </div>

    <div class="opt_1">
      <input type="button" value="Show Data"/>
      <input type="button" value="Add a Row" onclick="AddRow()"/>
      <input id="download" type="button" class="btn" value="Make a CSV File!" onclick="MakeCSV()"/>
    </div>
    
    <div class="opt_2">
      <h4>Name Your File!</h4>
      <input id="FileName" type="text" placeholder="Input a File Name"/>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src=script.js></script>
</body>

</html>

JS

let table = document.getElementById("ENJP");
const AddRow = () => {
    //テーブルに新行追加
    let newRow = table.insertRow(-1);
    //追加行の内容を決定（セルを１つずつ作る）
    let cel_EN = newRow.insertCell(-1);
    let cel_JP = newRow.insertCell(-1);
    let cel_NOTE = newRow.insertCell(-1);
    let rowContentEN = '<input type="text" name="Title"/>';
    let rowContentJP = '<input type="text" name="Author"/>';
    let rowContentNOTE = '<input type="text" name="NOTE"/>';
    cel_EN.innerHTML = rowContentEN;
    cel_JP.innerHTML = rowContentJP;
    cel_NOTE.innerHTML = rowContentNOTE;
}

const MakeCSV = () => {
// 抽出したデータを格納する配列変数
    let data = [];
 // id(ENJP)でhtmlからtableの要素を取得し、trタグのListを取得
    let table = document.getElementById('ENJP');
    let tbl_tr = table.querySelectorAll('tr');
 //テーブルの1行(trタグ)毎に処理
    tbl_tr.forEach(function(tr){
     //tdタグを取得・テーブルのヘッダー部分は飛ばす
        let cells = tr.querySelectorAll('td');
        if (cells.length!=0){
         // テーブルの1行(trタグ)のデータを格納する配列
            let d =[];
         //セル(tdタグ)毎に処理
            cells.forEach(function(td){
             //セルがinputタグだった場合
                if(td.innerHTML.indexOf('input') != -1) {
                 d.push(td.value);
                 
                }
             //セルがtextだった場合
                else if(td.textContent!=""){
                  d.push(td.textContent);
                }
             //セルが空白だった場合
                else{
                    d.push("");
                }
            });
         data.push(d);
        }
    });
 //ここで配列への格納終わり。

 //CSV Creation
    let bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
//Here is what I think is necessary to revise.
    let csvData = data.map((data) => data.join('\t')).join('\r\n');
    let blob = new Blob([bom,csvData], {'type' : 'text/csv'});
//ダウンロード時の処理
    let downloadLink = document.createElement('a');
    downloadLink.download = document.getElementById("FileName").value + '.csv';
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.dataset.downloadurl = ['text/plain', downloadLink.download, downloadLink.href].join(':');
    downloadLink.click();
    console.log(data);
return window.alert("You get it")
}

const mongoGet = async () =>{
    try {
        console.log("show");
        // Serverにリクエスト投げる。axios.get()でAPIを叩く処理
        let allbks = await axios.get("/book");
        console.log(allbks);
        let { data } = allbks;
        //出力
        allbks = data.map((book) => {
            const { id,title,author,other } = book;
            console.log(id,title,author,other);
            let newRow = table.insertRow(-1);
            let cel_EN = newRow.insertCell(-1);
            let cel_JP = newRow.insertCell(-1);
            let cel_NOTE = newRow.insertCell(-1);
            let rowContentEN = `${title}`;
            let rowContentJP = `${author}`;
            let rowContentNOTE = `<input type="text" name="NOTE"/>`;
            console.log(title)
            cel_EN.innerHTML = rowContentEN;
            cel_JP.innerHTML = rowContentJP;
            cel_NOTE.innerHTML = rowContentNOTE;
            return console.log("did it!");
          });
      } catch (err) {
        console.log(err);
      }
}
mongoGet();

如果我修改处理值的JS代码，我的麻烦就会解决。

Answer 1

从 JS 代码来看，您正在生成制表符分隔格式的文件，而不是逗号分隔格式。尝试给它一个扩展名“.tsv”而不是“.csv”。 Excel 将以不同的方式解析它。

如何将数组的每个值放在Excel的每个单元格上？

问题描述投票：0回答：1

1个回答

相关问题

热门问答

最新问题

如何将数组的每个值放在Excel的每个单元格上？

问题描述 投票：0回答：1

1个回答

相关问题

热门问答

最新问题

问题描述投票：0回答：1