导出实操

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

@@ -5,26 +5,29 @@ import reactRefresh from '@vitejs/plugin-react-refresh'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    root: './client/',
+   root: './client/',
-    plugins: [react({})],
+   plugins: [react({})],
-    // plugins: [reactRefresh({})],
+   // plugins: [reactRefresh({})],
-    resolve: {
+   resolve: {
-        alias: [
+      alias: [
-            {
+         {
-                find: '$utils', replacement: path.join('/src/utils'),
+            find: '$utils', replacement: path.join('/src/utils'),
-            },
+         },
-            // 针对以 ~/[包名称]开头的，替换为 node_modules/@[包名称]
+         {
-            {
+            find: '$components', replacement: path.join('/src/components'),
-                find: /^(~)(?!\/)(.+)/, replacement: path.join('node_modules/$2'),
+         },
-            },
+         // 针对以 ~/[包名称]开头的，替换为 node_modules/@[包名称]
-        ],
+         {
-    },
+            find: /^(~)(?!\/)(.+)/, replacement: path.join('node_modules/$2'),
-    cors: true,
+         },
-    server: {
+      ],
-        hmr: {
+   },
-            protocol: 'ws',
+   cors: true,
-            host: 'localhost'
+   server: {
-        },
+      hmr: {
-        middlewareMode: 'html',
+         protocol: 'ws',
-    }
+         host: 'localhost'
+      },
+      middlewareMode: 'html',
+   }
 })