react图片预览增加下载按钮

Posted 2023-03-19

// 利用React实现图片预览功能，并在预览图片上添加下载按钮：

import React, useState from 'react';
import Button, Modal from 'react-bootstrap';

const ImagePreview = () =>
const [show, setShow] = useState(false);
const [imgSrc, setImgSrc] = useState('');

const getImage = (e) =>
let reader = new FileReader();
const file = e.target.files[0];
reader.onloadend = () =>
setShow(true);
setImgSrc(reader.result)

reader.readAsDataURL(file);


const downloadImage = () =>
const link = document.createElement('a');
link.download = 'image';
link.href = imgSrc;
link.click();


return (
<>
<input type="file" onChange=getImage />
<Modal show=show>
<Modal.Body>
<img src=imgSrc alt="image preview"/>
</Modal.Body>
<Modal.Footer>
<Button onClick=downloadImage>Download Image</Button>
</Modal.Footer>
</Modal>
</>
)


export default ImagePreview; 参考技术A 功能

在react图片预览的基础上，增加一个下载按钮，给用户提供下载功能。

通常情况下，下载按钮可以是个图标在图片预览的左下角，或者在图片预览中加入一个按钮标签，点击图片，弹出下载框。

引入具体实现方法：

1. 使用React中的a标签，在图片预览容器中增加一个按钮，并将a标签中的href属性设置为图片地址，点击按钮即可下载该图片，代码如下：

```
<a download="xxx" href=imageUrl>
下载按钮
</a>
```

2. 使用React中的file-saver模块，通过调用模块中的saveAs函数，实现图片的下载功能，具体代码如下：

```javascript
import FileSaver from 'file-saver';

handleDownloadClick() 参考技术B 前端
【react】点击按钮下载图片功能以及XMLHttpRequest的基本用法

Chic。
原创
关注
1点赞·277人阅读
图片下载点击事件

const handlerDown = (url: string, name: string) =>
const x = new XMLHttpRequest();
const resourceUrl = url;
x.open('GET', resourceUrl, true);
x.responseType = 'blob';
x.onload = function ()
const urls = window.URL.createObjectURL(x.response);
const a = document.createElement('a');
a.href = urls;
a.download = name + '.png';
a.click();
;
x.send();
;
登录后复制

调用图片下载功能

<Button
type="link"
size="middle"
onClick=() => handlerDown('https://www.baidu.com/', '测试测试')
/>
登录后复制
XMLHttpRequest的基本用法
XMLHttpRequest是浏览器内置的一个构造函数。因此使用的时候需要 new ​ 作用，基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('GET', 'https://www.baidu.com');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function()
console.log('load事件');
);
登录后复制

GET请求携带参数

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数 -- get参数
xhr.open('GET', 'https://www.baidu.com');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function()
console.log('load事件');
);
登录后复制

POST请求携带参数

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('POST', 'https://www.baidu.com');
// 调用 xhr.send() 函数
// 设置头部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('');
// 监听 load 事件
xhr.addEventListener('load', function()
console.log('load事件');
);
登录后复制

responseType
XMLHttpRequest.responseType 属性是一个枚举类型的属性，设置返回响应数据的类型。
react.js
javascript
前端


点赞文章给优秀博主打call~
新款凉鞋，上脚舒适不累脚，现在下单超划算
精选推荐
广告
 参考技术C 图片下载点击事件

const handlerDown = (url: string, name: string) =>
const x = new XMLHttpRequest();
const resourceUrl = url;
x.open('GET', resourceUrl, true);
x.responseType = 'blob';
x.onload = function ()
const urls = window.URL.createObjectURL(x.response);
const a = document.createElement('a');
a.href = urls;
a.download = name + '.png';
a.click();
;
x.send();
;
登录后复制

调用图片下载功能

<Button
type="link"
size="middle"
onClick=() => handlerDown('https://www.baidu.com/', '测试测试')
/>
登录后复制
XMLHttpRequest的基本用法
XMLHttpRequest是浏览器内置的一个构造函数。因此使用的时候需要 new ​ 作用，基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('GET', 'https://www.baidu.com');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function()
console.log('load事件');
);
登录后复制

GET请求携带参数

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数 -- get参数
xhr.open('GET', 'https://www.baidu.com');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function()
console.log('load事件');
);
登录后复制

POST请求携带参数

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('POST', 'https://www.baidu.com');
// 调用 xhr.send() 函数
// 设置头部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('');
// 监听 load 事件
xhr.addEventListener('load', function()
console.log('load事件');
);
登录后复制

responseType
XMLHttpRequest.responseType 属性是一个枚举类型的属性，设置返回响应数据的类型。
react.js
javascript
前端 参考技术D 在React中，可以使用react-image-gallery插件来实现图片预览，并在图片预览中增加下载按钮。使用这个插件，可以很容易地实现图片的预览和下载的功能，而且它支持多种主流浏览器。