(+) 二维码打包批量导出

web/client/src/sections/projectRegime/containers/qrCode.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { Form, Input, Select, Button } from 'antd';
+import { Form, Input, Select, Button, message } from 'antd';
+import JSZip from 'jszip';
 import './qrCode.less';
 
 const QrCode = (props) => {
@@ -8,6 +9,7 @@ const QrCode = (props) => {
    const { projectRegime } = actions
    const [firmList, setFirmList] = useState([])
    const [tableList, settableList] = useState([])
+   const [downloading, setDownloading] = useState(false)
 
    useEffect(() => {
       dispatch(projectRegime.getProjectList({ justStructure: true })).then(res => {
@@ -33,6 +35,44 @@ const QrCode = (props) => {
       img.onerror = null;
    }
 
+   const batchDownload = () => {
+      setDownloading(true)
+      let promiseArr = [], nameArr = []
+      tableList.forEach(l => {
+         promiseArr.push(
+            window.fetch(`/_file-server/${l.qrCode}`, {
+               method: 'get',
+               headers: {
+                  "Accept": "application/json",
+                  "Content-Type": "application/json",
+                  "X-Requested-With": "XMLHttpRequest",
+               },
+            })
+         )
+         nameArr.push(l.name + '.jpeg')
+      })
+      try {
+         Promise.all(promiseArr).then(async resArr => {
+            const zip = new JSZip()
+            for (let i = 0; i < resArr.length; i++) {
+               const response = resArr[i]
+               const blob = await response.blob()
+               zip.file(nameArr[i], blob)
+            }
+            zip.generateAsync({ type: "blob" }).then(blob => {
+               const url = window.URL.createObjectURL(blob)
+               downloadFile(url, "点位二维码.zip")
+               setDownloading(false)
+               message.success('下载成功')
+            });
+         })
+      } catch (error) {
+         console.log(error)
+         setDownloading(false)
+         message.error('下载失败')
+      }
+   }
+
    return (
       <div className='global-main'>
          <div className='top'>
@@ -63,9 +103,8 @@ const QrCode = (props) => {
                   <Input placeholder="请输入点位名称" allowClear />
                </Form.Item>
                <Form.Item wrapperCol={{}}>
-                  <Button htmlType="submit">
-                     搜索
-                  </Button>
+                  <Button htmlType="submit" style={{ marginRight: 16 }}>搜索</Button>
+                  <Button type="primary" onClick={batchDownload} loading={downloading}>导出</Button>
                </Form.Item>
             </Form>
          </div>
@@ -91,18 +130,12 @@ const QrCode = (props) => {
                      </div>
                      <div style={{
                         width: 234, height: 60, display: 'flex',
-                        justifyContent: 'center', alignItems: 'center', 
+                        justifyContent: 'center', alignItems: 'center',
                      }}>
                         <Button type="primary" onClick={() => {
-                           const a = document.createElement('a')
-                           const filenameArr = v.qrCode.split('/')
-                           const filename = filenameArr[filenameArr.length - 1]
-                           a.href = `/_file-server/${v.qrCode}`
-                           a.download = filename
-                           a.target = '_blank'
-                           document.body.appendChild(a)
-                           a.click()
-                           document.body.removeChild(a)
+                           const tempArr = v.qrCode.split('/')
+                           const filename = tempArr[tempArr.length - 1]
+                           downloadFile(`/_file-server/${v.qrCode}`, filename)
                         }}>下载二维码</Button>
                      </div>
                   </div>
@@ -124,3 +157,13 @@ function mapStateToProps(state) {
 }
 
 export default connect(mapStateToProps)(QrCode);
+
+function downloadFile(url, fileName) {
+   const a = document.createElement('a');
+   a.style.display = 'none';
+   a.href = url;
+   a.download = fileName;
+   document.body.appendChild(a);
+   a.click();
+   document.body.removeChild(a);
+}

web/package.json

@@ -87,6 +87,7 @@
         "fs-attachment": "^1.0.0",
         "fs-web-server-scaffold": "^1.0.6",
         "i": "^0.3.6",
+        "jszip": "^3.10.1",
         "koa-better-http-proxy": "^0.2.5",
         "koa-proxy": "^1.0.0-alpha.3",
         "koa-view": "^2.1.4",