前端文件选择目录另存为

最新推荐文章于 2024-07-30 18:36:42 发布

JeTanO

最新推荐文章于 2024-07-30 18:36:42 发布

阅读量3.7k

点赞数 1

分类专栏：前端功能点文章标签：前端 javascript js 经验分享

本文链接：https://blog.csdn.net/JeTanO/article/details/130984958

版权

前端功能点专栏收录该内容

1 篇文章

订阅专栏

前端文件另存为

前端下载文件时先打开系统文件目录，把文件下载到选择的指定目录
以下是.docx文件的例子

前端下载文件时先打开系统文件目录，把文件下载到选择的指定目录

功能实现关键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>