Skip to main content

HTTP 上传

浏览器和其他平台提供了将文件上传到服务器的解决方案和云存储解决方案。电子表格可以使用 SheetJS 编写并上传。

¥Browsers and other platforms offer solutions for uploading files to servers and cloud storage solutions. Spreadsheets can be written using SheetJS and uploaded.

该演示探讨了如何使用多种浏览器 API 和封装器库来上传文件。上传过程将生成示例 XLSX 工作簿,将文件上传到 测试服务器,并显示响应。

¥This demo explores file uploads using a number of browser APIs and wrapper libraries. The upload process will generate a sample XLSX workbook, upload the file to a test server, and display the response.

本演示重点介绍上传文件。其他演示涵盖其他 HTTP 用例:

¥This demo focuses on uploading files. Other demos cover other HTTP use cases:

第三方主机和二进制数据

AWS 等第三方云平台可能会通过以 UTF-8 字符串对请求和响应进行编码来破坏原始二进制上传。

¥Third-party cloud platforms such as AWS may corrupt raw binary uploads by encoding requests and responses in UTF-8 strings.

对于 AWS,在 API Gateway 控制台的 "二进制媒体类型" 部分中,应添加 "multipart/form-data" 类型,以确保 AWS Lambda 函数可以接收客户端的上传。

¥For AWS, in the "Binary Media Types" section of the API Gateway console, the "multipart/form-data" type should be added to ensure that AWS Lambda functions can receive uploads from clients.

上传二进制数据

¥Uploading Binary Data

SheetJS write 方法 [^1] 生成存储在 ArrayBuffer 对象中的文件数据。ArrayBuffer 可以添加到 FormData 对象。FormData 对象可以传递给 POST 请求。

¥The SheetJS write method[^1] generates file data stored in ArrayBuffer objects. The ArrayBuffer can be added to a FormData object. The FormData object can be passed along to POST requests.

生成文件

¥Generating Files

在典型场景中,进程生成简单对象的数组。

¥In a typical scenario, a process generates arrays of simple objects.

SheetJS json_to_sheet 方法 [^2] 生成 SheetJS 工作表对象 [^3]。book_new 方法 [^4] 创建一个包含工作表的工作簿对象。

¥The SheetJS json_to_sheet method[^2] generates a SheetJS worksheet object[^3]. The book_new method[^4] creates a workbook object that includes the worksheet.

write 方法 [^5] 在内存中生成文件。

¥The write method[^5] generates the file in memory.

以下代码片段创建一个示例数据集并生成一个表示工作簿字节的 ArrayBuffer 对象:

¥The following snippet creates a sample dataset and generates an ArrayBuffer object representing the workbook bytes:

Generating an XLSX file in memory
/* create sample SheetJS workbook object */
var aoa = [
["S", "h", "e", "e", "t", "J", "S"],
[ 5, 4, 3, 3, 7, 9, 5]
];
var ws = XLSX.utils.aoa_to_sheet(aoa);
var wb = XLSX.utils.book_new(ws, "Sheet1");
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

/* export SheetJS workbook object to XLSX file bytes */
var data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});

创建表单数据

¥Creating Form Data

File 对象代表文件。File 构造函数接受数据片段数组和文件名。

¥File objects represent files. The File constructor accepts an array of data fragments and a filename.

浏览器 API 通常使用 FormData 对象表示表单正文数据。append 方法将字段添加到 FormData 对象。在上传中有效添加 File 对象 "attaches" 文件。

¥Browser APIs typically represent form body data using FormData objects. The append method adds fields to the FormData object. Adding File objects effectively "attaches" a file in the upload.

以下代码片段构造了一个新的 FormData 对象。表单中的 file 字段将设置为上一个片段中的数据:

¥The following snippet constructs a new FormData object. The file field in the form will be set to the data from the previous snippet:

Creating Form Data and attaching the generated file
/* create File */
var file = new File([data], 'sheetjs.xlsx')
// generated XLSX ^^^^ ^^^^^^^^^^^^ file name

/* build FormData with the generated file */
var fdata = new FormData();
fdata.append('file', file);
// ^^^^ field name in the form body

