我xlsx在路徑下有檔案src/excel/data.xlsx。
所以我試圖從這個 excel 中獲取資料并形成陣列。
代碼嘗試：
import * as XLSX from "xlsx";
export function App() {
fetch("./excel/data.xlsx")
.then((res) => res.arrayBuffer())
.then((ab) => {
const wb = XLSX.read(ab, { type: "array" });
console.log("html ", wb);
});
return <div>Hello World</div>;
}
錯誤：
無效的 HTML：找不到 <表格>
如果我在這一行給出了正確的路徑./excel/data.xlsx或錯誤的路徑notvalid.xlsxfetch("./excel/data.xlsx")，那么我會得到與上面相同的錯誤，所以我認為這可能是由于路徑設定導致的錯誤，但我不確定。
要求：
我需要從excel/data.xlsx檔案中讀取資料并將資料作為陣列獲取。
作業示例：
請幫助我達到預期的結果。
uj5u.com熱心網友回復：
您要傳遞給獲取的路徑存在問題。如果要使用 fetch，則將 excel 檔案放在公用檔案夾中。如果是用create-react-app. 將您的 excel 檔案放入public/excel/data.xlsx并更改您傳遞的路徑以獲取 ie fetch('excel/data.xlsx')。如果您使用任何其他捆綁器或框架來生成您的專案，只要確保 excel 檔案位于您的應用程式提供的檔案夾中（如果您想要使用fetch它）。
這是在codesandbox上作業
uj5u.com熱心網友回復：
您的解決方案在這里React.js。Excel作業表應該在public檔案夾下。
import * as XLSX from "xlsx";
export function App() {
function Upload() {
var url = "excel/data.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function (e) {
var arraybuffer = oReq.response;
/* convert data to binary string */
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for (var i = 0; i !== data.length; i)
arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
/* Call XLSX */
var workbook = XLSX.read(bstr, {
type: "binary"
});
/* DO SOMETHING WITH workbook HERE */
var first_sheet_name = workbook.SheetNames[0];
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
console.log(
XLSX.utils.sheet_to_json(worksheet, {
raw: true
})
);
};
oReq.send();
console.log("Read!@");
}
return <button onClick={Upload}>Click me</button>;
}
這種方法適用于服務器端：
import * as XLSX from "xlsx";
export function App() {
let workbook = XLSX.readFile('./src/excel/data.xlsx');
let sheet_name_list = workbook.SheetNames;
let xlData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]);
console.log(xlData);
return <div>Hello World</div>;
}
如果您在客戶端嘗試，則需要通過輸入上傳 excel 檔案，然后進行相應處理。
function Upload() {
const fileUpload = (document.getElementById('fileUpload'));
const regex = /^([a-zA-Z0-9\s_\\.\-:]) (.xls|.xlsx)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
let fileName = fileUpload.files[0].name;
if (typeof (FileReader) !== 'undefined') {
const reader = new FileReader();
if (reader.readAsBinaryString) {
reader.onload = (e) => {
processExcel(reader.result);
};
reader.readAsBinaryString(fileUpload.files[0]);
}
} else {
console.log("This browser does not support HTML5.");
}
} else {
console.log("Please upload a valid Excel file.");
}
}
function processExcel(data) {
const workbook = XLSX.read(data, {type: 'binary'});
const firstSheet = workbook.SheetNames[0];
const excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
console.log(excelRows);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Process Excel File</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.0/xlsx.full.min.js"></script>
</head>
<body>
<input class="upload-excel" type="file" id="fileUpload" onchange="Upload()"/>
</body>
</html>uj5u.com熱心網友回復：
在 GitHub 上閱讀此 SheetJS 問題后（無效的 HTML：找不到#1110），我認為這可能是您fetch的請求接收 HTML 頁面而不是 XLSM 檔案的問題。也許您只是參考了錯誤 URL 的檔案，該檔案給出了 404 回應，這是一個 HTML 檔案，以“<”開頭，被解釋為 HTML，這將給出一個不知道是什么的錯誤<table>。
所有這些都是根據 GitHub issue 中的答案得出的推測。
確保您可以通過轉至下載您的 XLSM 檔案yourwebsiteurl.com/path/to/app/folder/excel/data.xlsm。您還可以向我們提供有關您的index.html檔案和data.xlsm檔案的網路服務器上的檔案結構，以便我們確保 URL 正確無誤。
uj5u.com熱心網友回復：
事實證明，您原來的解決方案不起作用，因為該檔案應該在該public目錄下。將檔案放在public目錄下，代碼運行正常！
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/535765.html