前端下载文件时先打开系统文件目录，把文件下载到选择的指定目录
功能实现关键Api showSaveFilePicker 可以打开文件目录之后返回文件对象对文件进行读写操作，类似node fs的文件读写，但是这个Api兼容性有些问题如下。如果只考虑window 10,11系统用户还是可以用一下的。
以下是.docx文件的例子
<!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>
<button id="button">另存为</button>
</body>
<script>
// 加载文件
const loadingFile = (path = '') => {
const params = {
headers: {
'Content-Type': 'application/json' },
responseType: 'blob'
}
return fetch(path, params)
}
// MIME类型
const MIME_MAP = new Map([
['.docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
])
// blob转ArrayBuffer
const blobToArrayBuffer = (blob) => {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.addEventListener('load', () => resolve(reader.result))
reader.addEventListener('error', () => reject(`文件转化失败！`))
reader.readAsArrayBuffer(blob)
})
}
// 文件地址
const filePath = `http://localhost:5500/1.docx`
window.addEventListener('load', () => {
const button = document.querySelector('#button')
button.addEventListener('click', () => {
loadingFile(filePath)
.then((response) => {
// 取出文件
return response.blob()
}).then((blob) => {
// 类型转化
return blobToArrayBuffer(blob)
}).then(async (buffer) => {
const fileType = '.docx'
const options = {
// 默认另存文件名
suggestedName: '测试文件',
types: [
{
description: 'docx',
accept: {
[MIME_MAP.get(fileType)]: [fileType] }
}
]
}
const fileHandle = await showSaveFilePicker(options)
const writable = await fileHandle.createWritable()
await writable.write(buffer)
await writable.close()
}).catch((error) => {
console.log(error)
})
})
})
</script>
</html>
如果有更好的建议欢迎回复~