富茂A端打印模板内嵌编辑器
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

pirms 6 mēnešiem
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. # kr-print-designer
  2. ## 简介
  3. 一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。[示例](https://myliuxia.github.io/demo/kr-print-designer/index.html)
  4. ## 安装
  5. Vue 项目中引用该组件
  6. ```
  7. npm install kr-print-designer
  8. ```
  9. 打印功能基于 C-Lodop 打印控件,需前往[下载](http://www.lodop.net/download.html)
  10. ## 引入
  11. main.js
  12. ```javascript
  13. import Vue from "vue";
  14. import KrPrintDesigner from "kr-print-designer";
  15. import "kr-print-designer/lib/kr-print-designer.css";
  16. Vue.use(KrPrintDesigner);
  17. ```
  18. demo.vue
  19. ```html
  20. <template>
  21. <div id="app">
  22. <kr-print-designer
  23. :temp-value="value"
  24. :widget-options="widgets"
  25. :lodop-license="licenseInfo"
  26. @save="handleSave"
  27. />
  28. </div>
  29. </template>
  30. ```
  31. lodop 打印/预览及设置 lodop 注册信息方法使用
  32. ```javascript
  33. // 直接打印
  34. this.$lodop.print(temp, data);
  35. // 预览打印内容
  36. this.$lodop.preview(temp, data);
  37. // 预览打印模板
  38. this.$lodop.previewTemp(temp);
  39. // 设置Lodop产品注册信息
  40. this.$lodop.setLicenses(licenseInfo);
  41. ```
  42. ## Attributes
  43. | 参数 | 说明 | 类型 | 默认值 |
  44. | ------------- | ---------------- | ------ | ------ |
  45. | tempValue | 模板对象 | Object | ; |
  46. | widgetOptions | 模板设计选项配置 | Array | [] |
  47. ### tempValue 参数详解
  48. #### 参数示例:
  49. ```javascript
  50. {
  51. title: 'demo',
  52. width: 750,
  53. height: 550,
  54. pageWidth: 750,
  55. pageHeight: 550,
  56. tempItems: [],
  57. }
  58. ```
  59. #### 参数说明:
  60. tempValue 为打印模板对象, 对象中参数具体解析如下:
  61. ##### tempValue:
  62. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  63. | ---------- | ------------------ | ------ | ------ | ------ |
  64. | title | 模板名称 | String | —— | —— |
  65. | width | 模板宽度 | Number | —— | 750 |
  66. | height | 模板高度 | Number | —— | 550 |
  67. | pageWidth | 模板纸张宽度(mm) | Number | —— | 750 |
  68. | pageHeight | 模板纸张高度(mm) | Number | —— | 550 |
  69. | tempItems | 模板打印项内容 | Array | —— | [] |
  70. ### widgetOptions 参数详解
  71. #### 参数示例:
  72. ```javascript
  73. [
  74. {
  75. type: "braid-txt",
  76. isEdit: true,
  77. title: "自定义文本",
  78. value: "自定义文本",
  79. defaultValue: "自定义文本"
  80. },
  81. {
  82. type: "braid-txt",
  83. isEdit: false,
  84. title: "公司名称",
  85. value: "{公司名称}",
  86. defaultValue: "九州科瑞",
  87. name: "companyName"
  88. },
  89. {
  90. type: "bar-code",
  91. title: "订单编号(条码)",
  92. value: "{orderNumber}",
  93. defaultValue: "1234567890",
  94. name: "orderNumber"
  95. lodopStyle: { QRCodeVersion: '1', QRCodeErrorLevel: 'L' },
  96. },
  97. {
  98. type: "braid-html",
  99. title: "分页",
  100. value: "{第##页/共##页}",
  101. defaultValue:
  102. "<font ><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>"
  103. },
  104. {
  105. type: "braid-image",
  106. title: "logo",
  107. value: "http://192.168.7.229/syy/file/files/view/5f9fb42dabebb4049ffbd019"
  108. },
  109. {
  110. type: "braid-table",
  111. title: "商品明细",
  112. name: "details",
  113. value: "{details}",
  114. defaultValue: [
  115. {
  116. productName: "苹果ipone11pro",
  117. skuName: "iphone11pro256g",
  118. specModel: "165L",
  119. quantity: 3,
  120. price: "12.00"
  121. },
  122. {
  123. productName: "苹果ipone11pro",
  124. skuName: "iphone11pro124g",
  125. specModel: "165L",
  126. quantity: 3,
  127. price: "12.00"
  128. }
  129. ],
  130. columnsAttr: [
  131. {
  132. title: "产品名称",
  133. value: "{产品名称}",
  134. name: "productName"
  135. },
  136. {
  137. title: "sku名称",
  138. value: "{sku名称}",
  139. name: "skuName"
  140. },
  141. {
  142. title: "规格型号",
  143. value: "{规格型号}",
  144. name: "specModel"
  145. },
  146. {
  147. title: "数量",
  148. value: "{数量}",
  149. name: "quantity"
  150. },
  151. {
  152. title: "单价",
  153. value: "{单价}",
  154. name: "price"
  155. }
  156. ]
  157. }
  158. ];
  159. ```
  160. #### 参数说明:
  161. widgetOptions 为设计打印模板的打印项配置, 打印项有多种类型,各种打印项参数具体解析如下:
  162. #### braid-txt
  163. ##### Attributes:
  164. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  165. | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ |
  166. | type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
  167. | isEdit | 是否可编辑 | Boolean | true / false | —— |
  168. | dragable | 是否可拖拽 | Boolean | true / false | true |
  169. | resizable | 尺寸是否可变 | Boolean | true / false | true |
  170. | width | 打印项宽度(px) | Number | —— | 120 |
  171. | height | 打印项高度(px) | Number | —— | 60 |
  172. | left | 左偏移量(px) | Number | —— | 50 |
  173. | top | 上偏移量(px) | Number | —— | 0 |
  174. | title | 打印项名称 | String | —— | —— |
  175. | value | 打印项内容 | String | —— | —— |
  176. | defaultValue | 打印项默认内容 | String | —— | —— |
  177. | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
  178. | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
  179. | style | 打印项样式 | Object | —— | {} |
  180. ##### Style:
  181. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  182. | --------- | ------------------ | ------- | -------------------------------------------------------------- | --------- |
  183. | zIndex | 层级 | Number | —— | 0 |
  184. | FontSize | 字体大小(pt) | Number | —— | 9 |
  185. | FontColor | 字体颜色 | String | —— | "#000000" |
  186. | Bold | 字体是否加粗 | Boolean | true / false(是 / 否) | false |
  187. | Italic | 字体是否设置斜体 | Boolean | true / false(是 / 否) | false |
  188. | Underline | 字体是否设置下划线 | Boolean | true / false(是 / 否) | false |
  189. | Alignment | 文字对齐方式 | String | "left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) | left |
  190. | ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |
  191. #### braid-image
  192. ##### Attributes:
  193. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  194. | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ |
  195. | type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
  196. | isEdit | 是否可编辑 | Boolean | true / false | false |
  197. | dragable | 是否可拖拽 | Boolean | true / false | true |
  198. | resizable | 尺寸是否可变 | Boolean | true / false | true |
  199. | width | 打印项宽度(px) | Number | —— | 120 |
  200. | height | 打印项高度(px) | Number | —— | 60 |
  201. | left | 左偏移量(px) | Number | —— | 50 |
  202. | top | 上偏移量(px) | Number | —— | 0 |
  203. | title | 打印项名称 | String | —— | —— |
  204. | value | 图片路劲 | String | —— | —— |
  205. | defaultValue | 图片默认路劲 | String | —— | —— |
  206. | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
  207. | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
  208. | style | 打印项样式 | Object | —— | {} |
  209. ##### Style:
  210. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  211. | -------- | ---------- | ------ | -------------------------------------------------------------- | ------ |
  212. | zIndex | 层级 | Number | —— | 0 |
  213. | ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |
  214. #### braid-html
  215. ##### Attributes:
  216. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  217. | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ---------------- |
  218. | type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
  219. | isEdit | 是否可编辑 | Boolean | true / false | false |
  220. | dragable | 是否可拖拽 | Boolean | true / false | true |
  221. | resizable | 尺寸是否可变 | Boolean | true / false | true |
  222. | width | 打印项宽度(px) | Number | —— | 120 |
  223. | height | 打印项高度(px) | Number | —— | 60 |
  224. | left | 左偏移量(px) | Number | —— | 50 |
  225. | top | 上偏移量(px) | Number | —— | 0 |
  226. | title | 打印项名称 | String | —— | "html" |
  227. | value | html 内容 | String | —— | "<div>html<div>" |
  228. | defaultValue | 默认 html | String | —— | "<div>html<div>" |
  229. | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
  230. | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
  231. | style | 打印项样式 | Object | —— | {} |
  232. ##### Style:
  233. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  234. | ------------ | ---------------------------- | ------- | -------------------------------------------------------------- | ------ |
  235. | zIndex | 层级 | Number | —— | 0 |
  236. | ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |
  237. | AutoHeight | 是否设置自动高度 | Boolean | true / false(是 / 否) | 0 |
  238. | BottomMargin | 打印项距离纸张的下边距(mm) | Number | —— | 0 |
  239. #### braid-html
  240. ##### Attributes:
  241. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  242. | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ |
  243. | type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
  244. | isEdit | 是否可编辑 | Boolean | true / false | false |
  245. | dragable | 是否可拖拽 | Boolean | true / false | true |
  246. | resizable | 尺寸是否可变 | Boolean | true / false | true |
  247. | width | 打印项宽度(px) | Number | —— | 240 |
  248. | height | 打印项高度(px) | Number | —— | 60 |
  249. | left | 左偏移量(px) | Number | —— | 50 |
  250. | top | 上偏移量(px) | Number | —— | 10 |
  251. | title | 打印项名称 | String | —— | "表格" |
  252. | value | 表格数据 | Array | —— | [] |
  253. | defaultValue | 表格默认数据 | Array | —— | [] |
  254. | columnsAttr | 表格可选列配置 | Array | —— | [] |
  255. | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
  256. | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
  257. | style | 打印项样式 | Object | —— | {} |
  258. ##### Style:
  259. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  260. | ------------ | ---------------------------- | ------- | ---------------------------------------------------- | --------- |
  261. | zIndex | 层级 | Number | —— | 0 |
  262. | FontSize | 字体大小(pt) | Number | —— | 9 |
  263. | FontColor | 字体颜色 | String | —— | "#000000" |
  264. | BorderColor | 边框颜色 | String | —— | "#000000" |
  265. | Alignment | 文字对齐方式 | String | "left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) | 1 |
  266. | AutoHeight | 是否设置自动高度 | Boolean | true / false(是 / 否) | 0 |
  267. | BottomMargin | 打印项距离纸张的下边距(mm) | Number | —— | 0 |
  268. ##### columnsAttr:
  269. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  270. | ----- | ------------------------------------------- | ------ | ------ | ------ |
  271. | title | 表格列名称 | String | —— | —— |
  272. | value | 表格列数据 | String | —— | —— |
  273. | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | —— |
  274. #### bar-code
  275. ##### Attributes:
  276. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  277. | ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------------ |
  278. | type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
  279. | isEdit | 是否可编辑 | Boolean | true / false | false |
  280. | dragable | 是否可拖拽 | Boolean | true / false | true |
  281. | resizable | 尺寸是否可变 | Boolean | true / false | true |
  282. | width | 打印项宽度(px) | Number | —— | 120 |
  283. | height | 打印项高度(px) | Number | —— | 60 |
  284. | left | 左偏移量(px) | Number | —— | 50 |
  285. | top | 上偏移量(px) | Number | —— | 0 |
  286. | title | 打印项名称 | String | —— | "条码" |
  287. | value | html 内容 | String | —— | "1234567890" |
  288. | defaultValue | 默认 html | String | —— | "1234567890" |
  289. | name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
  290. | lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
  291. | style | 打印项样式 | Object | —— | {} |
  292. ##### Style:
  293. | 参数 | 说明 | 类型 | 可选值 | 默认值 |
  294. | ----------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
  295. | zIndex | 层级 | Number | —— | 0 |
  296. | FontSize | 字体大小(pt) | Number | —— | false |
  297. | ShowBarText | 是否显示条码值 | Boolean | false / true(不显示 / 显示) | 0 |
  298. | codeType | 条码类型 | Number | '128A' / '128B' / '128C' / '128Auto' / 'EAN8' / 'EAN13' / 'EAN128A' / 'EAN128B' / 'EAN128C' / 'Code39' / '39Extended' / '2_5interleaved' / '2_5industrial' / '2_5matrix' / 'UPC_A' / 'UPC_E0' / 'UPC_E1' / 'UPCsupp2' / 'UPCsupp5' / 'Code93' / '93Extended' / 'MSI' / 'PostNet' / 'Codabar'/ 'QRCode'/ 'PDF417' | "Code39" |
  299. | ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |
  300. ## Events
  301. | 事件名称 | 说明 | 回调参数 |
  302. | -------- | -------------- | ---------------- |
  303. | save | 点击保存时触发 | 设计后的模板对象 |
  304. ## Methods
  305. | 方法名称 | 说明 | 参数 |
  306. | -------- | ------------------ | -------------------------------------------------------- |
  307. | initTemp | 手动初始化模板数据 | Function(tempValue: object, widgetOptions:widgetOptions) |
  308. ## \$lodop 对象 Methods
  309. | 名称 | 说明 | 参数 |
  310. | ----------- | ------------------------------------ | ---------------------------------- |
  311. | print | 对数据和模板解析,实现打印 | Function(temp: object, data:array) |
  312. | preview | 对数据和模板解析,实现打印内容的预览 | Function(temp: object, data:array) |
  313. | previewTemp | 对模板进行预览 | Function(temp: object ) |
  314. | setLicenses | 设置 Lodop 软件产品注册信息 | Function(licenseInfo: object ) |
  315. ### setLicenses 方法详解
  316. #### 回调示例:
  317. ```javascript
  318. let licenseInfo = {
  319. strCompanyName: "某某某公司",
  320. strLicense: "******",
  321. strLicenseA: "",
  322. strLicenseB: ""
  323. };
  324. // 设置Lodop产品注册信息
  325. this.$lodop.setLicenses(licenseInfo);
  326. ```
  327. #### licenseInfo 对象值说明:
  328. licenseInfo 为 Lodop 打印软件产品注册信息, 对象中参数具体解析如下:
  329. | 值 | 说明 | 类型 | 可选值 | 默认值 |
  330. | -------------- | ------------ | ------ | ------ | ------ |
  331. | strCompanyName | 注册单位名称 | String | —— | —— |
  332. | strLicense | 主注册号 | String | —— | —— |
  333. | strLicenseA | 附加注册号 A | String | —— | —— |
  334. | strLicenseB | 附加注册号 B | String | —— | —— |