使用 NuxtJS 的 VueJS 站点中的工作表

Nuxt 内容 是 NuxtJS 的基于文件的 CMS，支持从数据文件生成静态站点和按需服务器渲染。

¥Nuxt Content is a file-based CMS for NuxtJS, enabling static-site generation and on-demand server rendering from data files.

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

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

该演示使用 NuxtJS 和 SheetJS 从电子表格中提取数据并在 HTML 表格中显示内容。

¥This demo uses NuxtJS and SheetJS to pull data from a spreadsheet and display the content in an HTML table.

VueJS 2.x 和 VueJS 3.x 之间存在重大变化。由于许多项目仍然使用 VueJS 2.x，因此此演示包含两个版本的 VueJS 的示例。

¥There were breaking changes between VueJS 2.x and VueJS 3.x. Since many projects still use VueJS 2.x, this demo includes examples for both versions of VueJS.

"Nuxt 内容 v1" 部分探讨了 NuxtJS Content v1 的 "parsers"（与 VueJS 2.x 和 NuxtJS 2.x 配对）

¥The "Nuxt Content v1" section explores "parsers" for NuxtJS Content v1 (paired with VueJS 2.x and NuxtJS 2.x)

"Nuxt 内容 v2" 部分探讨了 NuxtJS Content v2 的 "transformers"（与 VueJS 3.x 和 NuxtJS 3.x 配对）

¥The "Nuxt Content v2" section explores "transformers" for NuxtJS Content v2 (paired with VueJS 3.x and NuxtJS 3.x)

该演示重点介绍使用 NuxtJS 和 VueJS 进行服务器端处理。

¥This demo focuses on server-side processing with NuxtJS and VueJS.

VueJS 演示 包含在浏览器中处理电子表格的 NuxtJS 站点的示例。

¥The VueJS demo includes examples of NuxtJS sites that process spreadsheets in the browser.

测试部署

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

¥This demo was tested in the following environments:

Nuxt 内容	Nuxt	日期
1.15.1	2.17.3	2024-06-04
2.12.1	3.11.2	2024-06-04

遥测

Nuxt 嵌入遥测技术。根据文档，可以通过以下方式禁用它：

¥Nuxt embeds telemetry. According to the docs, it can be disabled with:

npx nuxt telemetry disable

上次测试演示时，此命令不起作用。

¥When the demo was last tested, this command did not work.

禁用遥测需要几个步骤：

¥Disabling telemetry requires a few steps:

1. 将环境变量 NUXT_TELEMETRY_DISABLED 设置为 1

   ¥Set the environment variable NUXT_TELEMETRY_DISABLED to 1

Linux/MacOS

将以下行添加到 .profile、.bashrc 和 .zshrc：

¥Add the following line to .profile, .bashrc and .zshrc:

export NUXT_TELEMETRY_DISABLED=1

关闭并重新启动终端以加载更改。

¥Close and restart the Terminal to load the changes.

Windows

在搜索栏中输入 env，然后选择 "编辑系统环境变量"。

¥Type env in the search bar and select "Edit the system environment variables".

在新窗口中，单击 "环境变量..." 按钮。

¥In the new window, click the "Environment Variables..." button.

在新窗口中，查找 "系统变量" 部分并单击 "新的..."

¥In the new window, look for the "System variables" section and click "New..."

将 "变量名" 设置为 NUXT_TELEMETRY_DISABLED，并将值设置为 1。

¥Set the "Variable name" to NUXT_TELEMETRY_DISABLED and the value to 1.

在每个窗口（3 个窗口）中单击 "OK"，然后重新启动计算机。

¥Click "OK" in each window (3 windows) and restart your computer.

2. 应将全局设置添加到用户主目录中的 .nuxtrc：

   ¥A global setting should be added to .nuxtrc in the user home directory:

~/.nuxtrc

telemetry.enabled=false

以下命令可以在 Linux / MacOS 终端中运行：

¥The following command can be run in the Linux / MacOS terminal:

cat >~/.nuxtrc <<EOF
telemetry.enabled=false
EOF

