在做一个二开项目,前端使用的vue element-ui. 需求要在列表里面展示二维码,并且可以批量打包下载.
首先我们能确定在接口里面返回的是二维码链接

展示二维码

1. 在`el-table`中加入一行来进行二维码的占位

<el-table-column label="二维码" min-width="240px" align="center"><template slot-scope="{row}"><vue-qr :id="'qr'+row.id" :text="row.code" ></vue-qr></template></el-table-column>

2. 安装`vue-qr`包,并且引入

安装

npm i vue-qr

引入

import VueQr from ‘vue-qr’

挂载

components:{VueQr},

3. 刷新页面查看效果

批量下载二维码

1. 页面加入批量下载按钮

<el-button  class="filter-item" @click="donloadQrcode()">批量下载二维码</el-button>

2. 加载需要的包

jszip用来进行创建压缩包
HTML2canvas用来进行读取二维码
saveAs 用来进行保存下载

import JSZip from ‘jszip’
import html2canvas from ‘html2canvas’
import saveAs from ‘file-saver’

3. 下载功能实现

// 表格复选框选中状态监听selectChange(row){this.checkTableData = row;},

      // 批量下载二维码donloadQrcode(row){var zip = new JSZip();var CodeDase64 = zip.folder("党员二维码"); //包名称if(this.checkTableData == ''){this.$message('请选择要下载的二维码');return false;}var loading = this.$loading({lock: true,text: '二维码正在打包',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});this.checkTableData.forEach((e, index) => {this.$nextTick(() => {this.htmls(e, index, zip, CodeDase64, loading);});})},

进行下载以及数据的读取

htmls(row, index, zip, CodeDase64, loading){var that = this;var htmlName = document.getElementById("qr"+row.id);setTimeout(() => {html2canvas(htmlName).then((resolve) => {let imgUrl = resolve.toDataURL("image/png"); //此时就得到了dom元素转成了base64的图片const basePic = imgUrl.replace(/^data:image\/(png|jpg);base64,/, "");CodeDase64.file(row.name + ".png", basePic, {base64: true,});if(that.checkTableData.length-1 == index){loading.close();zip.generateAsync({ type: "blob" }) // zip下载.then((content) => {saveAs(content, "党员二维码.zip"); // zip下载后的名字});}});}, 500);},

vue产生二维码并且打包下载相关推荐

前端批量生成二维码并打包下载
前端批量生成二维码并打包下载项目中遇到一个紧急需求在没有后端配合的情况下,前端独自实现生成二维码并打包下载生成二维码:下载 qrcodejs2 批量打包下载:下载 JSZip 和 FileSave ...
vue 生成二维码并可以下载带有边框背景颜色的二维码
项目需求:需要生成一个可以下载且带有边框背景的二维码如果只用qrcode.js只能实现下载二维码,但是下载下来的二维码没有边框背景,可识度非常低,所以需要给下载的二维码加个边框,白色灰色之类的首先 ...
Vue批量生成二维码并打包下载
//[插件地址](https://github.com/Binaryify/vue-qr) <template v-for="(item, index) in qr_code_data ...
vue生成二维码图片并且下载图片到本地
一.安装生成二维码插件qrcode.js npm install --save qrcodejs2 二.封装组件: <template><div><div id=&quo ...
vue 生成二维码并下载
vue 项目中需要实现生成二维码,并且下载下来. 引入 qrcode : import QRCode from "qrcodejs2" 生成二维码: createQRCode () ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
vue-qr 二维码添加logo 下载单个二维码批量下载二维码并打包
使用 vue-qr 生成二维码并可以添加logo 逻辑: 1.下载二维码生成插件这里用的是qrcode 2.下载二维码使用html2canvas(其实解释一个截图工具)将标签截图并下载下来 3. ...
二维码批量生成下载工具
二维码批量生成下载工具 https://tooltt.com/qrcode-batch/ 通过文本列表批量生成二维码,支持打包下载,方便快捷 https://tooltt.com/qrcode-bat ...
vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...

vue产生二维码并且打包下载

展示二维码

1. 在`el-table`中加入一行来进行二维码的占位

2. 安装`vue-qr`包,并且引入

3. 刷新页面查看效果

批量下载二维码

1. 页面加入批量下载按钮

2. 加载需要的包

3. 下载功能实现

vue产生二维码并且打包下载相关推荐

最新文章

热门文章

vue产生二维码并且打包下载

展示二维码

1. 在el-table中加入一行来进行二维码的占位

2. 安装vue-qr包,并且引入

3. 刷新页面查看效果

批量下载二维码

1. 页面加入批量下载按钮

2. 加载需要的包

3. 下载功能实现

vue产生二维码并且打包下载相关推荐

最新文章

热门文章

1. 在`el-table`中加入一行来进行二维码的占位

2. 安装`vue-qr`包,并且引入