原生H5实现文件下载
2023-09-03 本文已影响0人
h2coder
环境说明
- 前端
- axios
- 原生JavaScript
- 后端
- node.js：v16.19.1
- express：4.18.2（接口快速开发框架）
- cors：2.8.5（处理跨域的包）
原理
- 通过XHR或
axios，发送文件下载请求，以axios为例，设置responseType为blob，表示是文件下载请求 - 点击按钮，发送文件下载请求，通过document.createElement("a")，动态创建一个a标签，但不要添加到页面上
- 设置a标签的
href属性和download属性，href属性设置为文件下载的接口地址，download属性设置文件下载后的文件名 - 调用a标签对象的
click方法，模拟a标签点击
前端
编写页面（index.html）
- 点击下载按钮，触发下载请求，选择保存的磁盘位置，即可发起下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下载功能</title>
</head>
<body>
<!-- 直接这么写，不是下载，而是跳转!! -->
<!-- <a href="https://cdn-getuigw.getui.com/getuipush.pdf">下载吧</a> -->
<!-- 这样写可以下载 -->
<!-- <a download="aaa.pdf" href="http://localhost:4000/file">下载吧</a> -->
<!--
1、前端要获取到后台生成文件
2、让前端浏览器触发下载行为，利用a标签自身的能力来实现
- 创建一个新的a标签
- 设置a标签的关键属性
- 设置href属性，等于要下载文件资源
- 设置download属性，表示要下载
- 模拟a标签的点击行为
-->
<button>下载</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const button = document.querySelector("button");
button.addEventListener('click', async function (e) {
// 使用axios，后台发起请求，请求文件资源
const result = await axios({
url: "http://127.0.0.1:4000/file",
// 请求文件，设置期望后端返回数据类型，blob
// b：binary，也就是二级制流
// l：large，大
// o：object，对象
// 所以，blob：大文件
responseType: "blob"
});
// 前端模拟a标签
const a = document.createElement("a");
// 传入二进制流,返回可以访问到的，字符串类型的url
const url = URL.createObjectURL(result.data);
// 设置url为文件下载路径
a.href = url;
// 设置下载的文件名
a.download = "abc.txt";
// 模拟a标签点击
a.click();
});
</script>
</body>
</html>
后端
准备本地文件
data目录，1.txt 文件
我是测试文本
编写接口（index.js）
- 启动一个web服务端，监听4000端口。
- 再编写一个
file接口，接口地址：http://127.0.0.1:4000/file - 读取本地data目录下的1.txt，并返回文件流
// 1 引入包
const express = require("express")
const cors = require("cors")
const fs = require("fs")
const path = require("path")
// Web开发框架
const app = express()
// 跨域资源共享，解决跨域问题
app.use(cors())
// 2 定义接口 路由
app.get("/file", (req, res) => {
console.log('接收到文件下载请求...');
// 文件路径
const filePath = path.join(__dirname, "./data/1.txt")
// 同步读取文件
const file = fs.readFileSync(filePath)
// 返回二进制文件流
res.send(file)
console.log("响应文件结束...");
})
// 3 开启监听
const port = 4000
app.listen(port, () => {
console.log(`启动成功，监听${port}端口...`);
})
