前端下载本机路径文件
时间: 2024-09-19 14:08:08 浏览: 19
前端JavaScript本身并不直接支持从本地硬盘下载文件,因为浏览器的安全策略限制了JavaScript对用户文件系统的访问。但是,你可以通过一些技术间接实现这个功能:
1. 使用HTML5 File API:创建一个`<input type="file">`元素让用户选择文件,然后使用FileReader读取文件内容并将其作为URL。创建一个a标签设置href属性为数据URL或Blob URL,点击链接即可下载。
```html
<input type="file" id="fileInput">
<a id="downloadLink" style="display:none;">下载</a>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const url = URL.createObjectURL(file);
document.getElementById('downloadLink').href = url;
document.getElementById('downloadLink').style.display = 'block';
};
reader.readAsDataURL(file); // 或者用blobURL代替dataURL
});
</script>
```
2. 使用第三方库,如js-file-download或axios配合fetch等HTTP工具,先将文件读取到内存中,然后模拟发送一个POST请求到服务器,服务器处理后返回下载链接给客户端。
```javascript
const jsPDF = require('jspdf');
// ...
function downloadLocalFile(fileName) {
const fileContent = ...; // 从本地获取文件内容
const blob = new Blob([fileContent], {type: 'application/pdf'});
saveAs(blob, fileName);
}
```