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

问题描述：

打印模板里配置的二维码是偏小的，但是在页面使用打印的时候打印预览的二维码不是预期大小，如图：

原因：

配置二维码的时候上下左右（图中箭头）会有一部分区域，打印时的二维码会根据图中虚线的范围作为二维码的宽高，因此会导致二维码的大小不能达到预期。

解决办法：

用模板的 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%' />`
);

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

Lodop打印控件在平台中的应用
一.什么是lodop lodop取意自"load or print",是一款优秀的Web打印控件. 在B/S系统中,传统打印控件总是"页面看到什么才能打印什么" ...
uniapp中使用lodop打印控件实现app广域、局域网打印功能，亲测可用
文章目录前言一.本文目的二.使用步骤 1.准备工作 2.引入库文件 3.页面使用总结前言在项目中使用了lodop控件,然而蛋疼的发现这玩意uniapp app端不能直接使用,在vip售后群 ...
lodop打印html内容,Lodop打印控件在页面如何使用
Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件. 客户端本地打印角色(即用户访问网站后用自己链接的打印机进行客户端本地打印),步骤很少,部署简单: ...
关于Lodop打印控件
Vue项目中开发Lodop打印控件操作笔记. 1.进入官网下载控件,然后安装. 1 http://www.lodop.net/ 2.安装包里面有LodopFuncs.js,推荐使用官方js,网上也有很 ...
Lodop打印控件指定打印任务某几页
使用Lodop打印控件进行打印开发,有时候一个任务里有多页,例如各种合同之类的,客户端用户在使用过程中,可能有某一页打印后发现需要修改,这时候不必再把整个任务重新打印一遍,只需要打印需要修改的那页重新 ...
lodop打印控件的使用
web打印解决方案 1.生成打印模版(网页),使用window.print()预览打印模版,在浏览器中打印 2.导出网页为excel文件,详见网页导出为excel 3.使用lodop打印控件第一种方 ...
Lodop打印控件里SET_PRINT_STYLE和SET_PRINT_STYLEA
LODOP.SET_PRINT_STYLE 对该语句后面的打印项样式设置效果. LODOP.SET_PRINT_STYLEA 针对第一个参数设置的打印项样式设置效果. 这两个语句,作用范围不同. 在设 ...
Web打印 Lodop打印控件 bootstrap框架
贴图知乎:显著提升程序员身心健康和工作效率的装备有哪些? 笔记本: 1.银河舰队 PAVILION 15-bc011TX光暗影精灵2 2.顽石 -FL5900U7500超薄i7(性价比最高) ...
php lodop完整案例,Lodop打印控件超文本自动分页
Lodop打印控件打印html超文本,通常传入一个超文本内容可能会超过纸张,如果要拆分每页显示哪些然后手动分页比较麻烦,Lodop中的超文本都有自动分页的特点. 自动分页的依据: 1.超文本超过设置的 ...

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

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

最新文章

热门文章