3. 对于 Nuxt 3 站点，在 Nuxt 配置文件中设置 telemetry 选项（nuxt.config.ts 或 nuxt.config.js）：

   ¥For Nuxt 3 sites, set the telemetry option in the Nuxt config file (either nuxt.config.ts or nuxt.config.js):

nuxt.config.js

// ...
export default defineNuxtConfig({
  // @ts-ignore
  telemetry: false,
  // ...
})

Nuxt 内容 v1

¥Nuxt Content v1

Nuxt Content v1 旨在与 NuxtJS v2 和 VueJS v2 配合使用。

¥Nuxt Content v1 is designed to work with NuxtJS v2 and VueJS v2.

下图描绘了练习册华尔兹：

¥The following diagram depicts the workbook waltz:

安装

¥Installation

可以从 nuxt.config.js 导入 SheetJS NodeJS 模块 以进行构建时处理。

¥The SheetJS NodeJS Module can be imported from nuxt.config.js for build-time processing.

自定义解析器

¥Custom Parser

自定义解析器接收解释为 UTF-8 字符串的文件内容。对于包括 XLSX 和 XLS 在内的二进制格式，数据已损坏且无法使用。

¥Custom parsers receive the file content interpreted as UTF-8 strings. For binary formats including XLSX and XLS, the data is corrupt and cannot be used.

解决方法包括安全地重新读取电子表格。

¥The workaround involves safely re-reading the spreadsheets.

传递给解析器的第二个参数是一个对象。对象的 path 属性是文件的路径。

¥The second argument passed to the parser is an object. The path property of the object is the path to the file.

SheetJS readFile[^1] 方法可以定位并解析电子表格文件。sheet_to_json[^2] 实用函数可以生成行对象数组以在 NuxtJS 页面中使用：

¥The SheetJS readFile[^1] method can locate and parse the spreadsheet files. The sheet_to_json[^2] utility function can generate arrays of row objects for use in NuxtJS pages:

Custom Parser (in nuxt.config.js)

import { readFile, utils } from 'xlsx';

/* This will be called when the files change */
const parseSheet = (file, { path }) => {
  /* `path` is a path that can be read with `XLSX.readFile` */
  const wb = readFile(path);

  /* iterate through each worksheet name and generate row objects */
  const o = wb.SheetNames.map(name => ({
    name: name,
    data: utils.sheet_to_json(wb.Sheets[name])
  }));

  /* The final result must be stored in the `data` key of an object */
  return { data: o };
};

配置

¥Configuration

使用 content.extendParser[^3]，Nuxt Content 将使用自定义解析器。

¥Using content.extendParser[^3], Nuxt Content will use custom parsers.

该属性应该是一个对象，其键是文件扩展名（扩展名前有 .），其值是自定义解析器函数。

¥The property is expected to be an object whose keys are file extensions (with the . before the extension) and whose values are custom parser functions.

配置的相关部分如下所示。在此代码片段中，自定义解析器 parseSheet 将与 XLSX、XLS 和 NUMBERS 文件关联：

¥The relevant part of the config is shown below. In this snippet, the custom parser parseSheet will be associated with XLSX, XLS and NUMBERS files:

nuxt.config.js

export default {
// ...

  // content.extendParser allows us to hook into the parsing step
  content: {
    extendParser: {
      // the keys are the extensions that will be matched.  The "." is required
      ".numbers": parseSheet,
      ".xlsx": parseSheet,
      ".xls": parseSheet,
      // can add other extensions like ".fods" as desired
    }
  },

// ...
}

模板使用

¥Template Use

当电子表格放置在 content 文件夹中时，Nuxt 会找到它。可以在带有 asyncData 的视图中引用数据。该名称不应包含扩展名，因此 "sheetjs.numbers" 将被引用为 "sheetjs"：

¥When a spreadsheet is placed in the content folder, Nuxt will find it. The data can be referenced in a view with asyncData. The name should not include the extension, so "sheetjs.numbers" would be referenced as "sheetjs":

Script section of .vue VueJS page

  async asyncData ({$content}) {
    return {
      // $content('sheetjs') will match files with extensions in nuxt.config.js
      data: await $content('sheetjs').fetch()
    };
  }

在模板中，data.data 是一个对象数组。每个对象都有一个工作表名称的 name 属性和一个行对象的 data 数组。这与嵌套的 v-for[^4] 巧妙地映射：

¥In the template, data.data is an array of objects. Each object has a name property for the worksheet name and a data array of row objects. This maps neatly with nested v-for[^4]:

Template section of .vue VueJS page

  <!-- loop over the worksheets -->
  <div v-for="item in data.data" v-bind:key="item.name">
    

<table>
      <!-- loop over the rows of each worksheet -->
      <tr v-for="row in item.data" v-bind:key="row.Index">
        <!-- here `row` is a row object generated from sheet_to_json -->
        

<td>{{ row.Name }}</td>


        

<td>{{ row.Index }}</td>


      </tr>
    </table>


  </div>

Nuxt 内容演示

¥Nuxt Content Demo

对于某些旧版本，部分 Nuxt 依赖树不支持 NodeJS 版本 20。应用创建过程中显示了 EBADENGINE 条警告：

¥For some older versions, parts of the Nuxt dependency tree did not support NodeJS version 20. EBADENGINE warnings were displayed during app creation:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@nuxt/types@2.16.3',
npm WARN EBADENGINE   required: { node: '^14.18.0 || ^16.10.0 || ^17.0.0 || ...
npm WARN EBADENGINE   current: { node: 'v20.2.0', npm: '9.6.6' }
npm WARN EBADENGINE }

推荐的解决方案是切换到 Node 18。

¥The recommended solution is to switch to Node 18.

1. 创建一个股票应用：

   ¥Create a stock app:

npx create-nuxt-app@4.0.0 sheetjs-nuxt

出现提示时，输入以下选项：

¥When prompted, enter the following options:

• Project name：按 Enter（使用默认 sheetjs-nuxt）

  ¥Project name: press Enter (use default sheetjs-nuxt)

• Programming language：按 ↓（选择 TypeScript），然后按 Enter

  ¥Programming language: press ↓ (TypeScript selected) then Enter

• Package manager：选择 Npm 并按 Enter

  ¥Package manager: select Npm and press Enter

• UI framework：选择 None 并按 Enter

  ¥UI framework: select None and press Enter

• Nuxt.js modules：滚动到 Content，使用 Space 选择，然后按 Enter

  ¥Nuxt.js modules: scroll to Content, select with Space, then press Enter

• Linting tools：按 Enter（不要选择任何 Linting 工具）

  ¥Linting tools: press Enter (do not select any Linting tools)

• Testing framework：选择 None 并按 Enter

  ¥Testing framework: select None and press Enter

• Rendering mode：选择 Universal (SSR / SSG) 并按 Enter

  ¥Rendering mode: select Universal (SSR / SSG) and press Enter

• Deployment target：选择 Static (Static/Jamstack hosting) 并按 Enter

  ¥Deployment target: select Static (Static/Jamstack hosting) and press Enter

• Development tools：按 Enter（不要选择任何开发工具）

  ¥Development tools: press Enter (do not select any Development tools)

• What is your GitHub username?：按 Enter（使用默认值）

  ¥What is your GitHub username?: press Enter (use default)

• Version control system：选择 None 并按 Enter

  ¥Version control system: select None and press Enter

将配置项目并安装模块。

¥The project will be configured and modules will be installed.

2. 安装 SheetJS 库并启动服务器：

   ¥Install the SheetJS library and start the server:

cd sheetjs-nuxt
npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
npm run dev

构建完成后，终端将显示如下 URL：

¥When the build finishes, the terminal will display a URL like:

ℹ Listening on: http://localhost:64688/

服务器正在监听该 URL。在网络浏览器中打开链接。

¥The server is listening on that URL. Open the link in a web browser.

