我是一名新手程序员,尝试复制一个关于创建CSV表格查看器的html程序的YouTube视频,但出现了以下错误:
SyntaxError: 请求的模块 './TableCsv.js' 没有提供 'default' 导出
我已经尝试在 main.js 中 TableCsv 周围添加花括号,但没有成功。当我尝试在 TableCsv.js 中添加自己的导出时,它会显示“一个模块不能有多个默认导出”(A module cannot have multiple default exports.ts(2528))。
这是我的代码:
main.js
import TableCsv from "./TableCsv.js";
const tableRoot = document.querySelector("#csvRoot");
const csvFileInput = document.querySelector("#csvFileInput");
const tableCsv = new TableCsv(tableRoot);
csvFileInput.addEventListener("change", e => {
Papa.parse(csvFileInput.files[0], {
delimiter: ",",
skipEmptyLines: true,
complete: results => {
tableCsv.update(results.data.slice(1), results.data[0]);
}
});
});
TableCsv.js
class TableCsv {
/**
* @param {HTMLTableElement} root The table element which will display the CSV data.
*/
constructor(root) {
this.root = root;
}
/**
* Clears existing data in the table and replaces it with new data.
*
* @param {string[][]} data A 2D array of data to be used as the table body
* @param {string[]} headerColumns List of headings to be used
*/
update(data, headerColumns = []) {
this.clear();
this.setHeader(headerColumns);
this.setBody(data);
}
/**
* Clears all contents of the table (incl. the header).
*/
clear() {
this.root.innerHTML = "";
}
/**
* Sets the table header.
*
* @param {string[]} headerColumns List of headings to be used
*/
setHeader(headerColumns) {
this.root.insertAdjacentHTML(
"afterbegin",
`
<thead>
<tr>
${headerColumns.map((text) => `<th>${text}</th>`).join("")}
</tr>
</thead>
`
);
}
/**
* Sets the table body.
*
* @param {string[][]} data A 2D array of data to be used as the table body
*/
setBody(data) {
const rowsHtml = data.map((row) => {
return `
<tr>
${row.map((text) => `<td>${text}</td>`).join("")}
</tr>
`;
});
this.root.insertAdjacentHTML(
"beforeend",
`
<tbody>
${rowsHtml.join("")}
</tbody>
`
);
}
}
const tableRoot = document.querySelector("#csvRoot");
const csvFileInput = document.querySelector("#csvFileInput");
const tableCsv = new TableCsv(tableRoot);
csvFileInput.addEventListener("change", (e) => {
Papa.parse(csvFileInput.files[0], {
delimiter: ",",
skipEmptyLines: true,
complete: (results) => {
tableCsv.update(results.data.slice(1), results.data[0]);
}
});
});