前端文件选择目录另存为

这篇具有很好参考价值的文章主要介绍了前端文件选择目录另存为。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

功能实现关键Api showSaveFilePicker 可以打开文件目录之后返回文件对象对文件进行读写操作,类似node fs的文件读写,但是这个Api兼容性有些问题如下。如果只考虑window 10,11系统用户还是可以用一下的。

前端下载文件到指定目录,前端功能点,前端,javascript,js,经验分享

以下是.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>

如果有更好的建议欢迎回复~文章来源地址https://www.toymoban.com/news/detail-697971.html

到了这里,关于前端文件选择目录另存为的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于Solidworks打包的更好的方式(并保留部分文件结构)——使用“另存为”保存装配体

    目录 遇到的问题 软件版本 文件及现有打包方法情况 文件夹压缩 pack and go 具体的使用“另存为”的方法 在使用Solidworks进行工作的过程中,不可避免地需要进行组内模型的传递。这时候,装配体打包就会成为一个比较重要的问题。因为如果打包的方式不恰当,可能会出现无法

    2024年02月04日
    浏览(277)
  • word另存为pdf失败的原因及处理方法

    我们知道,Word可以通过另存为方式直接保存为PDF,其原理其实跟打印机打印差不多,PDF就是一台虚拟的打印机,但有些同学反映word另存为pdf失败,可能的原因是什么呢?又该如何处理呢? word另存为pdf失败的原因可能有以下几种: 1. PDF打印机未正确安装:确保你已经正确安

    2024年02月11日
    浏览(38)
  • html 不允许点击图片或者另存为属性

    1、html 不能点击图片属性,但是可以右击另存为 2、html 不能点击图片,同时不可以右击另存为  

    2024年02月19日
    浏览(35)
  • 【论文写作】PPT绘图并另存为高清图片

    默认情况下,要另存为图片的 PowerPoint 幻灯片的导出分辨率为每英寸 96 点 (dpi)。 若要更改导出分辨率,请执行以下步骤: 1.退出所有 Windows 程序。 2.右键单击“开始”,然后选择“运行”。 (Win+R) 3.在“打开”框中,键入“regedit”, 然后选择“确定”。 4.根据你使用的

    2024年02月04日
    浏览(40)
  • Word 文档中的图片另存为 .jpg 格式图片

    ​​​ [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

    2024年02月21日
    浏览(36)
  • VBA操作WORD(六)另存为不含宏的文档

    上面代码需要注意地方两点,也是浪费我很多时间的地方,一是如果采用标题之类作为文件名,因为包括了回车符(换行符)导致代码一直报错,需要先删掉才能保存成功。 第二点,微软官方文档SaveAs2例子的人机交互有点不是很友好,直接用InputBox让用户输入文件名(见中间

    2024年02月15日
    浏览(46)
  • vue前端预览pdf并加水印、ofd文件,控制打印、下载、另存,vue-pdf的使用方法以及在开发中所踩过的坑合集

    根据公司的实际项目需求,要求实现对pdf和ofd文件的预览,并且需要限制用户是否可以下载、打印、另存pdf、ofd文件,如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单,直接调用浏览器的预览就可以而且功能也比较全,但是一

    2024年02月16日
    浏览(166)
  • tomcat p12证书另存为nginx .crt证书和.key私钥

    Tomcat使用的.pfx或.keystore文件都是私钥及公钥证书一起的,通过pin保证安全;nginx只需要使用.pem或.crt公钥证书文件和.key私钥即可,如果原ssl证书不方便重新下载,在已有tomcat证书的情况下,需要手动导出处理。 下载openssl 1.1.1 通过命令导出文件 Over.

    2024年02月14日
    浏览(54)
  • 解决Visio另存为(或者导出)pdf字符间距变化/不均等字母间距的问题

    当用Visio导出PDF时,有时候会导致字符间距变化/不均等,这就让人头疼,觉得匪夷所思了 Microsoft Visio是一个流程图软件。Visio制作的图表范围十分广泛,可以利用Visio的强大绘图功能绘制地图、企业标志等,同时Visio支持将档案保存为svg、dwg等矢量通用格式。 解决方法: 按住

    2024年02月16日
    浏览(138)
  • uniapp使用中遇到的问题一:小程序端把当前页面另存为图片

    遇到了一个这样的需求:客户觉得页面效果好看,想保存为图片。但是呢,截图会带上手机自身的状态栏,所以开始整活! 在网上看了很多方法,总结下来一下四种: 方法一:用canvas来把页面画出来,再用uni.canvasToTempFilePath,把canvas区域保存为图片。 总结:如果你页面简单

    2024年04月15日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包