有一个前端的需求,需要远程文件存到本地,但是要拉起windows的文件系统
当前代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download and Save File</title>
</head>
<body>
<button id="saveDocxButton" data-url="http://192.168.0.166:8083/excel/ww.docx">下载docx</button>
<button id="saveZipButton" data-url="http://192.168.0.166:8083/excel/111.zip">下载zip</button>
<script>
async function downloadAndSaveFile(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('网络请求失败');
}
const fileData = await response.blob();
const urlSegments = url.split('/');
const fileOldName = urlSegments[urlSegments.length - 1];
const fileExtension = fileOldName.split('.').pop().toLowerCase();
let mimeType = '';
switch (fileExtension) {
case 'zip':
mimeType = 'application/zip';
break;
case 'txt':
mimeType = 'text/plain';
break;
case 'pdf':
mimeType = 'application/pdf';
break;
case 'jpg':
case 'jpeg':
mimeType = 'image/jpeg';
break;
case 'png':
mimeType = 'image/png';
break;
case 'doc':
case 'docx':
mimeType='application/vnd.openxmlformats-officedocument.wordprocessingml.document';
break;
case 'mp4':
mimeType = 'video/mp4';
break;
case 'mp3':
mimeType = 'audio/mpeg';
break;
default:
alert('不支持'+fileExtension+'类型');
return;
}
const fileName = prompt('请输入文件名', fileOldName);
if (!fileName) return;
const options = {
suggestedName: fileName , // 用户输入的文件名
types: [{ description: `${fileExtension.toUpperCase()} 文件`, accept: { [mimeType]: [`.${fileExtension}`] } }] // 动态文件类型和后缀
};
const fileHandle = await window.showSaveFilePicker(options);
const writableStream = await fileHandle.createWritable();
await writableStream.write(fileData);
await writableStream.close();
console.log('文件保存成功!');
} catch (error) {
console.error('保存文件时出错:', error);
}
}
document.getElementById('saveDocxButton').addEventListener('click', (event) => {
const url = event.target.getAttribute('data-url');
downloadAndSaveFile(url);
});
document.getElementById('saveZipButton').addEventListener('click', (event) => {
const url = event.target.getAttribute('data-url');
downloadAndSaveFile(url);
});
</script>
</body>
</html>
问题
我看函数
showSaveFilePicker
目前只支持:chrome、edge;
需求
需要满足所有游览,点击下载打开系统的本地文件系统进行存储。
有没有大佬知道还有其他方式的,万分感谢
为啥不直接给用户下载链接哪?
好家伙,人家打开个网页,就往人家电脑里存一个文件,黑客狂喜
额 我想的是创建个a标签 设置download属性 然后设置隐藏 点击按钮事件后 手动触发a链接点击事件 这样不可以么
感觉不行,应该只能打开本地文件,远程不行
本地可以,远程估计没有权限的嘛,可能不太行
用php-webview 开发个客户端把 ,选择保存的目录, 后续瞎下载的文件前端获取文件流后,php往那个地方写文件就行。
客户端一样可以webview 嵌入iframe 吧
浏览器应该是没戏。要不生成迅雷下载链接地址,如果用户有装迅雷 可以触发迅雷下载
浏览器应该不行的 只能下载,你不能指定存到哪里去 这个很久以前就研究过