{"_id":"ui_dj","_rev":"40-0c40d77490449698c53ea19820a870d7","name":"ui_dj","dist-tags":{"latest":"6.0.7"},"versions":{"3.0.70":{"name":"ui_dj","version":"3.0.70","_id":"ui_dj@3.0.70","maintainers":[{"name":"hdj357","email":"2368823580@qq.com"}],"dist":{"shasum":"8ed8b8ddfbb38a50791dd4717ced8628456dc926","tarball":"https://registry.npmjs.org/ui_dj/-/ui_dj-3.0.70.tgz","fileCount":12,"integrity":"sha512-Kzr0IMkAmP4po4mwp7/TYCds4seZ5PS8m+052Qe1FhsDpNAmCXXlFE9+Y1WnVqJOjbzsheSSCTIVq8+xpZ0pEg==","signatures":[{"sig":"MEUCICd7EklcDF7WHLftpYwx65my3hkJH8VA2bICqLGGr0fPAiEA396LpzVFbG/Lq2Z5t4eBE0XwYcCxRPVeExP6aygV/PY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12850},"main":"lib/index.mjs","style":"lib/style.css","types":"lib/index.d.ts","vetur":{"tags":"vetur/tags.json","attributes":"vetur/attributes.json"},"module":"lib/index.umd.js","gitHead":"6b915f98558270fa64465f974d3429b6d756c38a","private":false,"scripts":{"del":"gulp --require @esbuild-kit/cjs-loader -f ./build/index.ts","dev":"vite --force","test":"gulp --require -f ./build/index.ts","build":"npm run del && vue-tsc && vite build && npm version patch","test1":"gulp --require @esbuild-kit/cjs-loader -f ./build/index.ts","preview":"vite preview"},"_npmUser":{"name":"hdj357","email":"2368823580@qq.com"},"web-types":"vetur/web-types.json","_npmVersion":"8.19.2","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n\n\n```\n\n## 组件清单\n\n| 组件 | 引入方式 | 说明 |\n| --- | --- | --- |\n| `DjSvg` | `import { DjSvg } from 'ui_dj'` | SVG 图标组件，通过 `` 引用 symbol。 |\n| `DjButton` | `import { DjButton } from 'ui_dj'` | 基础按钮/测试组件，当前仍偏示例性质。 |\n| `DjDoPdf` | `import { DjDoPdf } from 'ui_dj/doPdf'` | PDF 编辑器组件，提供 Schema 编辑、预览、导出、PDF 生成后打印能力。 |\n\n> `DjDoPdf` 使用独立入口 `ui_dj/doPdf` 导出，不随默认 `MukUI install` 全局注册。\n\n## DjSvg\n\n`DjSvg` 用于渲染 SVG symbol 图标。\n\n### Props\n\n| 属性 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `name` | `string` | `''` | 图标名称，最终会拼接为 `#icon-${name}`。 |\n| `color` | `string` | `currentColor` | 图标颜色，会传给 `` 的 `fill`。 |\n| `size` | `number \\| string` | 继承字号 | 图标宽高。不传时为 `1em`，继承主项目或父级字号；传入后会生成运行时内联样式，不经过 `postcss-pxtorem`。 |\n\n> `DjSvg` 不读取全局 `rootValue`。移动端项目需要单位转换时不要使用 `size`，推荐不传 `size`，通过主项目 UnoCSS/CSS 字号控制；只有已经明确传入 `rem`、`em` 等最终单位时才使用 `size`。\n\n### 示例\n\n```vue\n\n\n\n```\n\n渲染后的引用地址为：\n\n```html\n\n```\n\n因此宿主项目需要提前注入或加载对应的 SVG symbol。\n\n### 强制设置颜色\n\n如果需要通过父组件样式强制覆盖图标颜色，可以使用 `:deep`：\n\n```scss\n:deep(.c-icon use) {\n fill: $themeBgColor;\n}\n```\n\n## DjButton\n\n`DjButton` 当前是一个基础示例组件，支持传入 `type` 并在组件内部展示。\n\n```vue\n\n\n\n```\n\n> 注意：该组件当前代码中仍包含调试展示和 console 输出，更适合作为组件库基础示例或后续扩展入口。\n\n## DjDoPdf\n\n`DjDoPdf` 是基于 pdfmake 的 PDF 编辑器组件。它支持在页面中编辑文档结构、查看编译后的 `docDefinition` 和 `runtimeConfig`，并对外暴露导出、导入、预览、下载、打开和打印等方法。\n\n> 这里的“打印”指 PDF 生成后的浏览器打印能力，即 `printPdf` / `print()`；不是早期历史版本中的独立打印模块。当前新版本已经移除旧打印功能，主要保留 PDF 编辑和生成能力。\n\n### 为什么 DjDoPdf 强大\n\n`DjDoPdf` 不只是一个“点击下载 PDF”的封装，而是一套可以嵌入业务系统的 PDF 可视化编辑和生成方案。它把 pdfmake 的复杂配置抽象成可编辑的工程 Schema，同时保留底层 `docDefinition` 和运行时配置的导出能力，既适合页面端低代码编辑，也适合业务系统保存模板后按数据生成 PDF。\n\n核心优势包括：\n\n- **可视化编辑**：内置画布区、文档设置区、节点检查器和预览区，用户可以直接编辑文本、列表、表格、图片、SVG、二维码、分栏、堆叠、目录等 PDF 内容节点。\n- **Schema 驱动**：所有编辑结果都可以导出为当前版本的 `EditorSchema`，便于保存到数据库、接口下发、宿主侧版本管理和再次导入编辑。\n- **运行时编译**：可随时把工程 Schema 编译成 pdfmake 可识别的 `docDefinition` 与 `runtimeConfig`，方便接入现有 PDF 生成链路。\n- **模板数据填充**：支持 `{{user.name}}` 这类路径变量，也支持列表和表格等数组数据解析，适合合同、报价单、出库单、报表、证书等动态文档。\n- **完整输出链路**：同一份工程既可以生成预览 URL，也可以生成 `Blob`，还可以直接下载、打开新标签页或打印。\n- **中文字体友好**：支持 `fontUrl + fontFileName` 快速配置字体，也支持传入完整 `fontConfig`，解决中文 PDF 常见的乱码、缺字问题。\n- **组件和工具函数两种用法**：需要可视化编辑时使用 `DjDoPdf` 组件；只需要根据模板和数据生成 PDF 时，直接使用 `createPreviewUrlFromSchemaAndData`、`createPdfBlobFromSchemaAndData` 等工具函数。\n- **适合业务系统集成**：外层系统可以通过 `ref` 获取 Schema、导入 Schema、监听 `change`、接管预览地址、上传 Blob 或把编译产物交给服务端处理。\n\n典型使用场景：\n\n| 场景 | 能力 |\n| --- | --- |\n| 合同/协议模板 | 可视化维护固定版式，通过模板变量填充客户、金额、日期等数据。 |\n| 报价单/订单/出库单 | 表格数据可由业务数组动态生成，适合多行明细。 |\n| 报表导出 | 支持标题、段落、表格、图片、页眉页脚等组合内容。 |\n| 证书/凭证 | 可配置字体、字号、颜色、图片和 SVG 内容。 |\n| 低代码平台 | Schema 可保存、导入、复制、回滚，适合作为模板设计器嵌入。 |\n\n一句话概括：**DjDoPdf 负责把“复杂的 PDF 代码配置”变成“可编辑、可保存、可复用、可动态填充数据的 PDF 模板工程”。**\n\n### 安装依赖\n\n使用 PDF 能力时，请确保安装了 `pdfmake`：\n\n```bash\npnpm add pdfmake\n```\n\n### 引入方式\n\n`DjDoPdf` 使用独立入口导出：\n\n```vue\n\n\n\n```\n\n### Props\n\n| 属性 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `insertFeatures` | `string[]` | `[]` | 可插入节点能力配置，传给顶部工具栏。 |\n| `showToolbar` | `boolean` | `true` | 是否显示顶部工具栏。 |\n| `fontUrl` | `string` | `''` | 字体 URL 前缀，例如 `https://cdn.example.com/fonts/`。 |\n| `fontFileName` | `string` | `''` | 字体文件名，例如 `KaiTI_GB2312.ttf`。 |\n| `fontFamily` | `string` | `'Roboto'` | 注册到 pdfmake 的字体名称。 |\n| `fontConfig` | `PdfFontMap` | `{}` | 完整字体映射，优先级高于 `fontUrl + fontFileName`。 |\n\n### 字体配置示例\n\n#### 使用字体 URL\n\n```vue\n\n```\n\n组件会自动生成 pdfmake 字体映射，并把默认字体设置为 `fontFamily`。\n\n#### 使用完整字体映射\n\n```ts\nconst fontConfig = {\n KaiTi: {\n normal: 'https://cdn.example.com/fonts/KaiTI_GB2312.ttf',\n bold: 'https://cdn.example.com/fonts/KaiTI_GB2312.ttf',\n italics: 'https://cdn.example.com/fonts/KaiTI_GB2312.ttf',\n bolditalics: 'https://cdn.example.com/fonts/KaiTI_GB2312.ttf',\n },\n}\n```\n\n```vue\n\n```\n\n### Events\n\n| 事件 | 参数 | 说明 |\n| --- | --- | --- |\n| `change` | `EditorSchema` | 工程 Schema 变化时触发。 |\n\n```vue\n\n```\n\n```ts\nimport type { EditorSchema } from 'ui_dj/doPdf'\n\nfunction handleSchemaChange(schema: EditorSchema) {\n console.log(schema)\n}\n```\n\n### Expose 方法\n\n通过 `ref` 可以调用以下方法：\n\n| 方法 | 返回值 | 说明 |\n| --- | --- | --- |\n| `addBlock(type)` | `void` | 添加指定类型节点。 |\n| `selectBlock(id)` | `void` | 选中节点。 |\n| `removeBlock(id)` | `void` | 删除节点。 |\n| `moveBlock(id, offset)` | `void` | 移动节点。 |\n| `duplicateBlock(id)` | `void` | 复制节点。 |\n| `reset()` | `void` | 重置为初始工程。 |\n| `download(filename?)` | `void` | 下载当前 PDF。 |\n| `open()` | `void` | 新标签打开当前 PDF。 |\n| `print()` | `void` | 打印当前 PDF。 |\n| `getSchema()` | `EditorSchema` | 获取当前工程 Schema。 |\n| `getSchemaJson(space?)` | `string` | 获取格式化后的工程 Schema JSON。 |\n| `setSchema(schemaOrJsonText)` | `void` | 导入工程 Schema，支持对象或 JSON 字符串。 |\n| `getDocDefinition()` | `Record` | 获取当前 pdfmake `docDefinition`。 |\n| `getDocDefinitionJson(space?)` | `string` | 获取格式化后的 `docDefinition` JSON。 |\n| `getRuntimeConfig()` | `PdfRuntimeConfig` | 获取当前运行时配置。 |\n| `getRuntimeConfigJson(space?)` | `string` | 获取格式化后的运行时配置 JSON。 |\n| `getCompiled()` | `CompiledResult` | 一次性获取 `docDefinition` 和 `runtimeConfig`。 |\n| `getPreviewUrl()` | `Promise` | 生成当前工程的 PDF 预览地址。 |\n| `getPdfBlob()` | `Promise` | 生成当前工程的 PDF Blob。 |\n\n### 外层页面调用示例\n\n```vue\n\n\n\n```\n\n## PDF 工具函数\n\n`ui_dj/doPdf` 同时导出了一组工具函数，适合不渲染编辑器组件、只基于 Schema 生成 PDF 的场景。\n\n### 常用导出\n\n```ts\nimport {\n createPdfBlob,\n createPdfBlobUrl,\n createUrlFontMap,\n downloadPdf,\n openPdf,\n printPdf,\n compileSchemaToPdf,\n createPdfBlobFromSchema,\n createPreviewUrlFromSchema,\n createPdfBlobFromSchemaAndData,\n createPreviewUrlFromSchemaAndData,\n} from 'ui_dj/doPdf'\n```\n\n### 使用 Schema 和模板数据生成预览\n\n```ts\nimport { createPreviewUrlFromSchemaAndData } from 'ui_dj/doPdf'\n\nconst schema = editorRef.value?.getSchema()\nconst runtimeConfig = editorRef.value?.getRuntimeConfig()\n\nif (!schema) return\n\nconst templateData = {\n user: {\n name: '张三',\n phone: '13800000000',\n },\n table: [\n { name: '苹果', count: '2箱' },\n { name: '香蕉', count: '3箱' },\n ],\n}\n\nconst previewUrl = await createPreviewUrlFromSchemaAndData(schema, templateData, {\n fontConfig: runtimeConfig?.fonts,\n})\n```\n\n然后可以把 `previewUrl` 挂载到 `iframe`：\n\n```vue\n\n```\n\n> 使用 `URL.createObjectURL` 生成的地址，在不再使用时建议调用 `URL.revokeObjectURL(previewUrl)` 释放资源。\n\n## 模板语法\n\nPDF 编辑器支持在文本、列表、表格等内容中使用模板变量。变量会根据传入的模板数据进行解析。\n\n### 基础字段\n\n```text\n{{user.name}}\n{{user.phone}}\n```\n\n对应数据：\n\n```ts\nconst templateData = {\n user: {\n name: '张三',\n phone: '13800000000',\n },\n}\n```\n\n### 数组数据\n\n表格或列表中可以使用数组数据，例如：\n\n```ts\nconst templateData = {\n table: [\n { name: '苹果', count: '2箱' },\n { name: '香蕉', count: '3箱' },\n { name: '橙子', count: '1箱' },\n ],\n}\n```\n\n在表格节点中可通过对应字段映射生成多行内容。\n\n> 数组模板建议保持单一数据源：列表项和表格模板行更适合绑定一个数组数据源，复杂嵌套数组建议在业务侧先整理成适合渲染的数据结构。\n\n## 类型导出\n\n`ui_dj/doPdf` 导出以下常用类型：\n\n```ts\nimport type {\n EditorSchema,\n EditorBlock,\n PdfFontMap,\n PdfRuntimeConfig,\n PdfmakeEditorProps,\n PdfmakeEditorExposed,\n CompiledResult,\n SchemaPdfBuildOptions,\n SchemaTemplateBuildOptions,\n HeaderFooterVisualConfig,\n HeaderFooterPosition,\n TemplateToken,\n TemplateArrayContext,\n TemplateScanResult,\n} from 'ui_dj/doPdf'\n```\n\n## 本地开发\n\n### 安装依赖\n\n```bash\npnpm install\n```\n\n### 启动开发服务\n\n```bash\npnpm dev\n```\n\n开发服务默认端口为 `5133`。\n\n### 构建\n\n```bash\npnpm build\n```\n\n构建产物输出到 `lib` 目录，入口包括：\n\n| 入口 | 说明 |\n| --- | --- |\n| `lib/index.mjs` | 主组件库入口。 |\n| `lib/doPdf.mjs` | PDF 编辑器和 PDF 工具函数入口。 |\n| `lib/ui_dj.css` | 当前构建样式文件。 |\n| `lib/index.d.ts` | 主入口类型声明。 |\n| `lib/doPdf.d.ts` | `package.json` 声明的 PDF 入口类型文件；如果当前构建产物未生成该文件，请以实际 `lib/doPdf/**` 类型产物为准。 |\n\n### 本地发布调试\n\n```bash\npnpm lcalPub\n```\n\n该命令会执行构建并通过 `yalc push` 推送到本地 yalc 仓库。\n\n### 正式发布\n\n```bash\npnpm proPub\n```\n\n该命令会构建、更新 patch 版本号并执行 `npm publish`。\n\n## 常见问题\n\n### 为什么 SVG 图标不显示？\n\n`DjSvg` 只负责渲染：\n\n```html\n\n```\n\n宿主项目需要自行加载 SVG symbol，例如通过 iconfont、svg-sprite 或其他构建插件注入。\n\n### 为什么图标颜色没有生效？\n\n默认颜色来自 `color` 属性，并传给 `` 的 `fill`。如果外层样式优先级更高，可能需要使用：\n\n```scss\n:deep(.c-icon use) {\n fill: #1677ff;\n}\n```\n\n### 为什么 PDF 中文显示异常？\n\npdfmake 默认字体可能不包含中文字符。请通过 `fontUrl + fontFileName + fontFamily` 或 `fontConfig` 配置支持中文的字体。\n\n### 当前版本还有旧打印功能吗？\n\n当前新版本已经移除早期独立打印功能，主要保留 PDF 编辑和生成能力。如果项目仍需要早期打印功能，请安装对应的历史旧版本。\n\n## 兼容说明\n\n- 当前库面向 Vue 3 项目。\n- PDF 能力依赖 `pdfmake`。\n- 部分工具能力依赖 `tools_dj`。\n- 样式优先使用 UnoCSS，宿主项目一般只需要引入构建后的样式文件。\n","readmeFilename":"README.md"}