使用layui在前端接收后端的图片流来显示二维码,在前端使用iframe接收后端流来预览pdf

消息弹框的形式

因为我是在生成二维码之后，用zxing的工具类输出的流
所以这里介绍一下我用到的工具类的依赖

gradle

// https://mvnrepository.com/artifact/com.google.zxing/javase
compile group: 'com.google.zxing', name: 'javase', version: '3.2.1'

maven

<dependency><groupId>com.google.zxing</groupId><artifactId>javase</artifactId><version>3.2.1</version>
</dependency>

我这里的前端是coffee，如果是纯js的话改成js就行了

这里要注意一点，就是在请求后端的时候是以get请求方式请求的

coffee demo

html = "<img src='/api/qrcode/generateQRCode/#{shipmentId}'/>"layer.open(type: 1,title : false,closeBtn: false    //上面的demo的图片右上角有关闭X要去掉的话，加上这一行设置就行,offset: 'auto',id: 'layerDemo'+ shipmentId,content: html,btn: '关闭',btnAlign: 'c',shade: 0,yes: () ->layer.closeAll();)

从官网捞了个js的demo

var html = "<img src='/api/qrcode/generateQRCode/#{shipmentId}'/>"
layer.open({type: 1,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset,id: 'layerDemo'+type //防止重复弹出,content: html,btn: '关闭全部',btnAlign: 'c' //按钮居中,shade: 0 //不显示遮罩,yes: function(){layer.closeAll();}});

前端大致就是上面这样，后端的话这里也给个demo,后端controller我用的springmvc
主要思路是把图片流写到response输出流中

controller

ResponseMessage generateQRCode(TtxSession sess,HttpServletResponse response,Long shipmentId){ServletOutputStream stream = null;try {ShipmentHeader sh = shSvc.getEntity(sess,shipmentId)String sql = """select * from config_detail where warehouseCode = ? and recordType = 'invoiceValues' and identifier = 'qrCodePath'"""List<ConfigDetail> configDetails = template(sess).query(sql,new BeanPropertyRowMapper<ConfigDetail>(ConfigDetail.class),sh.warehouseCode)if(CollectionUtils.isEmpty(configDetails) || StringUtils.isEmpty(configDetails[0]?.value1)){return ResponseMessageFactory.error(sess,WaveMessages.MSG_WAVE_0147)}String selfDefine = configDetails[0].value2Map selfDefineMap = JSON.readValue(selfDefine,Map.class)Integer pictureSize = selfDefineMap.get("pictureSize") as IntegerString picForm = selfDefineMap.get("pictureForm")String path = configDetails[0].value1String sepa = Matcher.quoteReplacement(File.separator)path = path.replaceAll("/",sepa)String filename = path + sh.code + "." + picFormBitMatrix bitMatrix = QRCodeUtil.createQRCode(sh.invoiceUrl,pictureSize,pictureSize)MatrixToImageWriter.writeToPath(bitMatrix,picForm,new File(filename).toPath())//输出到前端的图片肯定是要最新的不能有缓存,所以要设置no cacheresponse.setHeader("Cache-Control","no-store");response.setHeader("Pragma","no-cache");response.setDateHeader("Expires",0);response.setContentType("image/jpg");   //设置格式,就是下面的picForm,我这里举了个jpg格式的例子stream = response.getOutputStream()//参数依次是：图片矩阵，图片格式picForm=jpg，ServletOutputStream stream = response.getOutputStream()MatrixToImageWriter.writeToStream(bitMatrix,picForm,stream)return ResponseMessageFactory.success(sess)} catch (Throwable t) {ExceptionManager.logException(sess,t)return ResponseMessageFactory.error(sess,t.getMessage())}finally{if (stream != null) {stream.flush();stream.close();}}

呃，上面的 bitMatrix 矩阵对象的来源在我生成二维码的博文那儿有

https://blog.csdn.net/weixin_43944305/article/details/106701133

在前端使用iframe接收后端流来预览pdf

layui的open中type=2的弹框其实是一个iframe
可以参考layui官方文档
https://www.layui.com/doc/modules/layer.html#type

<div id="getPdf"><button data-method="confirmTrans" class="layui-btn">预览pdf</button>
</div>var $ = layui.jquery, layer = layui.layer;$('#getPdf .layui-btn').on('click', function () {layer.open({type: 2, title: 'is test', closeBtn: true, id: 1 //防止重复弹出, content: "/layui/getPdf", shade: 0 //不显示遮罩, yes: function () {layer.closeAll();}});});

后端返回流给前端

@GetMapping("getPdf")
public void getPdf(HttpServletResponse response){response.setContentType("application/pdf");FileInputStream in;OutputStream out;try {in = new FileInputStream(new File("C:\\Users\\xxx\\xxx.pdf"));out = response.getOutputStream();byte[] b = new byte[512];while ((in.read(b)) != -1) {out.write(b);}out.flush();in.close();out.close();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}
}

使用layui在前端接收后端的图片流来显示二维码,在前端使用iframe接收后端流来预览pdf相关推荐

附带有背景图、文字的二维码
前端生成附带有背景图.可添加文字的二维码下载 npm install jr-qrcod --save 引入 const qrcode = require('jr-qrcode'); 使用 <i ...
使用前端QrCode.js实现根据输入内容生成二维码，并提供二维码下载功能（已使用在交付项目中）
前端QrCode 根据输入内容生成二维码,并提供二维码下载功能简介:这是一个使用前端QrCode自动生成二维码并下载二维码图片的项目. 项目背景:在某个项目的交付阶段,客户提出需要一个可手动生成二维 ...
Java获取图片传到前端，生成二维码给前端
可以将本地图片导入然后传到前端,也可以生成一个随意长度的二维码保存到本地,也可以传到前端,可以直接通过地址栏访问.要记得导入相关pom依赖包. 获取本地图片传到前端 /*** @param* @par ...
前端怎么从H5调起微信扫描二维码?小程序使用扫码功能.
小程序如何使用扫码的功能呢? wx.scanCode(Object object) 参数属性类型默认值必填说明最低版本 onlyFromCamera boolean false 否是否只 ...
微信小程序生成二维码之传参（接收的参数乱码该咋解决）
先说我的案例,我需要的是,扫码进入不同的区域展示(因此这个就需要进行二维码路径传参),大致思路:接收数据,然后根据所接收的数据进行判断,展示不同的区域. 我是用的草料二维码生成的 - https:// ...
java 生成推广码背景图和自己的二维码
看效果图 package com.hxx.utils;import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHint ...
前端 js 非控件使用标签打印机打印二维码和文本_青岛Web前端（HTML5）面试题分享...
HTML5是前端开发人员必须掌握的技能之一,那么在面试时,面试官常问到的HTML5的问题有哪些呢? 青岛HTML5 1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 答:告知浏览器的 ...
JS识别二维码，JS解二维码，前端识别二维码
1.之前有找过识别二维码的插件,但是遇到了些问题,具体表现为文字识别不了,带get参数识别不了.正常的普通链接没问题. 2.找了一天也没找到一个正常的.吐槽一下网上的教程正是什么样的都有,真是醉了. ...
前端系列教程之推荐（测试草料二维码）
为什么要推荐这个网站呢,有点像搞小聪明吧,嘻嘻嘻之前说到移动端适配,当然我们可以使用F12开发者工具,进行测试,但是相比真机测试还是有些差距的,除了在电脑上安装模拟器还有其他办法吗? 草料二维码,手 ...

使用layui在前端接收后端的图片流来显示二维码,在前端使用iframe接收后端流来预览pdf

消息弹框的形式

在前端使用iframe接收后端流来预览pdf

使用layui在前端接收后端的图片流来显示二维码,在前端使用iframe接收后端流来预览pdf相关推荐

最新文章

热门文章