邮寄请求

¥POST Request

该演示探讨了许多用于发送 POST 请求的 API 和库。每种方法都会上传存储在 FormData 对象中的数据。

¥This demo explores a number of APIs and libraries for making POST requests. Each approach will upload data stored in FormData objects.

此代码片段使用 XMLHttpRequest 将数据上传到 https://s2c.sheetjs.com

¥This snippet uses XMLHttpRequest to upload data to https://s2c.sheetjs.com:

Uploading Form Data with XMLHttpRequest
/* send data using XMLHttpRequest */
var req = new XMLHttpRequest();
req.open("POST", "https://s2c.sheetjs.com", true);
req.send(fdata);

浏览器演示

¥Browser Demos

当点击上传按钮时,浏览器将建立一个新的工作簿,生成一个 XLSX 文件,将其上传到 https://s2c.sheetjs.com 并显示响应。如果该过程成功,将显示一个 HTML 表格

¥When the upload button is clicked, the browser will build up a new workbook, generate a XLSX file, upload it to https://s2c.sheetjs.com and show the response. If the process was successful, a HTML table will be displayed

测试部署

每个浏览器演示都在以下环境中进行了测试:

¥Each browser demo was tested in the following environments:

浏览器日期
Chrome 1262024-06-19
Safari 17.32024-06-19

测试服务器

¥Test Server

https://s2c.sheetjs.com 服务当前托管在 Deno Deploy 上。"Deno 部署" 演示 涵盖了部署服务的确切步骤。

¥The https://s2c.sheetjs.com service is currently hosted on Deno Deploy. The "Deno Deploy" demo covers the exact steps for deploying the service.

支持 CORS 的服务通过在 "file" 键中查找上传的文件来处理 POST 请求。如果找到文件,将使用 SheetJS read 方法 [^6] 解析该文件,并使用 sheet_to_html 方法 [^7] 将第一个工作表转换为 HTML。

¥The CORS-enabled service handles POST requests by looking for uploaded files in the "file" key. If a file is found, the file will be parsed using the SheetJS read method[^6] and the first worksheet will be converted to HTML using the sheet_to_html method[^7].

XMLHttp 请求

¥XMLHttpRequest

使用 XMLHttpRequest API,send 方法可以接受 FormData 对象:

¥Using the XMLHttpRequest API, the send method can accept FormData objects:

Uploading Form Data with XMLHttpRequest
/* send data using XMLHttpRequest */
var req = new XMLHttpRequest();
req.open("POST", "https://s2c.sheetjs.com", true);
req.send(fdata);
Complete Code Snippet (click to show)
SheetJS + XMLHttpRequest example
/* create sample SheetJS workbook object */
var aoa = [
["S", "h", "e", "e", "t", "J", "S"],
[ 5, 4, 3, 3, 7, 9, 5]
];
const ws = XLSX.utils.aoa_to_sheet(aoa);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

/* export SheetJS workbook object to XLSX file bytes */
var data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});

/* build FormData with the generated file */
var fdata = new FormData();
fdata.append('file', new File([data], 'sheetjs.xlsx'));
// field name ^^^^ file name ^^^^^^^^^^^^

/* send data using XMLHttpRequest */
var req = new XMLHttpRequest();
req.open("POST", "https://s2c.sheetjs.com", true);
req.send(fdata);
Live demo (click to show)

This demo starts from an array of arrays of data. When the button is clicked, a workbook file will be generated and uploaded to https://s2c.sheetjs.com. The service will return a HTML table.

