在谷歌浏览器中,已经设置“下载PDF文件,而不是在chrome中自动打开它们”选项为关闭状态时,前端实现el-link谷歌浏览器点击超链接强制下载图片而不是预览
时间: 2024-06-12 13:04:49 浏览: 248
可以通过设置响应头的Content-Disposition属性来实现强制下载。具体步骤如下:
1. 后端设置响应头
在后端返回图片的响应头中添加Content-Disposition属性,值为"attachment; filename=xxx.jpg",其中xxx为文件名。这会告诉浏览器要强制下载该文件,而不是在浏览器中预览。
示例代码(使用Node.js):
```javascript
const fs = require('fs');
const http = require('http');
http.createServer((req, res) => {
const filePath = './test.jpg';
const stat = fs.statSync(filePath);
res.writeHead(200, {
'Content-Type': 'image/jpeg',
'Content-Length': stat.size,
'Content-Disposition': 'attachment; filename=test.jpg'
});
const stream = fs.createReadStream(filePath);
stream.pipe(res);
}).listen(3000);
```
2. 前端创建超链接
在前端使用el-link创建超链接时,将href属性设置为后端接口地址即可。
示例代码:
```html
<el-link href="http://localhost:3000/download">下载图片</el-link>
```
注意事项:
- 后端接口需要返回图片的二进制数据。
- 如果图片较大,建议使用流的方式读取和写入文件,避免一次性加载到内存中。
阅读全文