資訊專欄INFORMATION COLUMN
摘要：最近工作中遇到一個(gè)需求，大致需求就是將文件在導(dǎo)入時(shí)解析為格式轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)再傳輸給后臺(tái)。先介紹幾個(gè)基本概念對(duì)象，指的是整份文檔。對(duì)象，指的是文檔中的表。廢話不多說直接上這里演示下網(wǎng)頁中使用共有種讀取方法將文件讀取為。
最近工作中遇到一個(gè)需求，大致需求就是將Excel文件在導(dǎo)入時(shí)解析為json格式轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)再傳輸給后臺(tái)。這方面的庫比較少，比較主流的是js-xlsx，官網(wǎng)地址為sheetjs官網(wǎng)，但是文檔都寫得不太清楚，坑也比較多，這里我做一個(gè)簡單的介紹與運(yùn)用與避坑指南。
先介紹幾個(gè)基本概念：
workbook 對(duì)象，指的是整份 Excel 文檔。我們在使用 js-xlsx 讀取 Excel 文檔之后就會(huì)獲得 workbook
對(duì)象。worksheet 對(duì)象，指的是 Excel 文檔中的表。我們知道一份 Excel 文檔中可以包含很多張表，而每張表對(duì)應(yīng)的就是 worksheet 對(duì)象。
廢話不多說直接上這里演示下網(wǎng)頁中使用
這里演示下在react+antd組合下使用
import { Button, Icon } from "antd";
const XLSX = require("XLSX");//必須使用CommonJs規(guī)范引入，如果使用import引入則找不到read 方法
handle_click_send_file = () => {
this.file_input.click();
}
handle_file_change = () => {
this.asyncReaderFile(this.file_input, XLSX).then((res) => {
console.log(res); //在回調(diào)函數(shù)中輸出結(jié)果
});
}
asyncReaderFile = (event, XLSX) => {
const files = event.files || [];
const file = files[0]; //獲取第一個(gè)Blob對(duì)象
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsBinaryString(file); //readAsBinaryString(file)：將文件讀取為二進(jìn)制字符串
reader.onload = function(e) {
const data = e.target.result;
//XLSX.read獲得 workbook對(duì)象，指的是整份Excel文檔,并將其解析為二進(jìn)制字符串
const wb = XLSX.read(data, {
type: "binary",
});
//wb.SheetNames[0]是獲取第一個(gè)表名
//wb.Sheets[表名]獲取第一個(gè)表的數(shù)據(jù)
//XLSX.utils.sheet_to_json生成一個(gè)對(duì)象數(shù)組，JSON.stringify解析為json對(duì)象
const json = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
//這里將解析出的json數(shù)據(jù)轉(zhuǎn)換下格式
const resData = json.map((obj) => {
let words = "";
for (const i in obj) {
words += obj[i] + "/";
}
return words;
});
resolve(resData);
};
});
};
這里主要的一個(gè)坑就是不能使用inport 引用！因?yàn)檫@個(gè)庫很早之前就做出來了，用的是CommonJs規(guī)范，因此不能用import方式引用；另一個(gè)需要注意的點(diǎn)是在瀏覽器中需要使用read方式解析出workbook對(duì)象，在Node環(huán)境中則需要使用readFile解析出workbook對(duì)象。
還有很多其他用法，具體的詳情可以看下文檔npm-xlsx
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/96839.html
摘要：簡介是前端操作以及類似的二維表的最佳選擇之一而是它的社區(qū)版本將注意力集中到了數(shù)據(jù)轉(zhuǎn)換和導(dǎo)出上所以它支持相當(dāng)多種類的數(shù)據(jù)解析和導(dǎo)出不僅僅局限于支持格式支持的導(dǎo)入格式支持的導(dǎo)出格式它可以解析符合格式的數(shù)據(jù)導(dǎo)出符合格式的數(shù)據(jù)利用中間層操作數(shù)據(jù) 簡介 SheetJS是前端操作Excel以及類似的二維表的最佳選擇之一,而js-xlsx是它的社區(qū)版本. js-xlsx將注意力集中到了數(shù)據(jù)轉(zhuǎn)換和導(dǎo)出...
摘要：工具類工具庫，封裝了處理，，，等常見的函數(shù)，是對(duì)標(biāo)準(zhǔn)庫的補(bǔ)充。業(yè)務(wù)開發(fā)中常用的函數(shù)有很多，如等。示例如下整數(shù)處理保留兩位小數(shù)百分比處理億億處理萬萬處理格式化數(shù)字大于億的展示為億，大于萬的展示為萬億萬時(shí)間處理庫。 工具類 lodash 工具庫，封裝了處理arrays，numbers，objects，string等常見的函數(shù)，是對(duì)標(biāo)準(zhǔn)庫的補(bǔ)充。業(yè)務(wù)開發(fā)中常用的函數(shù)有很多，如：assign,...
摘要：而這里的單元格信息是唯一的，所以直接通過為一個(gè)空對(duì)象賦值即可。和相關(guān)的知識(shí)和技巧高亮的列單元格采用展示。在中，被選中的單元格會(huì)高亮相應(yīng)的行和列，以提醒用戶。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一個(gè) Excel 數(shù)據(jù)清洗工具，其通過可視化的方式讓用戶輕松地對(duì) Excel 數(shù)據(jù)進(jìn)行篩選。 XCEL...
閱讀 1288·2021-09-03 10:44
閱讀 674·2019-08-30 13:13
閱讀 2857·2019-08-30 13:11
閱讀 2026·2019-08-30 12:59
閱讀 1106·2019-08-29 15:32
閱讀 1656·2019-08-29 15:25
閱讀 1095·2019-08-29 12:24
閱讀 1358·2019-08-27 10:58