Result
Loading...
Live Editor
function SheetJSXHRUL() {
  const [__html, setHTML] = React.useState("");
  const [sz, setSz] = React.useState(0);
  const [csv, setCSV] = React.useState("");

  /* raw data */
  const aoa = [
    ["S", "h", "e", "e", "t", "J", "S"],
    [  5,   4,   3,   3,   7,   9,   5]
  ];
  /* target URL */
  const url = "https://s2c.sheetjs.com";

  /* Fetch and update HTML */
  const xport = React.useCallback(async() => { try {
    /* Make SheetJS Workbook from data */
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

    /* Export to XLSX */
    const data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});
    setSz(data.length || data.byteLength);

    /* Make FormData */
    const fdata = new FormData();
    fdata.append('file', new File([data], 'sheetjs.xlsx'));

    /* Upload */
    /* - create XMLHttpRequest */
    const req = new XMLHttpRequest();
    req.open("POST", url, true);
    /* - on success, display the contents */
    req.onload = (e) => setHTML(req.responseText);
    /* - on error, display "Request failed" */
    req.onerror = (e) => setHTML("Request failed");
    /* - send data */
    req.send(fdata);
  } catch(e) { setHTML(e && e.message || e); } });

  /* Display data in CSV form */
  React.useEffect(() => {
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    setCSV(XLSX.utils.sheet_to_csv(ws));
  }, []);

  return ( <pre><b>CSV Data</b><div>{csv}</div>
    {sz ? ( <>
      <b>Generated file size: {sz} bytes</b>
      <div dangerouslySetInnerHTML={{ __html }}/>
    </> ) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
  </pre> );
}

fetch

fetch 采用第二个参数,允许设置 POST 请求正文:

¥fetch takes a second parameter which allows for setting POST request body:

Uploading Form Data with fetch
/* send data using fetch */
fetch("https://s2c.sheetjs.com", { method: "POST", body: fdata });
Complete Code Snippet (click to show)
SheetJS + fetch example
/* create sample SheetJS workbook object */
var aoa = [
["S", "h", "e", "e", "t", "J", "S"],
[ 5, 4, 3, 3, 7, 9, 5]
];
const ws = XLSX.utils.aoa_to_sheet(aoa);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

/* export SheetJS workbook object to XLSX file bytes */
var data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});

/* build FormData with the generated file */
var fdata = new FormData();
fdata.append('file', new File([data], 'sheetjs.xlsx'));
// field name ^^^^ file name ^^^^^^^^^^^^

/* send data using fetch */
fetch("https://s2c.sheetjs.com", { method: "POST", body: fdata });
Live demo (click to show)

This demo uses fetch to upload data to https://s2c.sheetjs.com. It will parse the workbook and return an HTML table.

Result
Loading...
Live Editor
function SheetJSFetchUL() {
  const [__html, setHTML] = React.useState("");
  const [sz, setSz] = React.useState(0);
  const [csv, setCSV] = React.useState("");

  /* raw data */
  const aoa = [
    ["S", "h", "e", "e", "t", "J", "S"],
    [  5,   4,   3,   3,   7,   9,   5]
  ];
  /* target URL */
  const url = "https://s2c.sheetjs.com";

  /* Fetch and update HTML */
  const xport = React.useCallback(async() => { try {
    /* Make SheetJS Workbook from data */
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

    /* Export to XLSX */
    const data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});
    setSz(data.length || data.byteLength);

    /* Make FormData */
    const fdata = new FormData();
    fdata.append('file', new File([data], 'sheetjs.xlsx'));

    /* Upload */
    const res = await fetch(url, {method:"POST", body: fdata});

    /* Show Server Response */
    setHTML((await res.text()));
  } catch(e) { setHTML(e && e.message || e); }});

  /* Display data in CSV form */
  React.useEffect(() => {
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    setCSV(XLSX.utils.sheet_to_csv(ws));
  }, []);

  return (<pre><b>CSV Data</b><div>{csv}</div>
    {sz ? ( <>
      <b>Generated file size: {sz} bytes</b>
      <div dangerouslySetInnerHTML={{ __html }}/>
    </> ) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
  </pre>);
}

封装库

¥Wrapper Libraries

fetch 随浏览器一起发布之前,有各种封装器库来简化 XMLHttpRequest。由于 fetch 的限制,这些库仍然相关。

¥Before fetch shipped with browsers, there were various wrapper libraries to simplify XMLHttpRequest. Due to limitations with fetch, these libraries are still relevant.

axios

axios 提供了一个基于 Promise 的接口。

¥axios presents a Promise based interface.

上传表单数据与 fetch 示例几乎相同:

¥Uploading form data is nearly identical to the fetch example:

