js 读取本地文件 做成 下载链接的方法
时间: 2024-03-25 21:39:40 浏览: 38
可以使用 JavaScript 中的 File API 来读取本地文件,并将其转换成 Blob 对象,然后将 Blob 对象转换成 URL,最后通过创建一个下载链接,让用户点击该链接即可下载文件。以下是一个简单的示例代码:
```javascript
// 获取文件输入框
const fileInput = document.getElementById('file-input');
// 监听文件选择事件
fileInput.addEventListener('change', () => {
// 获取选中的文件
const file = fileInput.files[0];
// 创建 FileReader 对象
const reader = new FileReader();
// 监听文件读取完成事件
reader.addEventListener('load', () => {
// 将文件内容转换成 Blob 对象
const blob = new Blob([reader.result], { type: file.type });
// 创建 URL
const url = URL.createObjectURL(blob);
// 创建下载链接
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = file.name;
downloadLink.innerHTML = '下载';
// 将链接添加到页面中
document.body.appendChild(downloadLink);
});
// 开始读取文件
reader.readAsArrayBuffer(file);
});
```
以上示例代码中,我们首先获取文件输入框,并监听其文件选择事件。当用户选择文件后,我们使用 FileReader 对象读取文件内容,并将其转换成 Blob 对象。然后使用 URL.createObjectURL 方法将 Blob 对象转换成 URL,并创建一个下载链接,让用户点击该链接即可下载文件。注意,我们在链接中设置了 download 属性,这可以让浏览器将链接指向的文件下载到本地。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)