java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载

一、 vue页面生成二维码

<template><div class="app-container">//在页面放着二维码的div<div id="qrcode" ref="qrcode" align="middle"></div></div>
</template>

methods: {//生成二维码qrcodeScan() {this.$refs.qrcode.innerHTML = "";//将div中的内容先清空，否知第二次打开页面会有2个二维码let qrcode = new QRCode(this.$refs.qrcode, {width: 200,  // 二维码宽度height: 200, // 二维码高度text: "https://blog.csdn.net/qq_33007465?spm=1019.2139.3001.5343",//二维码内容});qrcode._el.title='';//鼠标放在二维码上不显示文本内容},}
};

二、 vue项目的列表页面，每条数据后添加按钮，点击按钮弹窗展示二维码。

  <!--查看二维码--><el-dialog :title="qrcodetitle" :visible.sync="qrcodeopen" width="400px" append-to-body><div id="qrcode" ref="qrcode" align="middle"></div></el-dialog>

在return里面定义弹出层标题和是否展示弹出层

 return {active: 1,// 弹出层标题qrcodetitle: "",// 二维码弹出层qrcodeopen: false}

点击按钮事件中将二维码弹出层赋值为true，打开弹出层，给弹出层的关闭按钮添加点击事件，将二维码弹出层赋值false。

methods: {//查看二维码按钮handleCode(row){const id = row.id || this.ids;//商家idconst name = row.name;//商家名称this.qrcodeopen = true;//弹出层打开this.qrcodetitle = name + "收款二维码";//弹出层标题this.$nextTick (function () {//调用生成二维码方法this.qrcodeScan(id);})},//生成二维码qrcodeScan (id){this.$refs.qrcode.innerHTML = "";//先将div内容清空，否知每次打开会多增加一个二维码let qrcode = new QRCode(this.$refs.qrcode, {width: 200,  // 二维码宽度height: 200, // 二维码高度text: "https://blog.csdn.net/qq_33007465?spm=1019.2139.3001.5343",//二维码内容});qrcode._el.title='';//鼠标放在二维码上不显示文本内容},}

三、 controller层生成二维码保存到服务器上并存入数据中。

controller层代码。

package com.ruoyi.merchant.utils;import cn.hutool.core.util.StrUtil;
import cn.hutool.extra.qrcode.QrCodeUtil;
import cn.hutool.extra.qrcode.QrConfig;
import sun.misc.BASE64Encoder;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;public class QrCoder {/*** 图片的宽度*/private static final int IMAGE_WIDTH = 350;/*** 图片的高度(需按实际内容高度进行调整)*/private static final int IMAGE_HEIGHT = 420;/*** 二维码的宽度*/private static final int QR_CODE_WIDTH = 200;/*** 二维码的宽度*/private static final int QR_CODE_HEIGHT = 200;private static final String FORMAT_NAME = "JPG";/*** @param imgLogo logo图片* @param title   头部标题* @param text   二维码内容* @param content 二维码上方文字内容* @param footer  底部文字*/public static BufferedImage createQrCode(String imgLogo, String title, String text, String content, String footer) {// 头部文字区域高度int titleHeight = 50;// 创建主模板图片BufferedImage image = new BufferedImage(IMAGE_WIDTH, IMAGE_HEIGHT, BufferedImage.TYPE_INT_RGB);Graphics2D main = image.createGraphics();main.setColor(new Color(89, 146, 235)); //蓝色main.fillRect(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT);// 动态高度int height = 0;//***********************页面头部 文字****************Graphics2D titleRight = image.createGraphics();// 设置字体颜色 black黑 white白titleRight.setColor(Color.black);// 设置字体Font titleFont = new Font("宋体", Font.BOLD, 25);titleRight.setFont(titleFont);titleRight.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_LCD_HRGB);// 居中 x开始的位置：（图片宽度-字体大小*字的个数）/2int x = (IMAGE_WIDTH - (titleFont.getSize() * title.length())) / 2;titleRight.drawString(title, x, (titleHeight) / 2 + 10);height += titleHeight;//***************插入二维码图片***********************************************Graphics codePic = image.getGraphics();BufferedImage codeImg;QrConfig config = new QrConfig();config.setWidth(QR_CODE_WIDTH);config.setHeight(QR_CODE_HEIGHT);if (StrUtil.isNotBlank(imgLogo)) {config.setImg(imgLogo);}codeImg = QrCodeUtil.generate(text, config);// 绘制二维码codePic.drawImage(codeImg, (IMAGE_WIDTH - QR_CODE_WIDTH) / 2, height, QR_CODE_WIDTH, QR_CODE_HEIGHT, null);codePic.dispose();//**********************中间文字部分*********Graphics2D centerWord = image.createGraphics();// 设置字体颜色，先设置颜色，再填充内容centerWord.setColor(Color.white);// 设置字体Font wordFont = new Font("宋体", Font.BOLD, 20);centerWord.setFont(wordFont);centerWord.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_LCD_HRGB);String[] info = content.split("-");for (String s : info) {// x开始的位置：（图片宽度-字体大小*字的个数）/2int strWidth = centerWord.getFontMetrics().stringWidth(s);// 总长度减去文字长度的一半  （居中显示）int startX = (IMAGE_WIDTH - strWidth) / 2;height += 30;centerWord.drawString(s, startX, height);}//**********************底部公司名字*********Graphics2D typeLeft = image.createGraphics();// 设置字体颜色typeLeft.setColor(Color.black);// 设置字体Font footerFont = new Font("宋体", Font.PLAIN, 10);typeLeft.setFont(footerFont);typeLeft.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_LCD_HRGB);// x开始的位置：（图片宽度-字体大小*字的个数）/2int startX = (IMAGE_WIDTH - (footerFont.getSize() * footer.length())) / 2;height += QR_CODE_HEIGHT;typeLeft.drawString(footer, startX, height);//***************插入标志图片***********************************************
//        Graphics signPic = image.getGraphics();
//        BufferedImage signImg = null;
//        try {//            signImg = ImageIO.read(new java.io.File(imgSign));
//        } catch (Exception e) {//        }
//
//        if (signImg != null) {//            signPic.drawImage(signImg, 0, 130, QR_CODE_WIDTH, QR_CODE_HEIGHT, null);
//            signPic.dispose();
//        }// 返回image方便后续处理是生成图片还是生成base64字符串return image;}// 生成图片文件public static void createImage(BufferedImage image, String fileLocation) {if (image != null) {try {ImageIO.write(image, "png", new File(fileLocation));} catch (IOException e) {e.printStackTrace();}}}// 获取图片base64数据public static String base64ImageString(BufferedImage image) throws IOException {ByteArrayOutputStream bos = new ByteArrayOutputStream();//io流ImageIO.write(image, FORMAT_NAME, bos);//写入流中byte[] bytes = bos.toByteArray();//转换成字节BASE64Encoder encoder = new BASE64Encoder();String jpgBase64 = encoder.encodeBuffer(bytes).trim();//转换成base64串jpgBase64 = jpgBase64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\nreturn "data:image/jpg;base64," + jpgBase64;}//content是二维码上方的文字描述，通过 - 进行换行，默认是文字描述在上二维码在下，如果实现二维码在上文字在上，我使用----多个换行实现的。//text是二维码的文本内容//createImage方法中填写本地路径或者项目部署到服务器上的路径//jar包部署的需要在nginx配置文件中配置图片的查看地址，tomcat的war包部署，需要在tomcat中配置静态文件查看地址public static void main(String[] args) {String content = "- - - - - - - -山东老字号菜品展览会-煎饼食品部-统一收款二维码-   -";String text = "填写二维码的内容";BufferedImage bufferedImage = createQrCode(null, "", text, content, "测试数据");createImage(bufferedImage, "/data/项目路径/项目的图片路径/test.png");String url = "项目的域名+图片路径+图片名称.png";//将url存入对应数据中}}

vue层代码

 <!--查看二维码--><el-dialog :title="qrcodetitle" :visible.sync="qrcodeopen" width="400px" append-to-body><img :src="bookImg" style="width:350px;height:420px"></el-dialog>

//查看二维码按钮
handleCode(row){const id = row.id || this.ids;//商家idconst name = row.name;//商家名称selectCode(id ).then(response => {this.qrcodeopen = true;this.qrcodetitle = name+ "收款二维码";this.bookImg = response.msg;})
},

四、将数据库的所有二维码图片放到文件夹中压缩成压缩包下载到本地

controller代码

 /*** 批量下载二维码*/@PreAuthorize("@ss.hasPermi('xxxx:xxxx:download')")//权限@GetMapping("/downloadCode")public AjaxResult downloadCode(){return xxService.downloadCode();}

service层代码

public AjaxResult downloadCode() {List<QrCode> list = xxMapper.downloadCode();//获取数据库中所有二维码图片地址Long startTs = System.currentTimeMillis(); // 当前时间戳String path = "/data/项目路径/图片存放路径/"+startTs.toString();//在桌面新建文件夹（项目在本地启动时，可以在本地新建文件夹直接将图片写入文件夹）File deleteFile = new File(path);String mkDirectoryPath = path;//删除文件夹/* String[] cmd = new String[]{"/bin/sh", "-c", "rm -rf " + mkDirectoryPath};try {Process process = Runtime.getRuntime().exec(cmd);} catch (IOException e) {e.printStackTrace();}*/mkDirectory(mkDirectoryPath);try {for (int i = 0; i < list.size(); i++) {QrCode qrCode = list.get(i);String str = qrCode.getCodeUrl();//图片的地址String name = qrCode.getBrandName();//图片的名称URL url = new URL(str);InputStream inputStream = null;inputStream = url.openStream();byte[] bytes = IOUtils.toByteArray(inputStream);//获取用户本地桌面地址（在本地启动是可以使用）//FileSystemView fsv = FileSystemView.getFileSystemView();//File com = fsv.getHomeDirectory();//将图片下载到文件夹中File imageFile = new File(path+"/" + name + ".png");//创建输出流FileOutputStream outStream = new FileOutputStream(imageFile);//写入数据outStream.write(bytes);//关闭输出流outStream.close();}CompressedFileUtil.compressedFile(path, "/data/项目路径/图片路径/zip");} catch (Exception e) {return AjaxResult.error();}//将文件夹压缩之后的压缩包放到服务器项目路径下，把url地址传给前端vueString codeUrl = "域名/项目路径/图片路径/zip/"+startTs.toString()+".zip";return AjaxResult.success(codeUrl);}

vue前端

 queryCode(){this.$refs["codeform"].validate(valid => {if (valid) {this.$confirm('是否确认批量下载二维码？', "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {downloadCode(codeExhiId).then(response => {//调用下载二维码方法console.log(response.msg);//返回的压缩包的url地址window.location.href = response.msg;//直接打开url会把任务交给浏览器，浏览器自动下载this.downloadQrCode = false;//关闭弹窗});});}})},

java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
织梦文件上传服务器,织梦源码上传云服务器
织梦源码上传云服务器内容精选换一换 WinSCP工具可以实现在本地与远程计算机之间安全地复制文件.与使用FTP上传代码相比,通过 WinSCP 可以直接使用服务器账户密码访问服务器,无需在服务器端 ...
php图床api源码,京东免费图床上传接口php源码
/* *京东图床PHP代码 */ if (class_exists('CURLFile')) { // php 5.5 $post['file'] = new \CURLFile(realpath($ ...
生成Excel直接上传服务器+下载
//生成Excel文件直接上传服务器//生成excelXSSFWorkbook workbook = new XSSFWorkbook();//sheet页名XSSFSheet sheet = wo ...
java二维码生成-谷歌（Google.zxing）开源二维码生成学习及实例
java二维码生成-谷歌(Google.zxing)开源二维码生成的实例及介绍这里我们使用比特矩阵(位矩阵)的QR码编码在缓冲图片上画出二维码实例有以下一个传入参数 OutputStream o ...
QRCode二维码生成方案及其在带LOGO型二维码中的应用（2）
QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 续前:QRCode二维码生成方案及其在带LOGO型二维码中的应 ...
QRCode二维码生成方案及其在带LOGO型二维码中的应用（1）
提要:很多公司为商业宣传之需,常将企业LOGO加入二维码中,但如果LOGO遮挡区域足够地大,二维码就变得无法识别.那么,有没有一种办法将上述区域预先"抠空"出来(以便专门放置LOG ...
cmsplus实战之仿[我扫网]之十二：打包网站及数据库并上传到服务器调试
一:打包网站文件: 二:打包数据库: 三:上传到服务器安装调试: 推荐使用flashfxp上传文件: 下载网站:仿站工具网至此,整个仿站开发工程全部全部完成. 最后,所有资料及源码下载地址:仿[我扫 ...
Java从本地扫描文件上传服务器
项目说明: 本代码只是一个简单的工具类,自己做的整合,采用sftp方式进行上传文件,如有错误,望指正!!! 功能: 1.读取本地指定文件夹的文件,进行扫描读取 2.将读取的文件上传至指定服务器的指定文 ...
优化Recorder H5录音：可边录边转码上传服务器，支持微信提供Android IOS Hybrid App源码
文章目录一.Recorder H5录音库的特性 (1)浏览器支持 (2)功能支持二.使用预览截图 (1)移动端H5 (2)IOS Hybrid App (3)Android Hybrid App ...

java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载

java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载相关推荐

最新文章

热门文章