Uploading Form Data with axios
/* send data using axios */
axios("https://s2c.sheetjs.com", { method: "POST", body: fdata });
Complete Code Snippet (click to show)
SheetJS + axios example
/* create sample SheetJS workbook object */
var aoa = [
["S", "h", "e", "e", "t", "J", "S"],
[ 5, 4, 3, 3, 7, 9, 5]
];
const ws = XLSX.utils.aoa_to_sheet(aoa);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

/* export SheetJS workbook object to XLSX file bytes */
var data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});

/* build FormData with the generated file */
var fdata = new FormData();
fdata.append('file', new File([data], 'sheetjs.xlsx'));
// field name ^^^^ file name ^^^^^^^^^^^^

/* send data using axios */
axios("https://s2c.sheetjs.com", { method: "POST", data: fdata });
Live demo (click to show)

This demo uses axios to upload data to https://s2c.sheetjs.com. It will parse the workbook and return an HTML table.

If the live demo shows a message

ReferenceError: axios is not defined

please refresh the page. This is a known bug in the documentation generator.

Result
Loading...
Live Editor
function SheetJSAxiosUL() {
  const [__html, setHTML] = React.useState("");
  const [sz, setSz] = React.useState(0);
  const [csv, setCSV] = React.useState("");

  /* raw data */
  const aoa = [
    ["S", "h", "e", "e", "t", "J", "S"],
    [  5,   4,   3,   3,   7,   9,   5]
  ];
  /* target URL */
  const url = "https://s2c.sheetjs.com";

  /* Fetch and update HTML */
  const xport = React.useCallback(async() => { try {
    /* Make SheetJS Workbook from data */
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

    /* Export to XLSX */
    const data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});
    setSz(data.length || data.byteLength);

    /* Make FormData */
    const fdata = new FormData();
    fdata.append('file', new File([data], 'sheetjs.xlsx'));

    /* Upload */
    const res = await axios(url, {method:"POST", data: fdata});

    /* Show Server Response */
    setHTML(res.data);
  } catch(e) { setHTML(e && e.message || e); }});

  /* Display data in CSV form */
  React.useEffect(() => {
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    setCSV(XLSX.utils.sheet_to_csv(ws));
  }, []);

  return (<pre><b>CSV Data</b><div>{csv}</div>
    {sz ? ( <>
      <b>Generated file size: {sz} bytes</b>
      <div dangerouslySetInnerHTML={{ __html }}/>
    </> ) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
  </pre>);
}

superagent

superagent 是一个带有 "流畅的界面" 的网络请求库。

¥superagent is a network request library with a "Fluent Interface".

send 方法接受 FormData 对象作为第一个参数:

¥The send method accepts a FormData object as the first argument:

Uploading Form Data with superagent
/* send data using superagent */
superagent.post("https://s2c.sheetjs.com").send(fd);
Complete Code Snippet (click to show)
SheetJS + superagent example
/* create sample SheetJS workbook object */
var aoa = [
["S", "h", "e", "e", "t", "J", "S"],
[ 5, 4, 3, 3, 7, 9, 5]
];
const ws = XLSX.utils.aoa_to_sheet(aoa);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

/* export SheetJS workbook object to XLSX file bytes */
var data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});

/* build FormData with the generated file */
var fdata = new FormData();
fdata.append('file', new File([data], 'sheetjs.xlsx'));
// field name ^^^^ file name ^^^^^^^^^^^^

/* send data (fd is the FormData object) */
superagent.post("https://s2c.sheetjs.com").send(fd);
Live demo (click to show)

This demo uses superagent to upload data to https://s2c.sheetjs.com. It will parse the workbook and return an HTML table.

If the live demo shows a message

ReferenceError: superagent is not defined

please refresh the page. This is a known bug in the documentation generator.

