VUE使用vue |
您所在的位置：网站首页 › 二维码图片怎么打印出来 › VUE使用vue |
VUE使用vue
|
vue做了一个打印功能，也遇到过一些问题，记录一下,有些问题欢迎大家批评指正。 从网上找了一些打印方式最终决定用这种方式： 安装 npm install vue-print-nb --save然后在main.js中引入 import Print from 'vue-print-nb' Vue.use(Print);在vue文件中的使用 打印的内容 打印这样就能打印了，有预览，但火狐52版本不行，谷歌可以。 当然，正常项目实践中不会想象的那么简单。。。。。。 要展示的内容也是自己要打印的内容，在点击预览时，放到$(’#print’)的div里。 于是我走后台方法把要展示的内容给补上，因为列表的打印牵扯的问题是不知道几条数据，所以直接在js拼代码，大体代码如下： 预览点击的方法() { //置空内容 $('#print').html(""); const self = this; const val = self.tableDataChecked; // 如果选中数据存在 if (val.length > 0) { let ids = []; //获取选中数据的id集 val.forEach((item) => { ids.push(item.invoiceId); }); var tableId = { ids: ids.join(',') }; //展示预览弹窗前先去查数据返回来 jsName['getPrintData'](tableId).then(res => { if(res.code=="0"){ $('#print').html(""); var data = res.data; var str=""; //循环查询的数据，需要勾画出页面样式 for(var j=0;j str += "" + tableData[i].index + "" + tableData[i].字段1+"" + tableData[i].字段2+"" + tableData[i].字段3+"" + tableData[i].字段4+"" + tableData[i].字段5+"" + tableData[i].字段6+ "" + tableData[i].字段7+ "" + tableData[i].字段8+"" + tableData[i].字段9+ ""; } str+=""; str+="供需方基本信息"; str+="生产单位"+data[j].supplierName+"需方单位"+data[j].department+"发货人"+data[j].consignor+""; str+="生产方联系电话"+data[j].supplierPhone+"需方联系电话"+data[j].purchaserPhone+"发货人联系电话"+data[j].consignorPhone+""; str+="生产方联系人"+data[j].supplierContact+"需方联系人"+data[j].purchaser+"发货地址"+data[j].CompanyAddress+""; //下面是二维码图片 str+=""; } $('#print').append(str); //二维码加载(调用的方法在下方可以借鉴) self.qrOnload(data,0) }else{ self.$message.error('表格数据请求异常'); } }); //弹窗展示 self.Show = !self.Show; }else{ self.$message.warning('请至少选择一条数据'); } },其中这个是分页，也算一个小难点。 另外我二维码图片的地方给赋了id，并没有去赋图片路径，因为遇到了个问题，图片去打印时打印不出来，怎么解决呢，我就把图片转成base64格式，代码： qrOnload: function (data, num) { //二维码 const self = this; // var base64=""; let img = data[num].src; var image = new Image(); image.src = img; image.onload = function () { var base64 = self.getBase64Image(image); $('#id'+num).html("这样就可以了。 但是样式有些问题，例如：页眉页脚会默认带着，还有两边的边距等问题，解决办法，代码如下： 我给弹窗里的打印按钮添加点击事件，上面弹窗的代码里有： print(){ var style = document.createElement('style'); style.innerHTML = "@page{size: landscape;margin: 5mm;}" + " html{background-color: #FFFFFF; margin: 0;}" + " body{border: solid 0px #FFFFFF;}"; window.document.head.appendChild(style); },这样两边边距过大，存在页眉页脚的问题就解决了。但是我又遇到一个问题，至今还没有解决，因为我提到过多次的火狐52版本，在最新的火狐，谷歌都没有问题，火狐52版本里，我弹窗里的打印按钮得点击多次才会出现下面的弹窗，我想点一下就出来，或者不出来，直接出来打印的弹窗 |
这是模糊之后的模板图，e…mm 根据要求，我在项目中点击我绘制的按钮，弹窗显示要打印的内容，因为使用火狐52版本浏览器，没有预览，自己就绘制了预览弹窗，然后点击打印，执行打印操作。 
弹窗里加div,代码：
这个弹窗点取消或者关闭，才会出来打印 
如果有大佬能看到我的问题，劳请帮助下，万分感激。 @火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐52@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐@火狐【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |