A reusable Web Component for PCAP file preview
npm install pcap-element一个可复用的 Web Component，自定义标签
---
A reusable Web Component
---
- 一行代码集成PCAP文件预览
- 支持TCP/UDP/ICMP/SMTP/ARP/IPv6等协议解析
- 现代化UI，支持自定义样式
- 纯前端，无需后端依赖
- 支持npm、CDN两种集成方式
- 内置样式和国际化，无外部依赖
- 支持解析模式和16进制模式切换
- 16进制包标题支持中英文国际化
- 切换按钮有loading状态，防止误触
- 代码结构优化，方法职责清晰，类型安全
- ESLint统一代码风格，自动修复
- One-line integration for PCAP preview
- Supports TCP/UDP/ICMP/SMTP/ARP/IPv6 protocol parsing
- Modern UI, customizable styles
- Pure frontend, no backend required
- Available via npm or CDN
- Built-in styles and i18n, no external dependencies
- Supports parsed and hex display modes
- Hex view title supports i18n (EN/中文)
- Toggle button has loading state to prevent misclicks
- Refactored code structure, clear methods, type safety
- ESLint unified code style, auto-fix
``bash`
npm install pcap-element
> 2.2.0及以后版本，npm包默认入口为ESM构建（dist/pcap-element.esm.min.js）。如需CommonJS/UMD环境支持，请手动引用dist/pcap-element.umd.min.js。
`js`
// 只需要引入JS文件，样式已内置
import 'pcap-element/dist/pcap-element.esm.min.js';
`html
`
`html
`
| 属性 | 类型 | 默认值 | 说明 |
|------|--------|--------|----------------------|
| src | string | - | PCAP文件的URL或路径 |
| lang | string | zh-cn | 语言（支持zh-cn, en-us）|
| enableHexToggle | boolean | false | 是否显示切换按钮（布尔属性，控制能否切换16进制/解析模式）|
| showFullscreenBtn | boolean | false | 是否显示全屏按钮（布尔属性，显示右上角全屏/恢复按钮）|
| useCanvas | boolean | false | 是否启用大文件canvas分段渲染（仅设置为'true'时生效） |
| 事件名 | 说明 |
|--------|------|
| 无 | |
| 方法 | 说明 |
|------|------|
| 无 | |
如需类型提示，可在TypeScript项目中：
`ts`
import type { PcapPacket, PcapData } from 'pcap-element/dist/pcap-element.d.ts';
- 默认样式已内置，无需额外CSS文件
- 可通过Shadow DOM中的CSS变量进行主题定制
- 支持响应式设计，适配移动端
- Built-in styles, no additional CSS required
- Customize via CSS variables in Shadow DOM
- Responsive design, mobile-friendly
- 采用 ESLint 统一代码风格，支持 TypeScript 推荐规则
- 复杂方法已拆分为职责单一的辅助方法，便于维护
- 关键类型均有 TypeScript 明确声明，避免 any
- 切换按钮有 loading 状态，防止误触
| 属性名 | 类型 | 默认值 | 说明 |
| -------------- | ------- | -------- | ---- |
| src | string | - | PCAP文件URL |
| lang | string | zh-cn | 语言（zh-cn/en） |
| enableHexToggle| boolean | false | 是否显示16进制切换按钮 |
| showFullscreenBtn | boolean | false | 是否显示全屏按钮 |
| useCanvas | boolean | false | 是否启用大文件canvas分段渲染（仅设置为'true'时生效） |
`html
`
- Q: useCanvas 有什么作用？
- 当PCAP文件很大（>5000行）时，HTML渲染会变慢。设置 useCanvas="true" 后，大文件会自动分段用canvas渲染，极大提升性能。canvas渲染与HTML视觉完全一致，支持斑马色、对齐等。
- Q: useCanvas 默认开启吗？
- 默认关闭。只有设置 useCanvas="true" 时才启用canvas分段渲染。
- Q: useCanvas 关闭时会怎样？
- 无论文件多大，全部用HTML渲染，适合需要复制、选中、无canvas依赖的场景。
- Q: What does useCanvas do?
- When the PCAP file is very large (>5000 lines), HTML rendering can become slow. Setting useCanvas="true" will automatically use canvas chunk rendering for large files, greatly improving performance. The canvas rendering is visually identical to HTML, supporting zebra striping, alignment, and grouping.
- Q: Is useCanvas enabled by default?
- No, it is disabled by default. Canvas chunk rendering is only enabled when useCanvas="true" is set.
- Q: What happens if useCanvas is disabled?
- No matter how large the file, all rendering uses HTML. This is suitable for scenarios where you need to copy, select, or avoid canvas dependencies.
- 检查src路径是否正确、文件是否支持CORS、服务器是否返回二进制内容
- Check if the src path is correct, CORS is enabled, and the server returns binary content.
- 是，magic number需为a1b2c3d4/d4c3b2a1/a1b23c4d/4d3cb2a1
- 只需在入口引入js文件，然后像普通HTML标签一样用即可
- Just import the JS file in your entry and use it as a normal HTML tag.
- 样式已内置到组件中，避免外部依赖和404错误
- Styles are built-in to the component to avoid external dependencies and 404 errors.
- 使用enableHexToggle属性：enableHexToggle显示切换按钮，允许用户切换16进制/解析模式；不加时始终为解析模式
- Use the enableHexToggle attribute: enableHexToggle shows the toggle button, allowing users to switch between hex/parsed mode. If not set, always parsed mode.
- 使用showFullscreenBtn属性：showFullscreenBtn显示右上角全屏/恢复按钮，点击可切换全屏和普通模式
- Use the showFullscreenBtn attribute: showFullscreenBtn shows the fullscreen/exit button at the top right, allowing users to toggle fullscreen mode.
- 欢迎PR、Issue、建议
- 代码风格TypeScript+ESLint
- 入口文件：src/pcap-element-lib.ts
- PRs, issues, and suggestions welcome
- Code style: TypeScript + ESLint
- Entry: src/pcap-element-lib.ts
MIT
---
A reusable Web Component for previewing and analyzing PCAP network capture files directly in the browser.
- One-line integration for PCAP preview
- Supports TCP/UDP/ICMP/SMTP/ARP/IPv6 protocol parsing
- Modern UI, customizable styles
- Pure frontend, no backend required
- Available via npm or CDN
- Built-in styles and i18n, no external dependencies
- Supports parsed and hex display modes
- Hex view title supports i18n (EN/中文)
- Toggle button has loading state to prevent misclicks
- Refactored code structure, clear methods, type safety
- ESLint unified code style, auto-fix
`bash`
npm install pcap-element
1 Import in your entry file:
`js`
// Only need to import JS file, styles are built-in
import 'pcap-element/dist/pcap-element.esm.min.js';
2 Use in HTML:
`html
`
3 Or via CDN:
`html
`
| Name | Type | Default | Description |
|------|--------|---------|----------------------------|
| src | string | - | URL or path to PCAP file |
| lang | string | zh-cn | Language (supports zh-cn, en-us) |
| enableHexToggle | boolean | false | Show toggle button (boolean attribute, controls if user can switch hex/parsed mode) |
| showFullscreenBtn | boolean | false | Show fullscreen button (boolean attribute, shows fullscreen/exit button at top right) |
None
None
For TypeScript:
`ts`
import type { PcapPacket, PcapData } from 'pcap-element/dist/pcap-element.d.ts';
- Built-in styles, no additional CSS required
- Customize via CSS variables in Shadow DOM
- Responsive design, mobile-friendly
- ESLint unified code style, TypeScript recommended rules
- Complex methods split into clear helpers for maintainability
- All key types are strictly typed, no any
- Toggle button has loading state to prevent misclicks
- Hex view title supports i18n (EN/中文)
1. PCAP file not loading?
- Check src path, CORS, and server binary response
2. Only standard PCAP format supported?
- Yes, magic number must be a1b2c3d4/d4c3b2a1/a1b23c4d/4d3cb2a1
3. How to use in React/Vue/Angular?
- Import js file in your entry and use as a normal HTML tagenableHexToggle`
4. Why no CSS file needed?
- Styles are built-in to avoid external dependencies and 404 errors
5. How to switch display mode?
- Use the