Result
Loading...
Live Editor
function SheetJSSuperAgentUL() {
  const [__html, setHTML] = React.useState("");
  const [sz, setSz] = React.useState(0);
  const [csv, setCSV] = React.useState("");

  /* raw data */
  const aoa = [
    ["S", "h", "e", "e", "t", "J", "S"],
    [  5,   4,   3,   3,   7,   9,   5]
  ];
  /* target URL */
  const url = "https://s2c.sheetjs.com";

  /* Fetch and update HTML */
  const xport = React.useCallback(async() => { try {
    /* Make SheetJS Workbook from data */
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

    /* Export to XLSX */
    const data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});
    setSz(data.length || data.byteLength);

    /* Make FormData */
    const fdata = new FormData();
    fdata.append('file', new File([data], 'sheetjs.xlsx'));

    /* Upload */
    superagent.post(url).send(fdata).end((err, res) => {
      /* Show Server Response */
      setHTML(res.text);
    });
  } catch(e) { setHTML(e && e.message || e); }});

  /* Display data in CSV form */
  React.useEffect(() => {
    const ws = XLSX.utils.aoa_to_sheet(aoa);
    setCSV(XLSX.utils.sheet_to_csv(ws));
  }, []);

  return (<pre><b>CSV Data</b><div>{csv}</div>
    {sz ? ( <>
      <b>Generated file size: {sz} bytes</b>
      <div dangerouslySetInnerHTML={{ __html }}/>
    </> ) : (<button onClick={xport}><b>Export and Upload!</b></button>)}
  </pre>);
}

NodeJS 演示

¥NodeJS Demos

这些示例展示了如何在 NodeJS 中上传数据。

¥These examples show how to upload data in NodeJS.

fetch

NodeJS fetch(版本 20)镜像了 浏览器 fetch

¥NodeJS fetch, available in version 20, mirrors the browser fetch.

测试部署

本 demo 在以下环境下进行了测试:

¥This demo was tested in the following environments:

NodeJS日期
20.12.12024-04-07
21.7.22024-04-07
Complete Example (click to show)

This demo uses fetch to upload data to https://s2c.sheetjs.com. It will parse the workbook and return data in CSV rows.

  1. Install the SheetJS NodeJS module:
npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
  1. Save the following to SheetJSFetch.js:
SheetJSFetch.js
const XLSX = require("xlsx");

/* create sample SheetJS workbook object */
var aoa = [
["S", "h", "e", "e", "t", "J", "S"],
[ 5, 4, 3, 3, 7, 9, 5]
];
const ws = XLSX.utils.aoa_to_sheet(aoa);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

/* export SheetJS workbook object to XLSX file bytes */
var data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});

/* build FormData with the generated file */
var fdata = new FormData();
fdata.append('file', new File([data], 'sheetjs.xlsx'));
// field name ^^^^ file name ^^^^^^^^^^^^
fdata.append('type', 'csv');

(async() => {
/* send data using fetch */
const res = await fetch("https://s2c.sheetjs.com", { method: "POST", body: fdata });
const txt = await res.text();
console.log(txt);
})();
  1. Run the script:
node SheetJSFetch.js

It will print CSV contents of the test file.

request

已弃用的 request 库在 fetch 可能不可用的旧版 NodeJS 部署中很有用。

¥The deprecated request library is useful in legacy NodeJS deployments where fetch may not be available.

type 选项设置为 "buffer" 时,SheetJS write 方法将生成 NodeJS Buffer 对象:

¥The SheetJS write method will generate NodeJS Buffer objects when the type option is set to "buffer":

/* export SheetJS workbook object to XLSX file bytes */
const data = XLSX.write(wb, {bookType: 'xlsx', type: 'buffer'});

可以使用缓冲区构建 request 文件对象。文件对象必须包含指定文件名和内容类型的 options 对象:

¥A request file object can be built using the Buffer. The file object must include an options object that specifies the file name and content type:

/* create a file object for the `request` form data */
const request_file = {
/* `value` can be a Buffer object */
value: data,
options: {
/* `options.filename` is the filename that the server will see */
filename: "sheetjs.xlsx",
/* `options.contentType` must be set */
contentType: "application/octet-stream"
}
};

requestrequest.post 方法接受选项参数。formData 属性指定要上传的正文。属性名称对应于上传的表单名称,值描述上传的内容。

¥The request and request.post methods accept an options argument. The formData property specifies the body to be uploaded. Property names correspond to the uploaded form names and values describe the uploaded content.

应将 request 文件对象添加到 formData 对象:

