不保存批量生成二维码并压缩zip下载

对于我一个前端来说,做这个也是醉了;搜了好多都是对已有的文件打包下载的,这里自己组合了下;先看代码吧!

Controller方法(springMVC)

/**
	 * 二维码
	 * 
	 * @param code
	 * @param request
	 * @param response
	 */
	@ResponseBody
	@RequestMapping(value = "createCode", method = RequestMethod.GET)
	public void createCode(Integer size) {
		QRCodeWriter writer = new QRCodeWriter();
		getResponse().setHeader("Pragma", "No-cache");
		getResponse().setHeader("Cache-Control", "no-cache");
		getResponse().setDateHeader("Expires", 0);
		getResponse().setContentType("application/zip");
		List<BufferedImage> buffImgs = new ArrayList<BufferedImage>();
		BitMatrix bitMatrix = null;
		try {
			for (int j = 1; j < 10; j++) {
				bitMatrix = writer.encode(
						Property.getProperty("system.qrcodeURL"),
						BarcodeFormat.QR_CODE, size, size);
				BufferedImage buffImg = MatrixToImageWriter
						.toBufferedImage(bitMatrix);
				Graphics g = buffImg.getGraphics();
				g.setColor(Color.red);
				// 最后一个参数用来设置字体的大小
				Font f = new Font("宋体", Font.BOLD, 20);
				g.setFont(f);
				// 10,20 表示这段文字在图片上的位置(x,y) .第一个是你设置的内容。
				g.drawString("箱" + j, 10, 30);
				g.dispose();

				buffImgs.add(buffImg);
			}
			ZipOutputStream zos = new ZipOutputStream(getResponse()
					.getOutputStream());
			int i = 1;
			for (BufferedImage buf : buffImgs) {
				ZipEntry entry = new ZipEntry("箱" + i + ".jpeg");
				// 设置压缩包的入口
				zos.putNextEntry(entry);
				JPEGImageEncoder en = JPEGCodec.createJPEGEncoder(zos);
				en.encode(buf);
				zos.flush();
				i++;
			}
			zos.close();
			// MatrixToImageWriter.writeToStream(bitMatrix, "jpeg",
			// getResponse()
			// .getOutputStream());
			getResponse().getOutputStream().flush();
			getResponse().getOutputStream().close();
		} catch (WriterException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

网页前端JS

这里需要做兼容处理,IE内核支持iframe请求触发下载;但是火狐和谷歌可以使用a标签h5的download属性
<pre name="code" class="javascript">                                       function DoSaveAsIMG() {  
                                          if (document.all.IframeReportImg.src != "about:blank")  
    	                                      window.frames['IframeReportImg'].document.execCommand("SaveAs");          
                                       } 
 
 
                                        var _size=$("#qrcode").val();
                                        var b_name = navigator.appName;
					if (b_name == "Microsoft Internet Explorer") {
					    //如果隐藏IFRAME不存在,则添加  
				        if (!document.getElementById("IframeReportImg"))  
				            $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" οnlοad="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");  
				        if (document.all.IframeReportImg.src != opts.createQRCodeURL+"?size="+_size) {  
				            //加载图片  
				            document.all.IframeReportImg.src = opts.createQRCodeURL+"?size="+_size;  
				        }  
				        else {  
				            //图片直接另存为  
				            DoSaveAsIMG();    
				        }  
					}else{
						 var newA = document.createElement("a");
						 newA.download = "code";
						 newA.href = opts.createQRCodeURL+"?size="+_size;
						 document.body.appendChild(newA);
						 newA.click();
						 document.body.removeChild(newA);
					}



### 回答1: 要批量生成二维码zip文件,可以使用JavaScript编程语言来实现。 首先,我们需要安装一个适用于JavaScript的二维码生成库,例如qrcode.js。使用npm或者其他包管理工具进行安装。 接下来,我们需要引入所需的库文件,并创建一个HTML页面。在HTML页面中,我们需要添加一个表单,用于上传要生成二维码的文件。添加一个按钮,用于批量生成二维码。 在JavaScript代码中,我们需要监听表单的提交事件。当用户上传文件后,我们可以使用File API读取文件内容。如果文件是一个txt文件,并且每行包含一个URL,我们可以将行拆分为一个URL列表。 使用qrcode.js库,我们可以循环遍历URL列表,生成二维码,并将这些二维码存储在数组中。然后,我们可以使用jszip库创建一个zip文件,并将二维码添加到zip文件中。 最后,我们可以使用jszip库提供的方法将生成的zip文件下载到用户的计算机上,并提供一个合适的文件名。 总结起来,要实现批量生成二维码zip文件的功能,首先要使用qrcode.js库生成二维码,然后使用jszip库创建zip文件,最后将生成的zip文件提供给用户下载。 ### 回答2: JS 批量生成二维码zip,可以使用第三方库来实现。下面是一个使用 `jszip`、`qrcodejs` 和 `html2canvas` 库来实现的示例: 首先需要引入 `jszip`、`qrcodejs` 和 `html2canvas` 的库文件。然后在 HTML 文件中创建一个按钮,用于触发生成二维码zip的功能。 ```html <button onclick="generateQRCodes()">生成二维码zip</button> ``` 接下来是相关的 JavaScript 代码: ```javascript function generateQRCodes() { // 创建一个新的zip实例 var zip = new JSZip(); // 定义需要生成二维码的数据 var data = ['https://example.com/qrcode1', 'https://example.com/qrcode2', 'https://example.com/qrcode3']; // 定义生成二维码的参数 var options = { text: '', width: 128, height: 128, }; // 循环遍历数据生成二维码 data.forEach(function(url, index) { options.text = url; var qrCode = new QRCode(document.createElement('div'), options); // 使用 html2canvas 将二维码渲染为图片 html2canvas(qrCode._el.firstChild).then(function(canvas) { // 将图片添加到zip文件中 zip.file('qrcode' + (index + 1) + '.png', canvas.toDataURL().substr(22), { base64: true }); // 如果是最后一张二维码,则生成zip文件并下载 if (index === data.length - 1) { zip.generateAsync({ type: "blob" }).then(function(content) { // 使用第三方库FileSaver保存下载zip文件 saveAs(content, "qrcodes.zip"); }); } }); }); } ``` 上述代码首先定义了需要生成二维码的数据数组 `data`,然后通过循环遍历数组,在每次遍历中生成一个二维码,并使用 `html2canvas` 将其渲染为图片。图片被添加到 zip 文件中,并在最后一张二维码生成后将 zip 文件生成并下载到本地。 请注意,上述代码只是一个示例,具体使用时需要根据实际需求进行修改和适配。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值