html2canvas.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <template>
  2. <view>
  3. <view class="p-2 mb-1 bg-white border">
  4. <view v-if="printerList.length===1">(当前只有一个打印机)</view>
  5. <view class="flex align-center form-item-input">
  6. <view class="flex-shrink">选择打印机:</view>
  7. <view class="flex-1">
  8. <picker mode="selector" :value="printerIndex" :range="printerList" @change="onPrinterChange"
  9. class="height-100">
  10. <view class="uni-input">{{printerList[printerIndex]}}</view>
  11. </picker>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="flex align-center">
  16. <button type="primary" class="mx-auto my-1 span-10" @tap="onGet" v-if='showConnectBtn'>连接打印机</button>
  17. <button type="primary" :disabled="disabledPrint" class="mx-auto my-1 span-10" @tap="onPrint" v-if='showPrintBtn'>打印</button>
  18. <view class="text-center">
  19. <view class="d-inline-block p-1 ml-sm" @tap="onTogglePrintBtn(false)" v-if="showPrintBtn">隐藏打印按钮</view>
  20. </view>
  21. </view>
  22. <view type="primary" :prop="renderObj" :change:prop="canvas.create" id="canvas"></view>
  23. <!-- <view class="border-red bg-primary p-3">
  24. <view v-for="(item,index) in picdataArr">
  25. image-{{index}}:
  26. <img :src="item" alt=""/>
  27. </view>
  28. </view> -->
  29. <template v-if="type==='产成品'">
  30. <view v-for="(item,index) in infoList" :id="'finishLabel'+index">
  31. <finish-good :item="item" :index="index" @picLoad="onPicload"></finish-good>
  32. </view>
  33. </template>
  34. <template v-else-if="type==='采购件'">
  35. <view v-for="(item,index) in infoList" :id="'buyLabel'+index">
  36. <buy-good :item="item" :index="index" @picLoad="onPicload"></buy-good>
  37. </view>
  38. </template>
  39. </view>
  40. </template>
  41. <script>
  42. import finishGood from "@/components/label-print/finish-good.vue"
  43. import buyGood from "@/components/label-print/buy-good.vue"
  44. import {
  45. LABEL_WIDTH,
  46. LABEL_HEIGHT
  47. } from "@/common/utils/tipMessage.js"
  48. import api from '@/common/utils/lpapi-uniplugin.js';
  49. const modal = uni.requireNativePlugin('modal');
  50. export default {
  51. components: {
  52. finishGood,
  53. buyGood
  54. },
  55. data() {
  56. return {
  57. type: "", // 物品类型
  58. infoList: [], // 接口请求的物品信息
  59. loadedList:[], // 已经加载的图片
  60. picdataArr: [], // 存储base64 图片数据
  61. // 打印及页面的数据
  62. printerList: [],
  63. printerIndex: 0,
  64. connectPrinter:false, // 是否连接打印机
  65. disabledPrint:true, // 禁止点击打印
  66. renderObj:{
  67. type:"",
  68. list:[],
  69. },
  70. showPrintBtn:false, //显示打印按钮
  71. showConnectBtn:false, // 显示连接按钮
  72. }
  73. },
  74. computed:{
  75. printerName () {
  76. return this.printerList.length>0 ? this.printerList[this.printerIndex] : null
  77. }
  78. },
  79. watch:{
  80. },
  81. onLoad(e) {
  82. console.log("onLoad")
  83. this.type = e.type
  84. this.infoList=e.list ? JSON.parse(e.list) :[]
  85. this.renderObj.type=this.type
  86. },
  87. onShow () {
  88. console.log("onShow")
  89. this.initPage()
  90. },
  91. onUnload() {
  92. this.closePrinter()
  93. },
  94. onHide () {
  95. },
  96. methods: {
  97. // ceshi
  98. demo () {
  99. for (let i = 0; i < 1; i++) {
  100. this.infoList.push({
  101. "GG": "0.8*6.2*17*9.5",
  102. "SWRQ": null,
  103. "QTY": i,
  104. "WPMC": "第三遍测试"+i,
  105. "GYLCKH": null,
  106. "WPTM": "http://192.168.0.188:8180/samex/rest/webclientrest/queryBarCode?picname=2101000130001750.0",
  107. "WPH": "101000130"
  108. })
  109. }
  110. this.type="产成品"
  111. this.renderObj.type=this.type
  112. },
  113. // 初始化页面,超过30秒自动关闭loading层
  114. async initPage() {
  115. const list = await this.onGet(); // 获取打印机
  116. if (list.length===0) {
  117. this.showConnectBtn=true
  118. uni.showToast({
  119. title:"未检测到打印机",
  120. icon:"none"
  121. })
  122. return false
  123. }
  124. // 自动连接打印机
  125. const res=await this.openPrinter()
  126. return res
  127. },
  128. // 获取打印机
  129. async onGet(){
  130. this.printerList.splice(0);
  131. uni.showLoading({
  132. title:"正在搜索打印机..."
  133. })
  134. const list = await api.getPrinters(); // 获取打印机
  135. uni.hideLoading()
  136. if (list.length===0) {
  137. uni.showToast({
  138. title:"未检测到打印机",
  139. icon:"none"
  140. })
  141. }else{
  142. this.showConnectBtn=false
  143. for (let item of list) {
  144. this.printerList.push(item.name);
  145. }
  146. }
  147. return this.printerList
  148. },
  149. // 连接打印机
  150. async openPrinter() {
  151. uni.showLoading({
  152. title:"正在连接打印机..."
  153. })
  154. const res=await api.openPrinter(this.printerName, (value) => {
  155. uni.hideLoading()
  156. if (value) {
  157. this.connectPrinter=true
  158. uni.showToast({
  159. title: '打印机连接成功'
  160. });
  161. }else{
  162. uni.showToast({
  163. title: '打印机连接失败,请检测打印机是否打开',
  164. icon:"none"
  165. });
  166. this.connectPrinter=false
  167. }
  168. Promise.resolve(res)
  169. });
  170. return res
  171. },
  172. // 隐藏打印按钮
  173. onTogglePrintBtn(visible){
  174. this.showPrintBtn=visible
  175. },
  176. // 选择打印机
  177. onPrinterChange(e) {
  178. this.printerIndex =e.target.value
  179. // 切换打印机后,再连接打印机
  180. this.openPrinter()
  181. this.onTogglePrintBtn(true)
  182. },
  183. // 断开打印机连接
  184. closePrinter() {
  185. api.closePrinter();
  186. },
  187. // 结束打印任务
  188. async endJob() {
  189. const res = await api.endJob()
  190. },
  191. //打印图片,自动打印和for循环不一样
  192. async printImage(data,isawait=false) {
  193. const width = 70;
  194. const height = 60;
  195. const isPrinterOpened=await api.isPrinterOpened();
  196. console.log("isPrinterOpened",isPrinterOpened)
  197. const printFn=async ()=>{
  198. uni.showLoading({
  199. title:"正在打印标签"
  200. })
  201. await api.startJob({
  202. width,
  203. height
  204. });
  205. await api.drawImage({
  206. image: data,
  207. width: width,
  208. height: height,
  209. });
  210. await api.commitJob();
  211. uni.hideLoading()
  212. }
  213. // 打印机已经打开
  214. if (isPrinterOpened) {
  215. // const res=await this.initPage();
  216. // console.log("打印机已打开",res)
  217. if (isawait) {
  218. await printFn()
  219. }else{
  220. printFn()
  221. }
  222. }else{
  223. const res=await this.initPage();
  224. console.log("打印机未打开",res)
  225. if (res) {
  226. if (isawait) {
  227. await printFn()
  228. }else{
  229. printFn()
  230. }
  231. }else{
  232. unis.showToast({
  233. title:"出现未知错误,请重新连接打印机",
  234. icon:"none"
  235. })
  236. }
  237. }
  238. return true
  239. },
  240. // 监听图片已经加载,加载完毕,关闭loading层
  241. onPicload({index}) {
  242. const item = this.infoList[index]
  243. this.loadedList.push(item)
  244. if (this.loadedList.length===this.infoList.length) {
  245. this.renderObj.list=this.infoList
  246. }
  247. },
  248. /*获取renderjs 传递过来的img数据(格式是base64)
  249. 如果获取到的数据长度===我们请求的数据长度,则关闭loading层
  250. */
  251. async getRenderPicdata(e) {
  252. const data = e.data
  253. const index = e.index
  254. await this.printImage(data)
  255. this.picdataArr.push(data)
  256. console.log("getRenderPicdata",this.picdataArr.length)
  257. if (this.picdataArr.length===this.infoList.length) {
  258. this.disabledPrint=false
  259. }else{
  260. this.disabledPrint=true
  261. }
  262. },
  263. async onPrint () {
  264. const arr=this.picdataArr
  265. for (let i=0;i<arr.length;i++) {
  266. await this.printImage(arr[i],true)
  267. }
  268. },
  269. }
  270. }
  271. </script>
  272. <script module="canvas" lang="renderjs">
  273. export default {
  274. data() {
  275. return {
  276. type:""
  277. }
  278. },
  279. mounted() {
  280. console.log("html2canvas:mounted")
  281. const script = document.createElement('script')
  282. script.src = 'static/html2canvas.min.js'
  283. script.onload = this.initCanvas.bind(this)
  284. document.head.appendChild(script)
  285. },
  286. methods: {
  287. async initCanvas() {
  288. }, // 将普通script 的数据传递到renderjs里面
  289. async create(newVal,oldVal,ownerInstance,instance) {
  290. const type=newVal.type
  291. const list=newVal.list
  292. const idname=type==="产成品" ? 'finishLabel' : 'buyLabel'
  293. // 采购件
  294. for (let i=0;i<list.length;i++) {
  295. const dom = document.getElementById(idname+i)
  296. const res=await html2canvas(dom, {useCORS: true,allowTaint: false})
  297. if (res.nodeName.toLowerCase() === 'canvas') {
  298. const data = res.toDataURL("image/png")
  299. //将数据传递给普通script
  300. ownerInstance.callMethod("getRenderPicdata", {
  301. data: data,
  302. index:i,
  303. })
  304. }else{
  305. uni.shoToast({
  306. title:`html2canvas_err:转换图片失败`
  307. })
  308. }
  309. }
  310. },
  311. // 点击打印按钮,将表格转成图片,且发送给普通script
  312. // async onPrintrender(event, ownerInstance) {
  313. // console.log("onPrint",this.loadedList)
  314. // const len=this.loadedList.length
  315. // const idname=this.type==="产成品" ? 'finishLabel' : 'buyLabel'
  316. // for (let i=0;i<len;i++) {
  317. // const dom = document.getElementById(idname + i)
  318. // html2canvas(dom, {
  319. // useCORS: true,
  320. // allowTaint: false
  321. // })
  322. // .then(canvas => {
  323. // const data = canvas.toDataURL("image/png")
  324. // //将数据传递给普通script
  325. // ownerInstance.callMethod("getRenderPicdata", {
  326. // data: data
  327. // })
  328. // })
  329. // .catch(err => {
  330. // uni.shoToast({
  331. // title:`html2canvas_err:转换图片失败:${err}`
  332. // })
  333. // })
  334. // }
  335. // },
  336. }
  337. }
  338. </script>
  339. <style>
  340. </style>