3. 下载 https://xlsx.nodejs.cn/pres.xlsx 并移至 content 文件夹。

   ¥Download https://xlsx.nodejs.cn/pres.xlsx and move to the content folder.

curl -L -o content/pres.xlsx https://xlsx.nodejs.cn/pres.xlsx

4. 修改 nuxt.config.js 如下：

   ¥Modify nuxt.config.js as follows:

• 将以下内容添加到脚本顶部：

  ¥Add the following to the top of the script:

nuxt.config.js (add to top)

import { readFile, utils } from 'xlsx';

// This will be called when the files change
const parseSheet = (file, { path }) => {
  // `path` is a path that can be read with `XLSX.readFile`
  const wb = readFile(path);
  const o = wb.SheetNames.map(name => ({ name, data: utils.sheet_to_json(wb.Sheets[name])}));
  return { data: o };
};

• 查找导出的对象。应该有一个 content 属性：

  ¥Look for the exported object. There should be a content property:

  // Content module configuration: https://go.nuxtjs.dev/config-content
  content: {},

将属性替换为以下定义：

¥Replace the property with the following definition:

nuxt.config.js (replace content key in object)

  // content.extendParser allows us to hook into the parsing step
  content: {
    extendParser: {
      // the keys are the extensions that will be matched.  The "." is required
      ".numbers": parseSheet,
      ".xlsx": parseSheet,
      ".xls": parseSheet,
      // can add other extensions like ".fods" as desired
    }
  },

（如果缺少该属性，请将其添加到导出对象的末尾）

¥(If the property is missing, add it to the end of the exported object)

5. 将 pages/index.vue 替换为以下内容：

   ¥Replace pages/index.vue with the following:

pages/index.vue

<!-- sheetjs (C) 2013-present  SheetJS -- https://sheetjs.com -->
<template><div>
  <div v-for="item in data.data" v-bind:key="item.name">
    

<h2>{{ item.name }}</h2>


    

<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
      <tr v-for="row in item.data" v-bind:key="row.Index">
        

<td>{{ row.Name }}</td>


        

<td>{{ row.Index }}</td>


      </tr>
    </tbody></table>


  </div>
</div></template>

<script>
export default {
  async asyncData ({$content}) {
    return {
      data: await $content('pres').fetch()
    };
  }
};
</script>

浏览器应刷新以显示电子表格的内容。如果没有，请单击手动刷新或打开新的浏览器窗口。

¥The browser should refresh to show the contents of the spreadsheet. If it does not, click Refresh manually or open a new browser window.

6. 要验证实时重新加载是否有效，请使用 Excel 或其他电子表格编辑器从 content 文件夹中打开 pres.xlsx。

   ¥To verify that live reload works, open pres.xlsx from the content folder with Excel or another spreadsheet editor.

将单元格 A7 设置为 "SheetJS 开发"，将 B7 设置为 47。保存电子表格。

¥Set cell A7 to "SheetJS Dev" and set B7 to 47. Save the spreadsheet.

服务器终端窗口应显示如下行：

¥The server terminal window should show a line like:

ℹ Updated ./content/pres.xlsx                                       @nuxt/content 05:43:37

页面应自动刷新新内容：

¥The page should automatically refresh with the new content:

7. 停止服务器（在终端窗口中按 CTRL+C）。

   ¥Stop the server (press CTRL+C in the terminal window).

8. 构建静态站点：

   ¥Build the static site:

npm run generate

这将在 dist 文件夹中创建一个静态站点。

¥This will create a static site in the dist folder.

9. 提供静态站点：

   ¥Serve the static site:

npx http-server dist

在 Web 浏览器中访问显示的 URL（通常为 http://localhost:8080）。

