导出实操

code/VideoAccess-VCMP/web/client/src/components/index.js

@@ -1,5 +1,6 @@
 'use strict';
+import SimpleFileDownButton from './simpleFileDownButton'
 
 export {
-
+   SimpleFileDownButton
 };

code/VideoAccess-VCMP/web/client/src/components/simpleFileDownButton.jsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect, useRef } from "react";
+import { connect } from "react-redux";
+import moment from 'moment'
+import { Button, } from "@douyinfe/semi-ui";
+
+const SimpleFileDownButton = (props) => {
+   const { src, user } = props
+   const [downloadUrl, setDownloadUrl] = useState('')
+
+   return (
+      <>
+         <Button
+            style={{
+               width: 65,
+               height: 32,
+               background: "#FFFFFF",
+               borderRadius: 3,
+               border: "1px solid #1859C1",
+            }}
+            onClick={() => {
+               setDownloadUrl(`${src}?token=${user.token}&timestamp=${moment().valueOf()}`)
+            }}
+         >
+            导出
+         </Button>
+         <iframe src={`/_api/${downloadUrl}`} style={{ display: 'none' }} />
+      </>
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth } = state;
+   return {
+      user: auth.user,
+   };
+}
+
+export default connect(mapStateToProps)(SimpleFileDownButton);

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx

@@ -13,6 +13,7 @@ import {
   Skeleton,
   Popconfirm,
 } from "@douyinfe/semi-ui";
+import { SimpleFileDownButton } from '$components'
 import "../style.less";
 import CameraModal from "../components/cameraModal";
 import NvrModal from "../components/nvrModal";
@@ -597,17 +598,7 @@ const CameraHeader = (props) => {
                 style={{ width: 18, height: 18 }}
               />
             </Button>
-            <Button
+            <SimpleFileDownButton src="nvr/export"/>
-              style={{
-                width: 65,
-                height: 32,
-                background: "#FFFFFF",
-                borderRadius: 3,
-                border: "1px solid #1859C1",
-              }}
-            >
-              导出
-            </Button>
           </div>
         </div>
         <Skeleton

code/VideoAccess-VCMP/web/vite.config.js

@@ -13,6 +13,9 @@ export default defineConfig({
          {
             find: '$utils', replacement: path.join('/src/utils'),
          },
+         {
+            find: '$components', replacement: path.join('/src/components'),
+         },
          // 针对以 ~/[包名称]开头的，替换为 node_modules/@[包名称]
          {
             find: /^(~)(?!\/)(.+)/, replacement: path.join('node_modules/$2'),