¥The request file object should be added to the formData object:

request({
// ... other options ...
formData: {
// ... other form fields ...

/* the server will see the uploaded file in the `file` body property */
file: request_file
}
}, function(err, res) { /* handle response ... */ });
测试部署

本 demo 在以下环境下进行了测试:

¥This demo was tested in the following environments:

NodeJSrequest日期
0.10.482.88.22024-04-07
0.12.182.88.22024-04-07
4.9.12.88.22024-04-07
6.17.12.88.22024-04-07
8.17.02.88.22024-04-07
10.24.12.88.22024-04-07
12.22.122.88.22024-04-07
14.21.32.88.22024-04-07
16.20.22.88.22024-04-07
18.20.12.88.22024-04-07
20.12.12.88.22024-04-07
Complete Example (click to show)

This demo uses request to upload data to https://s2c.sheetjs.com. It will parse the workbook and return data in CSV rows.

  1. Install the SheetJS NodeJS module and request module:
npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz request
  1. Save the following to SheetJSRequest.js:
SheetJSRequest.js
const XLSX = require("xlsx");
const request = require("request");

/* create sample SheetJS workbook object */
var aoa = [
["S", "h", "e", "e", "t", "J", "S"],
[ 5, 4, 3, 3, 7, 9, 5]
];
const ws = XLSX.utils.aoa_to_sheet(aoa);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

/* export SheetJS workbook object to XLSX file bytes */
var data = XLSX.write(wb, {bookType: 'xlsx', type: 'buffer'});

request({
method: "POST",
url: "https://s2c.sheetjs.com",
headers: {
Accept: "text/html"
},
formData: {
type: "csv",
file: {
value: data,
options: {
filename: "sheetjs.xlsx",
contentType: "application/octet-stream"
}
}
}
}, function(err, res, body) {
if(err) return console.error(err);
console.log(body);
});
  1. Run the script:
node SheetJSRequest.js

It will print CSV contents of the test file.

For legacy versions of NodeJS, the process may fail with a certificate error:

{ [Error: certificate not trusted] code: 'CERT_UNTRUSTED' }

The environment variable NODE_TLS_REJECT_UNAUTHORIZED can be set to 0:

env NODE_TLS_REJECT_UNAUTHORIZED="0" node SheetJSRequest.js

It is strongly recommended to upgrade to a newer version of NodeJS!

故障排除

¥Troubleshooting

一些 SheetJS 用户报告了文件损坏。要诊断错误,强烈建议写入本地文件。

¥Some SheetJS users have reported corrupted files. To diagnose the error, it is strongly recommended to write local files.

例如,在浏览器中使用 fetch,可以使用 HTML5 下载属性 下载字节。高亮的行应立即添加到 write 之后:

¥For example, using fetch in the browser, the bytes can be downloaded using the HTML5 Download Attribute. The highlighted lines should be added immediately after write:

Diagnosing issues in a fetch upload
/* Generate XLSX file */
const data = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});

/* Write to Local File */
const blob = new Blob([data]);
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.download = "SheetJS.xlsx";
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

/* Make FormData */
const fdata = new FormData();
fdata.append('file', new File([data], 'sheetjs.xlsx'));

/* Upload */
const url = "https://s2c.sheetjs.com";
const res = await fetch(url, {method:"POST", body: fdata});

如果生成的文件有效,则问题出在服务器基础架构中。

¥If the generated file is valid, then the issue is in the server infrastructure.

[^1]: 见 write 于 "写入文件"

¥See write in "Writing Files"

[^2]: 见 json_to_sheet 于 "实用工具"

¥See json_to_sheet in "Utilities"

[^3]: 详细信息请参见 "工作表对象" 于 "SheetJS 数据模型"

¥See "Worksheet Object" in "SheetJS Data Model" for more details.

[^4]: 见 book_new 于 "实用工具"

¥See book_new in "Utilities"

[^5]: 见 write 于 "写入文件"

¥See write in "Writing Files"

[^6]: 见 read 于 "读取文件"

¥See read in "Reading Files"

[^7]: 见 sheet_to_html 于 "实用工具"

¥See sheet_to_html in "Utilities"