Drash 中的工作表

Drash 是一个 Deno 服务器端框架。正文解析器在内存中工作，可以处理托管服务上的文件上传。

¥Drash is a Deno server-side framework. The body parser works in memory and can handle file uploads on hosted services.

SheetJS 是一个用于从电子表格读取和写入数据的 JavaScript 库。

¥SheetJS is a JavaScript library for reading and writing data from spreadsheets.

该演示使用 Drash 和 SheetJS 来读取和写入数据。我们将探讨如何在 POST 请求处理程序中解析上传的文件并使用可下载的电子表格响应 GET 请求。

¥This demo uses Drash and SheetJS to read and write data. We'll explore how to parse uploaded files in a POST request handler and respond to GET requests with downloadable spreadsheets.

"完整示例" 部分包括一个完整的服务器。

¥The "Complete Example" section includes a complete server.

测试部署

该演示于 2024 年 3 月 11 日针对 Drash 2.8.1 和 Deno 1.41.2 进行了最后一次测试。

¥This demo was last tested on 2024 March 11 against Drash 2.8.1 and Deno 1.41.2.

集成详情

¥Integration Details

SheetJS Deno 模块可以从 Drash 服务器脚本导入。

¥The SheetJS Deno module can be imported from Drash server scripts.

读取数据

¥Reading Data

Request#bodyParam 读取车身参数。对于上传的文件，content 属性是 Uint8Array，可以使用 SheetJS read 方法 [^1] 进行解析。

¥Request#bodyParam reads body parameters. For uploaded files, the content property is a Uint8Array which can be parsed with the SheetJS read method[^1].

此示例服务器响应 POST 请求。服务器将在请求正文中查找 "upload" 键下的文件。如果存在文件，服务器将解析该文件，使用 sheet_to_html 方法 [^2] 生成 HTML 表并使用 HTML 代码进行响应：

¥This example server responds to POST requests. The server will look for a file in the request body under the "upload" key. If a file is present, the server will parse the file, generate an HTML table using the sheet_to_html method[^2] and respond with the HTML code:

// @deno-types="https://cdn.sheetjs.com/xlsx-0.20.3/package/types/index.d.ts"
import { read, utils } from 'https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs';

import * as Drash from "https://cdn.jsdelivr.net/gh/drashland/drash@v2.8.1/mod.ts";

class ParseResource extends Drash.Resource {
  public paths = ["/"];

  public POST(request: Drash.Request, response: Drash.Response) {
    // assume a form upload like <input type="file" id="upload" name="upload">
    const file = request.bodyParam<Drash.Types.BodyFile>("upload");
    if (!file) throw new Error("File is required!");

    // read file
    var wb = read(file.content);

    // respond with HTML from first worksheet
    var ws = wb.Sheets[wb.SheetNames[0]];
    var html = utils.sheet_to_html(html)
    return response.html(html);
  }
}

写入数据

¥Writing Data

标头使用 Response#headers.set 手动设置，而原始正文则使用 Response#send 设置。原始主体可以是 Uint8Array 或 ArrayBuffer 对象。

¥Headers are manually set with Response#headers.set while the raw body is set with Response#send. The raw body can be Uint8Array or ArrayBuffer objects.

给定一个 SheetJS 工作簿对象，使用 type: "buffer"[^3] 的 write 方法生成与 Drash 兼容的数据对象。

¥Given a SheetJS workbook object, the write method using type: "buffer"[^3] generates data objects compatible with Drash.

此示例服务器响应 GET 请求。服务器将从数组 [^4] 生成一个 SheetJS 工作表对象，使用 book_new[^5] 和 book_append_sheet[^6] 实用程序方法构建一个新工作簿，使用 write 生成 XLSX 文件，并发送带有适当标头的文件以启动文件名 "SheetJSDrash.xlsx" 的下载：

¥This example server responds to GET requests. The server will generate a SheetJS worksheet object from an array of arrays[^4], build up a new workbook using the book_new[^5] and book_append_sheet[^6] utility methods, generate a XLSX file using write, and send the file with appropriate headers to initiate a download with file name "SheetJSDrash.xlsx":

// @deno-types="https://cdn.sheetjs.com/xlsx-0.20.3/package/types/index.d.ts"
import { utils, write } from 'https://cdn.sheetjs.com/xlsx-0.20.3/package/xlsx.mjs';

import * as Drash from "https://cdn.jsdelivr.net/gh/drashland/drash@v2.8.1/mod.ts";

class WriteResource extends Drash.Resource {
  public paths = ["/export"];

  public GET(request: Drash.Request, response: Drash.Response): void {
    // create some fixed workbook
    const data = ["SheetJS".split(""), [5,4,3,3,7,9,5]];
    const ws = utils.aoa_to_sheet(data);
    const wb = utils.book_new(); utils.book_append_sheet(wb, ws, "data");
  
    // write the workbook to XLSX as a Uint8Array
    const file = write(wb, { bookType: "xlsx", type: "buffer"});
    // set headers
    response.headers.set("Content-Disposition", 'attachment; filename="SheetJSDrash.xlsx"');
    // send data
    return response.send("application/vnd.ms-excel", file);
  }
}

完整示例

¥Complete Example

下载 SheetJSDrash.ts：

¥Download SheetJSDrash.ts:

curl -LO https://xlsx.nodejs.cn/drash/SheetJSDrash.ts

运行服务器：

¥Run the server:

deno run --allow-net SheetJSDrash.ts

下载测试文件 https://xlsx.nodejs.cn/pres.numbers

¥Download the test file https://xlsx.nodejs.cn/pres.numbers
在浏览器中打开 http://localhost:7262/。

¥Open http://localhost:7262/ in your browser.

单击 "选择文件" 并选择 pres.numbers。然后点击 "提交"

¥Click "Choose File" and select pres.numbers. Then click "Submit"

该页面应将文件的内容显示为 HTML 表格。

¥The page should show the contents of the file as an HTML table.