前端文件另存为
前端下载文件时先打开系统文件目录，把文件下载到选择的指定目录
功能实现关键Api showSaveFilePicker 可以打开文件目录之后返回文件对象对文件进行读写操作，类似node fs的文件读写，但是这个Api兼容性有些问题如下。如果只考虑window 10,11系统用户还是可以用一下的。
以下是.docx文件的例子
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>另存为</title></head><body><buttonid="button">另存为</button></body><script>// 加载文件const loadingFile =(path ='')=>{const params ={headers:{'Content-Type':'application/json'},responseType:'blob'}returnfetch(path, params)}// MIME类型constMIME_MAP=newMap([['.docx','application/vnd.openxmlformats-officedocument.wordprocessingml.document']])// blob转ArrayBufferconstblobToArrayBuffer=(blob)=>{returnnewPromise((resolve, reject)=>{let reader =newFileReader()
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)=>{// 类型转化returnblobToArrayBuffer(blob)}).then(async(buffer)=>{const fileType ='.docx'const options ={// 默认另存文件名suggestedName:'测试文件',types:[{description:'docx',accept:{[MIME_MAP.get(fileType)]:[fileType]}}]}const fileHandle =awaitshowSaveFilePicker(options)const writable =await fileHandle.createWritable()await writable.write(buffer)await writable.close()}).catch((error)=>{
console.log(error)})})})</script></html>
如果有更好的建议欢迎回复~
本文转载自: https://blog.csdn.net/JeTanO/article/details/130984958
版权归原作者 JeTanO 所有， 如有侵权，请联系我们删除。
版权归原作者 JeTanO 所有， 如有侵权，请联系我们删除。