@dasch-ng/网络用户

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

安装

npm install @dasch-ng/web-utils

职能

convertSvgToImage(svgString, format?)

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

参数:

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

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

示例

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'(中文(简体) )

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

示例

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: 输入元素中的单个文件对象或文件列表

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

示例

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''…。 。 。 .

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 到图像下载

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');
}

处理多文件

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');
  }
});

导出数据为文件

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 通过 维特。 。 。 .

许可证

麻省理工学院