业务场景

更多内容：https://pusdn-dev.feishu.cn/wiki/CakCwv7zViUmarkaSY8cvQvDnAr?from=from_copylink

  • 完全前端生成，减轻服务端资源消耗
  • 支持单个图片下载
  • 支持批量压缩包下载
  • 支持跨页勾选、多选

溯源码

批次码、商品码

截图

vue前端批量生成并下载二维码zip_压缩包

vue前端批量生成并下载二维码zip_二维码_02

快速接入

仅xcn及之后版本内置

按钮

<a-tooltip placement="top">
  <template slot="title">
    支持跨页/批量下载二维码哦😯
  </template>
  <a-button type="primary" :disabled="multiple" @click="batchDownloadQrcode" >
    <a-icon type="download" />下载二维码
  </a-button>
</a-tooltip>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

点击事件

修改text改为二维码内容即可，其他代码详见示例代码

batchDownloadQrcode() {
  const selectedRowsArray = Array.from(this.selectedRowsMap.values()).map(row => ({
    id: row.id,
    text: `https://xxx.com?id=${row.id}&name=${row.name}`
  }))
  this.$refs.pCodeModal.batchDownload(selectedRowsArray)
},
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

vue前端批量生成并下载二维码zip_二维码_03

其他项目集成

安装依赖

yarn add qrcode
yarn add jszip
  • 1.
  • 2.

组件下载

下载并替换src/components/pusdn/PCodeModal.vue

PCodeModal.vue.zip: https://url37.ctfile.com/f/8850437-1250142548-c3d588?p=4760 (访问密码: 4760)

完整示例代码

二维码组件: https://url37.ctfile.com/d/8850437-61425427-1bebf8?p=4760 (访问密码: 4760)

需要额外关注selectedRowsMap相关代码，及代码位置

onSelectChange (selectedRowKeys, selectedRows) {
  this.selectedRowKeys = selectedRowKeys
  // 本页
  this.selectedRows = selectedRows
  // 新增支持跨页 start 2021-01-02 @DLQ
  this.list.forEach(row => {
    if (this.selectedRowKeys.includes(row.id)) {
      this.selectedRowsMap.set(row.id, row)
    } else {
      this.selectedRowsMap.delete(row.id)
    }
  })
  // 新增支持跨页 end 2021-01-02 @DLQ
  this.ids = this.selectedRows.map(item => item.id)
  this.single = selectedRowKeys.length !== 1
  this.multiple = !selectedRowKeys.length
},
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

鸣谢

@DLQ 、@LQHJJ、@LCY

后端二维码： https://blog.51cto.com/janeyork/10623907