# @dasch-ng/web-utils 中文文档

规范地址：https://npmcn.com/package/%40dasch-ng/web-utils/

版本：1\.0\.0-rc\.2
npm 元数据更新时间：2026-11-10T16:18:17.392Z
中文译文更新时间：2026-11-13T07:16:40.000Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dasch-ng/web-utils
原文对照：https://npmcn.com/package/%40dasch-ng/web-utils/?lang=original
项目主页：https://github.com/DaSchTour/dasch-ng#readme
源码仓库：https://github.com/DaSchTour/dasch-ng

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

- 包体积（解压后）：36.7 kB，27 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2025-12-25T20:37:02.813Z
- 最新版本发布：2026-11-07T10:56:16.502Z
- 近 30 天下载量：2136（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

用于共同网络开发任务的公用功能集,包括SVG转换,文件下载,以及文件处理.

## 安装

```sh
npm install @dasch-ng/web-utils
```

也可以使用：`pnpm add @dasch-ng/web-utils`、`yarn add @dasch-ng/web-utils`、`bun add @dasch-ng/web-utils`

## README

# @dasch-ng/网络用户

用于共同网络开发任务的公用功能集,包括SVG转换,文件下载,以及文件处理.

[![npm version](https://img.shields.io/npm/v/@dasch-ng/web-utils.svg)](https://www.npmjs.com/package/@dasch-ng/web-utils) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/package/%40dasch-ng/web-utils/LICENSE)

## 安装

```bash
npm install @dasch-ng/web-utils
```

## 职能

### `convertSvgToImage(svgString, format?)`

使用 HTML5 Canvas 将 SVG 字符串转换为光栅图像( PNG 或 JPEG) .

**参数:**

-   `svgString`: SVG 标记为字符串
-   `format` (可选) : 输出图像格式, 或是 `'png'` 或者说 `'jpeg'`默认为 `'png'`

**回返情况:** 承诺解决包含光栅图像数据的 Blob , 如果转换失败则无效

**示例**

```typescript
import { convertSvgToImage } from '@dasch-ng/web-utils';

const svgString = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red" /></svg>';
const blob = await convertSvgToImage(svgString, 'png');
if (blob) {
  const url = URL.createObjectURL(blob);
  // Use the URL for download or display
}
```

* * *

### `download(data, filename, type?)`

触发给定数据的浏览器下载,并自动清理对象 URL.

**参数:**

-   `data`: 作为字符串或 Blob 下载的数据
-   `filename`: 要下载的文件名称
-   `type` (可选) : Blob 的 MIME 类型(例如, `'text/plain'`, (中文(简体) ), `'application/json'`(中文(简体) )

**回返情况:** 当下载启动时解决的承诺

**示例**

```typescript
import { download } from '@dasch-ng/web-utils';

// Download a text file
await download('Hello, World!', 'greeting.txt', 'text/plain');

// Download JSON data
const data = { name: 'John', age: 30 };
await download(JSON.stringify(data, null, 2), 'data.json', 'application/json');

// Download a Blob (e.g., an image)
const blob = await convertSvgToImage(svgString);
if (blob) {
  await download(blob, 'image.png', 'image/png');
}
```

* * *

### `createFileArray(files)`

将单个文件或文件列表转换为文件对象数组,以便于处理.

**参数:**

-   `files`: 输入元素中的单个文件对象或文件列表

**回返情况:** 包含文件对象的阵列

**示例**

```typescript
import { createFileArray } from '@dasch-ng/web-utils';

// Handle file input change event
const input = document.querySelector('input[type="file"]') as HTMLInputElement;
input.addEventListener('change', (event) => {
  const files = createFileArray(input.files!);
  files.forEach((file) => {
    console.log(`File: ${file.name}, Size: ${file.size} bytes`);
  });
});

// Works with both single and multiple file inputs
const singleFile = new File(['content'], 'test.txt');
const fileArray = createFileArray(singleFile); // [File]
```

### `parseContentDisposition(header)`

参数 a `Content-Disposition` 页: 1 `filename*=UTF-8''…`。 。 。 .

```typescript
const { filename } = parseContentDisposition(response.headers.get('Content-Disposition')) ?? {};
```

### `fileTypeOf(file)`

分类文件名称或 `File` 通过扩展: `'video' | 'image' | 'audio' | 'document' | 'spreadsheet' | 'archive' | null`。 。 。 .

### `toSlug(value, { maxLength?, fallback?, expandUmlauts? })`

URL 语句 : `[a-z0-9-]`,去除口音,写出,切入一个字边界: `toSlug('Grüne Wälder')` → `'gruene-waelder'`。 。 。 .

### `redactUrl(url, { params?, keepHash? })`

删除秘密查询参数( E)`SECRET_URL_PARAMS`)和从一个 http(s) URL 中生成的碎片,然后记录它.

## 用法图案

### SVG 到图像下载

```typescript
import { convertSvgToImage, download } from '@dasch-ng/web-utils';

const svgElement = document.querySelector('svg');
const svgString = new XMLSerializer().serializeToString(svgElement);

const blob = await convertSvgToImage(svgString, 'png');
if (blob) {
  await download(blob, 'chart.png', 'image/png');
}
```

### 处理多文件

```typescript
import { createFileArray, download } from '@dasch-ng/web-utils';

const input = document.querySelector('input[type="file"]') as HTMLInputElement;
input.addEventListener('change', async () => {
  const files = createFileArray(input.files!);

  for (const file of files) {
    const text = await file.text();
    const processed = text.toUpperCase();
    await download(processed, `processed-${file.name}`, 'text/plain');
  }
});
```

### 导出数据为文件

```typescript
import { download } from '@dasch-ng/web-utils';

// Export application state as JSON
function exportState(state: object) {
  const json = JSON.stringify(state, null, 2);
  return download(json, 'app-state.json', 'application/json');
}

// Export CSV data
function exportCsv(data: string[][]) {
  const csv = data.map((row) => row.join(',')).join('\n');
  return download(csv, 'data.csv', 'text/csv');
}
```

## 发展

### 大楼

运行 `nx build web-utils` 来建造图书馆.

### 运行单元测试

运行 `nx test web-utils` 通过 [维特](https://vitest.dev/)。 。 。 .

## 许可证

麻省理工学院

## 常见问题

### @dasch-ng/web-utils 是什么？

用于共同网络开发任务的公用功能集,包括SVG转换,文件下载,以及文件处理\.

### 如何安装 @dasch-ng/web-utils？

在项目目录运行 npm install @dasch-ng/web-utils，或使用 pnpm add / yarn add / bun add。

### @dasch-ng/web-utils 支持 TypeScript 吗？

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

### @dasch-ng/web-utils 支持 ESM 还是 CommonJS？

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

### @dasch-ng/web-utils 可以商用吗？

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

### @dasch-ng/web-utils 的下载量有多少？

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

### @dasch-ng/web-utils 还在维护吗？

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