¥Access the displayed URL (typically http://localhost:8080) in a web browser.

要确认电子表格数据已添加到站点，请查看页面源代码。

¥To confirm that the spreadsheet data is added to the site, view the page source.

搜索 Bill Clinton 会显示以下编码的 HTML 行：

¥Searching for Bill Clinton reveals the following encoded HTML row:

<tr><td>Bill Clinton</td> <td>42</td></tr>

Nuxt 内容 v2

¥Nuxt Content v2

Nuxt Content v2 旨在与 NuxtJS v3 和 VueJS v3 配合使用。

¥Nuxt Content v2 is designed to work with NuxtJS v3 and VueJS v3.

下图描绘了练习册华尔兹：

¥The following diagram depicts the workbook waltz:

安装

¥Installation

可以从 nuxt.config.js 或转换器或模块脚本安全地导入 SheetJS NodeJS 模块。只要各个 .vue 页面中未导入 SheetJS 模块，该库就不会添加到最终的页面包中！

¥The SheetJS NodeJS Module can be safely imported from nuxt.config.js or transformer or module scripts. As long as the SheetJS modules are not imported in the various .vue pages, the library will not be added to the final page bundle!

定制转换器

¥Custom Transformer

Nuxt Content v2 支持自定义转换器来控制数据。尽管该库对 UTF-8 解释进行硬编码，但 _id 字段当前使用模式 content: 后跟文件名（如果文件直接放置在 content 文件夹中）。这使得转换器能够重新读取文件。

¥Nuxt Content v2 supports custom transformers for controlling data. Although the library hard-codes UTF-8 interpretations, the _id field currently uses the pattern content: followed by the filename (if files are placed in the content folder directly). This enables a transformer to re-read the file.

例如，如果文件 pres.xlsx 存储在 content 文件夹中，则 NuxtJS 内容将使用 ID "content:pres.xlsx"。"./content/" + _id.slice(8) 将是原始路径 "./content/pres.xlsx"。

¥For example, if the file pres.xlsx is stored in the content folder, NuxtJS Content will use ID "content:pres.xlsx". "./content/" + _id.slice(8) will be the original path "./content/pres.xlsx".

NodeJS resolve[^5] 方法将返回一个文件路径。readFileSync[^6] 将读取该文件并返回 NodeJS Buffer。该 Buffer 对象可以使用 SheetJS read[^7] 方法进行解析。sheet_to_json[^8] 实用程序函数可以生成行对象数组以在 NuxtJS 页面中使用。

¥The NodeJS resolve[^5] method will return a file path. readFileSync[^6] will read the file and return a NodeJS Buffer. That Buffer object can be parsed with the SheetJS read[^7] method. The sheet_to_json[^8] utility function can generate arrays of row objects for use in NuxtJS pages.

sheetformer.ts (Transformer)

// @ts-ignore
import { defineTransformer } from "@nuxt/content/transformers/utils";
import { read, utils } from "xlsx";
import { readFileSync } from "node:fs";
import { resolve } from 'node:path';

export default defineTransformer({
  name: 'sheetformer',
  /* list of file extensions */
  extensions: ['.xlsx'],
  parse (_id: string, rawContent: string) {
    /* read the underlying file */
    const buf = readFileSync(resolve("./content/" + _id.slice(8)));
    /* parse */
    const wb = read(buf);
    /* generate JS objects for each worksheet */
    const body = wb.SheetNames.map(name => ({
      name: name,
      data: utils.sheet_to_json(wb.Sheets[name])
    }));
    /* The final result must have the `_id` key and must store data in `body` */
    return { _id, body };
  }
});

转换器返回的数据对象必须具有原始的 _id 键。数据存储在最终对象的 body 属性中。

¥The data object returned by the transformer must have the original _id key. The data is stored in the body property of the final object.

定制模块

¥Custom Modules

NuxtJS 模块是向管道添加转换器的主要机制。

¥NuxtJS modules are the main mechanism for adding transformers to the pipeline.

Module Details (click to show)

Due to the structure of the NuxtJS system, modules must be defined in separate script files. The module script is expected to export a module configured with defineNuxtModule. The setup method is expected to do the following:

• Register itself with the "Nitro" subsystem

• Add the transformer to Nuxt Content in the content:context hook

sheetmodule.ts (Module)

import { resolve } from 'path'
import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  /* module setup method */
  setup (_options, nuxt) {
    /* register with the nitro subsystem */
    nuxt.options.nitro.externals = nuxt.options.nitro.externals || {};
    nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || [];
    nuxt.options.nitro.externals.inline.push(resolve('./sheetmodule'));

    /* add transformer in the content:context hook */
    // @ts-ignore
    nuxt.hook('content:context', (contentContext) => {
      contentContext.transformers.push(resolve('./sheetformer.ts'));
    });
  }
});

The module must be loaded in nuxt.config.ts and added to the modules array:

nuxt.config.ts

import SheetJSModule from './sheetmodule'

export default defineNuxtConfig({
  // @ts-ignore
  telemetry: false,
  modules: [
    SheetJSModule,
    /* it is recommended to load the custom modules before @nuxt/content */
    '@nuxt/content'
  ],
  content: {}
});

渲染数据

¥Rendering Data

页面可以在页面设置中使用 useAsyncData 拉取数据：

¥Pages can pull data using useAsyncData in the page setup:

Script section of .vue VueJS page

<script setup>
const key = "pres"; // matches pres.xlsx
const { data } = await useAsyncData('x', ()=>queryContent(`/${key}`).findOne());
</script>

页面应使用 ContentRenderer 来引用数据。脚本设置中的 data 变量的形状将类似于转换器的返回值。data.body 是保存工作表名称和数据的对象数组。

¥Pages should use ContentRenderer to reference the data. The data variable from the script setup will be shaped like the return value from the transformer. data.body is an array of objects that holds the worksheet name and data.

Template section of .vue VueJS page

<template>
  <ContentRenderer :value="data">
    <!-- data.body is the array defined in the transformer -->
    <div v-for="item in data.body" v-bind:key="item.name">
      <!-- each item has a "name" string for worksheet name -->
      

<h2>{{ item.name }}</h2>


      <!-- each item has a "body" array of data rows -->
      

<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
        <tr v-for="row in item.data" v-bind:key="row.Index">
          <!-- Assuming the sheet uses the columns "Name" and "Index" -->
          

<td>{{ row.Name }}</td>


          

<td>{{ row.Index }}</td>


        </tr>
      </tbody></table>


    </div>
  </ContentRenderer>
</template>

Nuxt 内容 2 演示

¥Nuxt Content 2 Demo

对于某些旧版本，部分 Nuxt 依赖树不支持 NodeJS 版本 20。如果 yarn install 步骤失败并显示类似消息

¥For some older versions, parts of the Nuxt dependency tree did not support NodeJS version 20. If the yarn install step fails with a message like

error @nuxt/kit@3.4.1: The engine "node" is incompatible with this module.

推荐的解决方案是切换到 Node 18。

¥The recommended solution is to switch to Node 18.

1. 创建一个库存应用并安装依赖：

   ¥Create a stock app and install dependencies:

npx -y nuxi init -t content --packageManager yarn --no-gitInit sheetjs-nc2
cd sheetjs-nc2
npx -y yarn install
npx -y yarn add --dev @types/node

2. 安装 SheetJS 库并启动服务器：

   ¥Install the SheetJS library and start the server:

npx -y yarn add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
npx -y yarn dev

构建完成后，终端将显示如下 URL：

¥When the build finishes, the terminal will display a URL like:

  > Local:    http://localhost:3000/

服务器正在监听该 URL。在网络浏览器中打开链接。

¥The server is listening on that URL. Open the link in a web browser.

3. 下载 https://xlsx.nodejs.cn/pres.xlsx 并移至 content 文件夹。

   ¥Download https://xlsx.nodejs.cn/pres.xlsx and move to the content folder.

curl -L -o content/pres.xlsx https://xlsx.nodejs.cn/pres.xlsx

4. 创建转换器。必须将两个文件保存在项目的根目录下：

   ¥Create the transformer. Two files must be saved at the root of the project:

• sheetformer.ts（原始转换器模块）

  ¥sheetformer.ts (raw transformer module)

• sheetmodule.ts（Nuxt 配置模块）

  ¥sheetmodule.ts (Nuxt configuration module)

