js生成二维码并下载、批量生成二维码和压缩下载

参考文章https://my.oschina.net/u/4256066/blog/3840766
生成二维码并下载

需要引入js文件

<script type="text/javascript" src="/scripts/qrcode.min.js"></script>
<div id="code"></div>//这个是必须要的div
<div class="layui-form-item" style="padding-left: 110px;">
   <button class="layui-btn layui-btn" onclick="download()">下载二维码</button>
</div>
//js生成二维码
var qrcode = new QRCode(document.getElementById("code"), {
   
	text: "https://www.baidu.com",
	width: 200,
	height: 200,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用以下步骤来批量生成二维码下载: 1. 安装 vue-qr 依赖 使用 npm 命令进行安装: ``` npm install vue-qr --save ``` 2. 编写组件 在 Vue 组件中引入 vue-qr,使用 v-for 循环生成多个二维码,并添加下载功能。 ``` <template> <div> <div v-for="(item, index) in qrList" :key="index"> <img :src="item" /> <button @click="downloadQR(index)">下载二维码</button> </div> </div> </template> <script> import VueQr from 'vue-qr' export default { data() { return { qrList: ['http://www.example.com/qr1', 'http://www.example.com/qr2', 'http://www.example.com/qr3'] } }, components: { VueQr }, methods: { downloadQR(index) { const link = document.createElement('a') link.href = this.qrList[index] link.download = `qr-${index}.png` document.body.appendChild(link) link.click() document.body.removeChild(link) } } } </script> ``` 3. 生成二维码 在组件中使用 VueQr 组件生成二维码: ``` <vue-qr :value="item"></vue-qr> ``` 其中,`:value` 属性绑定的是二维码的内容。 4. 下载二维码 在下载按钮的点击事件中,使用 JavaScript 中的 download 属性来下载二维码。代码如下: ``` downloadQR(index) { const link = document.createElement('a') link.href = this.qrList[index] link.download = `qr-${index}.png` document.body.appendChild(link) link.click() document.body.removeChild(link) } ``` 其中,`this.qrList[index]` 表示当前二维码的链接,`qr-${index}.png` 表示下载的文件名。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值