# @adyen/adyen-document-viewer 中文文档

规范地址：https://npmcn.com/package/%40adyen/adyen-document-viewer/

版本：1\.4\.5
npm 元数据更新时间：2026-07-01T08:57:11.988Z
中文译文更新时间：2026-11-05T17:59:59.658Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adyen/adyen-document-viewer
原文对照：https://npmcn.com/package/%40adyen/adyen-document-viewer/?lang=original
项目主页：https://github.com/Adyen/adyen-document-viewer#readme
源码仓库：https://github.com/Adyen/adyen-document-viewer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：90.7 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=24
- 运行依赖：2 个
- 首次发布：2022-11-15T15:43:49.065Z
- 最新版本发布：2026-06-30T13:58:44.108Z
- 近 30 天下载量：114133（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 3 个）

## 中文简介

Adyen 文档查看器

## 安装

```sh
npm install @adyen/adyen-document-viewer
```

也可以使用：`pnpm add @adyen/adyen-document-viewer`、`yarn add @adyen/adyen-document-viewer`、`bun add @adyen/adyen-document-viewer`

## README

## Adyen 文档查看器

Adyen Document Viewer为您提供了一种灵活的方式来渲染Adyen生成的文档,可以嵌入您的网站.

## 安装

### 节点软件包管理器( 建议)

