Vue2 中使用C-Lodop打印控件时无法调整二维码大小问题

简介: Vue2 中使用C-Lodop打印控件时无法调整二维码大小问题,打印模板里配置的二维码是偏小的,但是在页面使用打印的时候打印预览的二维码不是预期大小

问题描述:
   打印模板里配置的二维码是偏小的,但是在页面使用打印的时候打印预览的二维码不是预期大小,如图:
5366a9c0cd4d4421ae7ee376cf82b28f.png
6378f426c7854a318051cbe17937ab2d.png
原因:
配置二维码的时候上下左右(图中箭头)会有一部分区域,打印时的二维码会根据图中虚线的范围作为二维码的宽高,因此会导致二维码的大小不能达到预期。
4f6dc2d60d0d4f479dcaed49a0ee307c.png
4f6dc2d60d0d4f479dcaed49a0ee307c.png
解决办法:
用模板的 width 和 height 来判断当前的阴影部分,若 width > height,那么就将 height作为二维码的宽高,左边的偏移量为 ( width - height ) / 2。若 width < height,那么将 width 作为二维码的宽高。(备注:左边偏移量不设置会导致二维码的位置不对)
代码如下:



let size = null;
let left = null;
if (item.options.width > item.options.height) {
     size = item.options.height;
     left = (item.options.width - item.options.height) / 2;
   } else {
     size = item.options.width;
   }
LODOP.ADD_PRINT_IMAGE(
    item.options.top * 1.35,
    (item.options.left + left) * 1.4,
    size * 1.45,
    size * 1.45,
    `<img border='0' src='${imageUrl}' width='100%' />`

});
相关文章
|
5月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
107 1
|
6月前
|
JavaScript
如何实现vue点击按钮进行图片浏览 ?
如何实现vue点击按钮进行图片浏览 ?
|
JavaScript
vue + element-ui + vue-clipboard2 实现文字复制粘贴功能与提示
1、在所在项目下安装插件 ```js npm install vue-clipboard2 --save ``` 2、在所在项目的index.js注入vue-clipboard2 ```js import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) ``` 3、使用 ```html <div> <el-button size="mini" type="primary" icon="el-icon-copy-document" round class="copy-btn" v-clipboard:copy="要
194 2
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
7月前
uniapp点击tabbar之前做判断
uniapp点击tabbar之前做判断
421 1
|
7月前
|
JavaScript
适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗
适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
63 0
[Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖。
点击图片进行预览,但是还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行,那么该如何解决呢?
|
JavaScript 定位技术
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
1023 0
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
|
JavaScript
jQuery——手风琴完美实现效果(不会出现重复点击动画还没加载完成)
手风琴完美实现效果(不会出现重复点击动画还没加载完成)
108 0