JS读取根目录CSV文件的问题。

cqwcns 发表于 2022-7-3 22:33

正在研究写一个简单的数据呈现应用，数据展示主要是用echarts。

完成后会部署到腾讯云开发静态网站托管。

现在的问题是数据管理的问题，由于数据量不大，所以希望简单点，不用数据库，直接用csv文件，这样更新只要上传csv文件替换就行。

假设这个CSV文件就放在index.html的根目录，问题在于，我不知道JS如何直接读取CSV文件。

麻烦各位大佬给点提示、建议，最好有类似的参考代码，感谢。

songxp03 发表于 2022-7-3 22:46

exceljs第三方库不错的，很多库都可以的

淡水千痕 发表于 2022-7-3 22:51

本帖最后由淡水千痕于 2022-7-3 22:53 编辑

需要用到sheetjs读文件：function readFile () {
return new Promise((resolve, reject) => {
   let reader = new FileReader()
   reader.onload = (e) => {
         resolve(e)
   }
   reader.onerror = e => {
         reject(e)
   }
   if (type === 'text') {
      reader.readAsText(file)
   } else if (type === 'binary') {
      reader.readAsBinaryString(file)
   } else {
      reader.readAsArrayBuffer(file)
   }
})
}
获取文件：async function getData (file) {
const e = await readFile(file)
let out = {}
let headers = {}
// 读取文件数据
let e = await readFile(file.raw, 'text')
let data = e.target.result
let buf = new Uint8Array(data)
// utf8格式的文件读取中文会乱码，添加BOM，使其格式变为utf-8 with bom
let blob = new Blob(['\ufeff' + data], { type: 'text/csv; charset=utf-8' })
e = await readFile(blob)
data = e.target.result
// 读取excel数据
let workbook = window.XLSX.read(data, { type: 'array', raw: true, codepage: 936 })
// 读取所有sheet数据
workbook.SheetNames.forEach(n => {
   out = window.XLSX.utils.sheet_to_json(workbook.Sheets, { cellDates: true, raw: true })
   // 以横向方式读取数据，第一行为标题数组
   headers = window.XLSX.utils.sheet_to_json(workbook.Sheets, { header: 1, cellDates: true, raw: true })
})
// 获取第一个sheet的数据
let sheetName = workbook.SheetNames
arr = out // 所有数据
header = header
}

zpy2 发表于 2022-7-4 05:23

部署到腾讯云开发静态网站托管。

静态的只能把 json内容放到 html文件或者 js文件，才能使用js

三滑稽甲苯 发表于 2022-7-4 08:52

同一个域名下直接用XML就可以获取文件

unmask 发表于 2022-7-4 21:11

静态网页，所以只能浏览器远程ajax获取csv内容解析后渲染页面，至于如何将csv内容渲染到页面，那就是echarts的事情了

$.get("/test.csv", function (csv) {
// 拆分后的数据
const rows = csv.split("\n").map((row) => row.split(","));
console.log(rows);
// TODO: 根据数据渲染页面

});

页: [1]

吾爱破解 - 52pojie.cn's Archiver

JS读取根目录CSV文件的问题。