1.  使用软件包安装 [无](https://www.npmjs.com/) 或者说 [线条](https://yarnpkg.com/)
    
    ```sh
    npm install @adyen/adyen-document-viewer --save
    ```
    
2.  导入 [Adyen 文档查看器节点包](https://www.npmjs.com/package/@adyen/adyen-document-viewer) 输入您的应用程序
    
    ```js
    import AdyenDocumentViewer from '@adyen/adyen-document-viewer';
    import '@adyen/adyen-document-viewer/dist/adyen-document-viewer.min.css';
    ```
    

### 光盘N

包含脚本和样式表到 a `.html` 文件

```html
<script src="https://unpkg.com/@adyen/adyen-document-viewer@^1.0.0"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/@adyen/adyen-document-viewer@^1.0.0/dist/adyen-document-viewer.min.css"
/>
```

**注:** 通过选择这种方法, `AdyenDocumentViewer` 课程将在您的应用程序中在全球开放.

## 使用量

1.  该组件需要一个HTML元素来渲染其内容. 创建实例 `AdyenDocumentViewer` 并传递 HTML 元素本身或一个 `querySelector` 瞄准它的字符串值
    
    ```js
    const documentViewer = new AdyenDocumentViewer('#test');
    ```
    
2.  打电话 `render` 方法,并将文档作为参数传递
    
    ```js
    documentViewer.render(document);
    ```
    

## 配置选项

您可以自定义行为 `AdyenDocumentViewer` 在初始化过程中通过选项.

| 选项 | 说明 | 默认 |
| --- | --- | --- |
| `onExpandSection` | 当区域被扩展时触发回调函数 . | `undefined` |
| `multiple` | 允许多个部分同时被扩展. | `false` |
| `showSectionNumbering` | 启用或禁用分区编号 . | `false` |

您可以在创建实例时以选项为第二个参数提供对象 `AdyenDocumentViewer`数字 :

```js
const options = {
  onExpandSection: (sectionTitle) => console.log(`Section ${sectionTitle} expanded`),
  multiple: true,
  showSectionNumbering: true,
};

const documentViewer = new AdyenDocumentViewer('#test', options);
```

## 样式

Adyen Document Viewer具有可主题性,并使用CSS变量可以被推翻以达到所期望的风格. 应增加顶部 `.adyen-document-viewer` 课.

### 覆盖样式示例

1.  创建 `override.css` 与您想要样式的变量
    
    ```css
    .adyen-document-viewer {
      --adv-background-color: #ff8888;
      --adv-heading-font-size: 48px;
    }
    ```
    
2.  确保导入 `override.css` 导入主 CSS 库后
    
    ```js
    import 'adyen-document-viewer/dist/adyen-document-viewer.min.css';
    import './override.css';
    ```
    

### 可用的 CSS 变量

```css
/* Colors */
--adv-color-white: #fff; /* backgrounds  */
--adv-color-black: #00112c; /* text color  */
--adv-color-grey-10: #f3f6f9; /* background, hover */
--adv-color-grey-20: #dce0e5; /* borders, active  */
--adv-color-blue: #06f; /* links */

/* Background */
--adv-background-color: var(--adv-color-white);

/* Fonts */
--adv-text-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu,
  cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--adv-text-color: var(--adv-color-black);
--adv-text-font-weight-regular: 400;
--adv-text-font-weight-semi-bold: 600;
--adv-text-line-height: 1.4;
--adv-text-font-size-medium: 15px;
--adv-text-font-size-small: 13px;

/* Borders */
--adv-border-width: 1px;
--adv-border-style: solid;
--adv-border-color: var(--adv-color-grey-20);
--adv-border-radius: 6px;

/* Transition */
--adv-transition-duration: 0.1s;
--adv-transition-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);

/* Focus ring */
--adv-focus-ring-transition-duration: var(--adv-transition-duration);
--adv-focus-ring-timing-function: var(--adv-transition-function);
--adv-focus-ring-color: rgba(0, 102, 255, 0.4);
--adv-focus-ring-distance: 1px;
--adv-focus-ring-width: 3px;
--adv-focus-ring-z-index: 1;
--adv-focus-ring-background-color: var(--adv-color-white);

/* Spacing */
--adv-spacing-0: 0;
--adv-spacing-2: 2px;
--adv-spacing-4: 4px;
--adv-spacing-8: 8px;
--adv-spacing-12: 12px;
--adv-spacing-16: 16px;
--adv-spacing-24: 24px;
--adv-spacing-32: 32px;
--adv-spacing-40: 40px;
--adv-spacing-48: 48px;

/* Accordion */
--adv-accordion-border-radius: var(--adv-border-radius);
--adv-accordion-item-border-color: var(--adv-border-color);
--adv-accordion-item-border-width: var(--adv-border-width);
--adv-accordion-between-items-border-color: transparent;
--adv-accordion-header-color: var(--adv-color-black);
--adv-accordion-header-padding: var(--adv-spacing-16);
--adv-accordion-header-font-weight: var(--adv-text-font-weight-semi-bold);
--adv-accordion-header-hover-background-color: var(--adv-color-grey-10);
--adv-accordion-header-active-background-color: var(--adv-color-grey-20);
--adv-accordion-header-border-radius: var(--adv-spacing-4);
--adv-accordion-title-color: inherit;
--adv-accordion-toggle-margin: var(--adv-spacing-2) var(--adv-spacing-16) 0 0;
--adv-accordion-toggle-padding: 0;
--adv-accordion-toggle-width: var(--adv-spacing-12);
--adv-accordion-content-margin: 0 0 var(--adv-spacing-24);
--adv-accordion-content-padding: 0 var(--adv-spacing-16) 0 calc(
    var(--adv-spacing-32) + var(--adv-spacing-12)
  );
--adv-accordion-content-closed-margin: 0;
--adv-accordion-transition-duration: var(--adv-transition-duration);
--adv-accordion-transition-function: var(--adv-transition-function);
--adv-accordion-transition-property: margin, height, padding;
--adv-accordion-css-animated-max-height: 500px;
--adv-accordion-css-animated-transition-duration: var(--adv-accordion-transition-duration);
--adv-accordion-css-animated-transition-property: margin, max-height;

/* Heading */
--adv-heading-font-size: 32px;
--adv-heading-font-weight: var(--adv-text-font-weight-semi-bold);
--adv-heading-line-height: 40px;
--adv-heading-text-align: left; 
--adv-heading-2-font-size: 24px;
--adv-heading-2-font-weight: var(--adv-text-font-weight-semi-bold);
--adv-heading-2-line-height: 32px;

/* Icon */
--adv-icon-color: var(--adv-color-black);

/* Link */
--adv-link-color: var(--adv-color-blue);
--adv-link-background-color: transparent;
--adv-link-text-decoration: none;
--adv-link-hover-text-decoration: underline;
--adv-link-active-color: var(--adv-link-color);
--adv-link-focus-outline: none;
--adv-link-visited-color: var(--adv-link-color);
--adv-link-inherit-font-size: inherit;
--adv-link-inherit-color: inherit;
--adv-link-underline-color: inherit;

/* List */
--adv-list-margin: 0;
--adv-list-padding: 0 0 0 18px;
--adv-list-nested-padding: var(--adv-list-padding);
--adv-list-item-padding: 0 0 0 var(--adv-spacing-4);
--adv-list-no-markers-padding: 0;
--adv-list-no-markers-list-style: none;

/* Section */
--adv-section-background-color: var(--adv-color-grey-10);
--adv-section-border-radius: var(--adv-border-radius);
--adv-section-margin: var(--adv-spacing-24) 0 0 0;
--adv-section-padding: var(--adv-spacing-16);

/* Table */
--adv-table-width: 100%;
--adv-table-margin: 0;
--adv-table-padding: 0;
--adv-table-border: none;
--adv-table-vertical-align: top;
--adv-table-line-height: 16px;
--adv-table-row-border-width: var(--adv-border-width);
--adv-table-row-border-style: var(--adv-border-style);
--adv-table-row-border-color: var(--adv-border-color);
--adv-table-row-border: var(--adv-table-row-border-width) var(--adv-table-row-border-style) var(--adv-table-row-border-color);
--adv-table-row-changed-background-color: var(--adv-color-grey-10);
--adv-table-cell-padding-top: var(--adv-spacing-12);
--adv-table-cell-padding-right: calc(var(--adv-spacing-16) + var(--adv-spacing-24));
--adv-table-cell-padding-bottom: var(--adv-spacing-12);
--adv-table-cell-padding-left: var(--adv-spacing-16);
--adv-table-cell-padding: var(--adv-table-cell-padding-top) var(--adv-table-cell-padding-right) var(
    --adv-table-cell-padding-bottom
  ) var(--adv-table-cell-padding-left);
--adv-table-cell-text-align: left;
--adv-table-first-column-padding-left: var(--adv-spacing-24);
--adv-table-condensed-cell-padding-y: var(--adv-spacing-8);
--adv-table-condensed-cell-padding: var(--adv-table-condensed-cell-padding-y) var(
    --adv-table-cell-padding-right
  )
  var(--adv-table-condensed-cell-padding-y) var(--adv-table-cell-padding-left);
--adv-table-condensed-font-size: var(--adv-text-font-size-small);
```

## 发展

管理发展环境:

1.  克隆 [此寄存器](https://github.com/Adyen/adyen-document-viewer)。 。 。 .
    
2.  通过运行安装依赖性 :
    
    ```sh
    npm install
    ```
    
3.  运行开发环境, 启动服务器监听 [http://localhost:5174 (英语)](http://localhost:5174/)数字 :
    
    ```sh
    npm start
    ```
    

## 支助

如果你有特性请求 或发现错误或技术问题, [联系我们的支援队](https://www.adyen.help/hc/en-us/requests/new)。 。 。 .

## 捐款

我们强烈鼓励你为我们的资料库作出贡献。 发现更多的在我们 [捐款准则](https://github.com/Adyen/.github/blob/master/CONTRIBUTING.md)。 。 。 .

## 许可证

麻省理工学院执照. 更多信息,请参见 [自由主义](https://npmcn.com/package/%40adyen/adyen-document-viewer/LICENSE) 文档.

## 常见问题

### @adyen/adyen-document-viewer 是什么？

Adyen 文档查看器

### 如何安装 @adyen/adyen-document-viewer？

在项目目录运行 npm install @adyen/adyen-document-viewer，或使用 pnpm add / yarn add / bun add。

### @adyen/adyen-document-viewer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adyen/adyen-document-viewer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @adyen/adyen-document-viewer 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @adyen/adyen-document-viewer 可以商用吗？

@adyen/adyen-document-viewer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @adyen/adyen-document-viewer 的下载量有多少？

根据 npm 官方下载统计，@adyen/adyen-document-viewer 在 2026/10/05 – 2026/11/03 这 30 天内被下载 114,133 次，日均约 3,804 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adyen/adyen-document-viewer 还在维护吗？

最新版本 1\.4\.5 发布于 2026/06/30（4 个月前）；至今共发布 18 个版本，其中过去 12 个月发布了 3 个；首次发布于 2022/11/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。