curl -O https://xlsx.nodejs.cn/nuxt/3/sheetformer.ts
curl -O https://xlsx.nodejs.cn/nuxt/3/sheetmodule.ts

创建源文件后，必须将模块添加到 nuxt.config.ts：

¥After creating the source files, the module must be added to nuxt.config.ts:

nuxt.config.ts (add highlighted lines)

import SheetJSModule from './sheetmodule'

export default defineNuxtConfig({
  // @ts-ignore
  telemetry: false,
  devtools: { enabled: true },
  modules: [
    SheetJSModule,
    '@nuxt/content'
  ],
  content: {}
});

停止开发服务器 (CTRL+C) 并运行以下命令：

¥Stop the dev server (CTRL+C) and run the following:

npx -y nuxi clean
npx -y nuxi cleanup
npx -y nuxi typecheck
npx -y yarn run dev

加载 http://localhost:3000/pres 应该显示一些 JSON 数据：

¥Loading http://localhost:3000/pres should show some JSON data:

{
  // ...
  "data": {
    "_path": "/pres",
    // ...
    "_id": "content:pres.xlsx",
    "body": [
      {
        "name": "Sheet1", // <-- sheet name
        "data": [ // <-- array of data objects
          {
            "Name": "Bill Clinton",
            "Index": 42
          },

5. 下载 pres.vue 并保存到 pages：

   ¥Download pres.vue and save to pages:

curl -o pages/pres.vue https://xlsx.nodejs.cn/nuxt/3/pres.vue

停止开发服务器 (CTRL+C) 并运行以下命令：

¥Stop the dev server (CTRL+C) and run the following:

npx -y nuxi clean
npx -y nuxi cleanup
npx -y yarn run dev

浏览器现在应该显示一个 HTML 表格。

¥The browser should now display an HTML table.

6. 要验证热加载是否有效，请使用电子表格编辑器从 content 文件夹中打开 pres.xlsx。

   ¥To verify that hot loading works, open pres.xlsx from the content folder with a spreadsheet editor.

将单元格 A7 设置为 "SheetJS 开发"，将 B7 设置为 47。保存电子表格。

¥Set cell A7 to "SheetJS Dev" and set B7 to 47. Save the spreadsheet.

页面应自动刷新以显示新内容。

¥The page should automatically refresh with the new content.

7. 停止服务器（在终端窗口中按 CTRL+C）。

   ¥Stop the server (press CTRL+C in the terminal window).

8. 构建静态站点：

   ¥Build the static site:

npx -y yarn run generate

这将在 .output/public 中创建一个静态站点，可以通过以下方式提供服务：

¥This will create a static site in .output/public, which can be served with:

npx -y http-server .output/public

在 Web 浏览器中访问显示的 URL（通常为 http://localhost:8080）。

¥Access the displayed URL (typically http://localhost:8080) in a web browser.

要确认电子表格数据已添加到站点，请查看页面源代码。

¥To confirm that the spreadsheet data is added to the site, view the page source.

搜索 Bill Clinton 会显示以下编码的 HTML 行：

¥Searching for Bill Clinton reveals the following encoded HTML row:

<tr><td>Bill Clinton</td><td>42</td></tr>

[^1]: 见 readFile 于 "读取文件"

¥See readFile in "Reading Files"

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

¥See sheet_to_json in "Utilities"

[^3]: 请参阅 NuxtJS 文档中的 extendParser。

¥See extendParser in the NuxtJS documentation.

[^4]: 见 VueJS 演示中的 "对象数组"

¥See "Array of Objects" in the VueJS demo

[^5]: 请参阅 NodeJS node:path 文档中的 resolve

¥See resolve in the NodeJS node:path documentation

[^6]: 请参阅 NodeJS node:fs 文档中的 readFileSync

¥See readFileSync in the NodeJS node:fs documentation

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

¥See read in "Reading Files"

[^8]: 见 sheet_to_json 于 "实用工具"

¥See sheet_to_json in "Utilities"