你会写下载功能嘛?

1,147 阅读1分钟

如何在本地,写一个下载的功能,不经过后端的接口呢? react版本:

下面是代码部分:

由于是本地测试,所以需要先上传一个文件,再去进行下载,否则没有下载模板。

如果后续要和后端那边做配合,也可以直接将后端返回的模板载入,进行下载操作。

downLoad.jsx

import { Button, Upload } from "antd";
import { useState } from "react";
export default function Uploadfile() {
	const [file, setFile] = useState();

	const props = {
		name: 'file',
		action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
		headers: {
		  authorization: 'authorization-text',
		},
		onChange(info) {
			setFile(info.file)
		},
	  };
	const click = () => {
		const link = document.createElement("a");
		link.style.display = "none";
		if (file) {
			// 如果文件存在,设置下载文件名称
			link.download = decodeURIComponent(file.name);
		}
		if (file) {
			// 如果文件存在,设置下载文件
			link.href = URL.createObjectURL(file.originFileObj);
		}
		document.body.appendChild(link);
		link.click();
		URL.revokeObjectURL(link.href);
		document.body.removeChild(link);
	};
	return (
		<div>
			<Upload {...props}>
				<Button>上传</Button>
			</Upload>
			<br />
			<br />
			<br />
			<Button type="primary" onClick={click}>
				下载
			</Button>
		</div>
	);
}

App.js

import './App.css';
import downLoad from './components/downLoad.jsx'

function App() {
  return (
    <div>
      <downLoad />
    </div>
  );
}

export default App;

今天的内容到此结束,下期再见!