Vue3+TypeScript安装及使用vue-plugin-hiprint

https://github.com/CcSimple/vue-plugin-hiprint

1、安装

npm install vue-plugin-hiprint

2、手动声明类型

在 src 或 src/types（项目结构有这个 types 目录）目录下，新建 vue-plugin-hiprint.d.ts

declare module "vue-plugin-hiprint" { // 1. 默认导出（在 main.ts 中通过 app.use 使用的对象） const hiprint: { init: (config?: InitConfig) => void; setConfig: (config: PrintConfig) => void; PrintTemplate: typeof PrintTemplate; PrintDesigner: typeof PrintDesigner; parse: (templateJson: string) => any; // 根据模板JSON生成可打印对象 // 其他你可能会用到的顶层API可以继续添加 }; export default hiprint; // 2. 初始化配置类型 interface InitConfig { providers?: any[]; optionItems?: any[]; fontList?: string[]; // 可根据实际需要补充 } // 3. 打印配置类型（对应 hiprint.setConfig） interface PrintConfig { language?: string; printing?: boolean; dpi?: number; preview?: boolean; paper?: PaperConfig; font?: FontConfig; } interface PaperConfig { size?: string; // 如 'A4' width?: number; height?: number; margin?: MarginConfig; } interface MarginConfig { top?: number | string; right?: number | string; bottom?: number | string; left?: number | string; } interface FontConfig { family?: string; size?: number; } // 4. 打印模板类（对应 new hiprint.PrintTemplate()） declare class PrintTemplate { constructor(options?: any); getJson(): string; // 获取模板JSON print(data: any, options?: PrintOptions): void; // 执行打印 print2(container: HTMLElement, data: any, options?: PrintOptions): void; // 在指定容器内预览 updateOption(key: string, value: any): void; addPanel(panel: PanelOption): void; // 根据实际API文档补充更多方法 } interface PrintOptions { title?: string; styleHandler?: () => string; callback?: () => void; } interface PanelOption { index: number; height: number | string; width?: number | string; elements: ElementOption[]; } interface ElementOption { type: string; // 'text', 'table', 'image', 'rect', 'html' 等 title?: string; field?: string; // 数据绑定字段 options: ElementStyleOptions; } interface ElementStyleOptions { width: number | string; height: number | string; left?: number; top?: number; fontSize?: number; fontWeight?: string; textAlign?: "left" | "center" | "right"; color?: string; borderWidth?: number; borderColor?: string; borderStyle?: string; // 更多样式选项... } // 5. 设计器类（对应 new hiprint.PrintDesigner()） declare class PrintDesigner { constructor(options: DesignerOptions); destroy(): void; addElement(element: ElementOption): void; // 根据实际API文档补充更多方法 } interface DesignerOptions { el: string; // 如 '#designer' template?: any; // 模板JSON对象 onCreated?: (template: any) => void; onUpdated?: (template: any) => void; } }

需确保 tsconfig.json 或 tsconfig.app.json 的 include 的设置为：

"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],

tsconfig.json

{ "files": [], "references": [ { "path": "./tsconfig.node.json" }, { "path": "./tsconfig.app.json" }, ], "compilerOptions": { // 全局引入element-plus，如果使用 Volar，在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型 "types": ["element-plus/global"], "paths": { "@/*": ["./src/*"], "@api/*": ["./src/api/*"], "@components/*": ["./src/components/*"], "@assets/*": ["./src/assets/*"], "@hooks/*": ["./src/hooks/*"], "@router/*": ["./src/router/*"], "@stores/*": ["./src/stores/*"], "@types/*": ["./src/types/*"], "@utils/*": ["./src/utils/*"], "@views/*": ["./src/views/*"], "@api": ["./src/api/index"], // 关键：添加index文件索引 "@components": ["./src/components/index"], // 关键：添加index文件索引 "@hooks": ["./src/hooks/index"], // 关键：添加index文件索引 "@router": ["./src/router/index"], // 关键：添加index文件索引 "@stores": ["./src/stores/index"], // 关键：添加index文件索引 "@types": ["./src/types/index"], // 关键：添加index文件索引 "@utils": ["./src/utils/index"], // 关键：添加index文件索引 } } }

tsconfig.app.json

{ "extends": "@vue/tsconfig/tsconfig.dom.json", "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { "composite": true, "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "baseUrl": ".", "paths": { "@/*": ["./src/*"], "@api/*": ["./src/api/*"], "@components/*": ["./src/components/*"], "@assets/*": ["./src/assets/*"], "@hooks/*": ["./src/hooks/*"], "@router/*": ["./src/router/*"], "@stores/*": ["./src/stores/*"], "@types/*": ["./src/types/*"], "@utils/*": ["./src/utils/*"], "@views/*": ["./src/views/*"], "@api": ["./src/api/index"], // 关键：添加index文件索引 "@components": ["./src/components/index"], // 关键：添加index文件索引 "@hooks": ["./src/hooks/index"], // 关键：添加index文件索引 "@router": ["./src/router/index"], // 关键：添加index文件索引 "@stores": ["./src/stores/index"], // 关键：添加index文件索引 "@types": ["./src/types/index"], // 关键：添加index文件索引 "@utils": ["./src/utils/index"], // 关键：添加index文件索引 } } }

tsconfig.json是Vite项目使用的“Project References”配置，主要的编译配置分散在tsconfig.app.json和tsconfig.node.json中。

如果include字段已经包含类似"src/**/*.ts"或"src/**/*"，那通常已经足够。

否则：

修改tsconfig.app.json中的"include"字段，确保它覆盖src/types目录。通常默认配置已经包含，但请检查确认：

json

{ "compilerOptions": { // ... 其他编译器选项 }, // 确保 include 包含以下模式 "include": [ "src/**/*.ts", "src/**/*.d.ts", // 包含所有 .d.ts 文件 "src/**/*.vue" ] }

3、导入

import hiprint from "vue-plugin-hiprint";

<!--【必须】在index.html 文件中添加打印所需样式(cdn可能不稳定):--> <link rel="stylesheet" type="text/css" media="print" href="https://npmmirror.com/package/vue-plugin-hiprint/files/dist/print-lock.css" /> <!-- OR --> <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css" /> <!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】--> <link rel="stylesheet" type="text/css" media="print" href="/print-lock.css" />