Hướng dẫn sheetjs xlsx to json - sheetjs xlsx sang json

Question

Tôi đang cố gắng chuyển đổi tệp XLSX đã tải lên JSON bằng cách sử dụng https://github.com/bgrins/filereader.js để xử lý tải lên và https://github.com/sheetjs để chuyển đổi tệp thành json. Đây là mã của tôi:

Nội dung chính Show

Có được dữ liệu
Dữ liệu thô
Lọc cho các tổng thống
Định hình lại mảng
Tạo một sổ làm việc
Dọn dẹp sổ làm việc
Xuất một tập tin
Bản demo trực tiếp
Chạy bản demo tại địa phương

var opts = {
  dragClass : 'drag',
  on: {
    load: function(e, file) {
        var result      = e.target.result;
        var xlsread     = XLSX.read(result, {type: 'binary'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

Tất cả những gì tôi nhận được là một mảng trống

Bất kì lời đề nghị nào?

hỏi ngày 27 tháng 6 năm 2020 lúc 15:35Jun 27, 2020 at 15:35

OK, tôi đã giải quyết nó đặt đầu ra làm bộ đệm mảng. Mã làm việc:

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

Đã trả lời ngày 27 tháng 6 năm 2020 lúc 15:50Jun 27, 2020 at 15:50

SheetJS trình bày một giao diện JS đơn giản hoạt động với "mảng mảng" và "mảng của các đối tượng JS". Các hàm API là các khối xây dựng nên được kết hợp với các API JS khác để giải quyết các vấn đề.

Các cuộc thảo luận tập trung vào tư duy giải quyết vấn đề. Chi tiết API được đề cập trong các phần khác của tài liệu.

Mục tiêu của ví dụ này là tạo ra một cuốn sách bài tập XLSX của các tên và sinh nhật của Tổng thống Hoa Kỳ. Nhấn vào đây để nhảy đến bản demo trực tiếp.

Có được dữ liệu

Dữ liệu thô

Dữ liệu thô có sẵn ở dạng JSON. Để thuận tiện, nó đã được nhân đôi ở đây

Có được dữ liệu đơn giản với

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

4:

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

Dữ liệu thô là một mảng các đối tượng. Đây là dữ liệu cho John Adams:

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

Lọc cho các tổng thống

Bộ dữ liệu bao gồm Aaron Burr, một phó chủ tịch chưa bao giờ là chủ tịch!

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

5 tạo ra một mảng mới với các hàng mong muốn. Một tổng thống đã phục vụ ít nhất một nhiệm kỳ với

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

6 được đặt thành

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

7. Để kiểm tra xem một hàng cụ thể có ít nhất một thuật ngữ

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

7 hay không,

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

9 là một hàm JS gốc khác. Bộ lọc hoàn chỉnh sẽ là:

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

Định hình lại mảng

Trong ví dụ này, tên sẽ là tên đầu tiên được kết hợp với tên cuối cùng (

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

0) và sinh nhật sẽ có sẵn tại

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

1. Sử dụng

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

2, bộ dữ liệu có thể được xoa bóp trong một cuộc gọi:

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

Kết quả là một mảng các đối tượng "đơn giản" không có làm tổ:

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // ... one row per President
]

Tạo một sổ làm việc

Với bộ dữ liệu được làm sạch,

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

3 tạo ra một bảng tính:

const worksheet = XLSX.utils.json_to_sheet(rows);

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

4 tạo ra một sổ làm việc mới và

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

5 nối một bảng tính vào sổ làm việc. Bảng tính mới sẽ được gọi là "Ngày":

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

Dọn dẹp sổ làm việc

Dữ liệu nằm trong sổ làm việc và có thể được xuất.

Hướng dẫn sheetjs xlsx to json - sheetjs xlsx sang json

Có nhiều cơ hội để cải thiện: các tiêu đề có thể được đổi tên và độ rộng cột có thể được điều chỉnh. SheetJS Pro cung cấp các tùy chọn kiểu dáng bổ sung như kiểu dáng di động và hàng đông lạnh.

Thay đổi tên tiêu đề (bấm để hiển thị) (click to show)

Theo mặc định,

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

6 tạo một bảng tính với hàng tiêu đề. Trong trường hợp này, các tiêu đề đến từ các khóa đối tượng JS: "Tên" và "Sinh nhật".

Các tiêu đề nằm trong các tế bào

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

7 và

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

8.

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

9 có thể viết các giá trị văn bản vào bảng tính hiện có bắt đầu tại ô

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

7:

XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

Thay đổi chiều rộng cột (bấm để hiển thị) (click to show)

Một số tên dài hơn chiều rộng cột mặc định. Chiều rộng cột được đặt bằng cách đặt thuộc tính bảng tính

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

1.

Dòng sau đây đặt chiều rộng của cột A đến khoảng 10 ký tự:

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

0

Một cuộc gọi

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

2 qua

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

3 có thể tính toán chiều rộng tối đa:

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

1

Xuất một tập tin

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

4 tạo một tệp bảng tính và cố gắng viết nó vào hệ thống. Trong trình duyệt, nó sẽ cố gắng nhắc người dùng tải xuống tệp. Trong nodejs, nó sẽ viết vào thư mục cục bộ.

Ghi chú

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

5 Chỉ ghi các tệp XLSX và được khuyến nghị khi xuất sẽ luôn ở định dạng

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

6.

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

7 là dễ dàng hơn để lắc cây. Ví dụ này sử dụng

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

4 vì

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

7 không hỗ trợ các định dạng xuất khẩu phổ biến khác như

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

0 hoặc

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

1 hoặc

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

2.

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

3 Cho phép nén zip cho XLSX và các định dạng khác.

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

2

Bản demo trực tiếp

Bản demo này chạy trong trình duyệt web!Nhấp vào "Nhấp vào để tạo tệp!"và trình duyệt sẽ tạo tệp XLSX.

Chạy bản demo tại địa phương

Trình duyệt
Nodejs
Deno
Búi tóc

Lưu tập lệnh sau vào

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

4 và mở trang.Trang phải được lưu trữ (không truy cập

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

5).

https://sheetjs.com/pres.html là phiên bản lưu trữ của trang.

var opts = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(e, file) {
        var result      = new Uint8Array(e.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

3

programming sheet Excel to JSON SheetJS writeFile

Hướng dẫn sheetjs xlsx to json - sheetjs xlsx sang json

Có được dữ liệu

Dữ liệu thô

Lọc cho các tổng thống

Định hình lại mảng

Tạo một sổ làm việc

Dọn dẹp sổ làm việc

Xuất một tập tin

Bản demo trực tiếp

Chạy bản demo tại địa phương

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội