更新记录

1.0.0(2024-11-28) 下载此版本

1、实现自定义文件写入数据并保存到手机本地目录中


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

heyuan-writeFile

功能

  1. 保存/写入文件到本地目录中

我们在做原生App开发的时候,文件操作都是很方便的,但是在uni-app里面可能就头大了。

如果你像我一样项目里想要实现一个保存json文件到本地的功能,相信你也是到处找遍了资料,插件市场里相关资料也少的可怜, 可能最后也没整出个实现方法来。所以也是希望自己的整理能帮助到更多的开发者,大家觉得ok可以动动小手点个赞👍🏻

实现方式: 安卓端是通过native.js的方式,调用安卓原生的io操作api来写入和保存文件 iOS端是通过Html5+里的plus.io操作来实现写入和保存文件

本插件可以成功保存json和txt格式文件,如果想要保存excel等文件,需要自己额外处理下数据格式。

快速集成

  1. 点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目
  2. 点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules 目录下

使用方法

  1. 在需要保存文件的页面,在js中定义本插件中的 writeFile方法

参数解释: data: 你需要保存的数据,这里是以String方式保存 fileName: 保存的文件名, 例如test.json、test.txt

writeFile(data, fileName) {
  // #ifdef APP-PLUS
  let isAndroid = plus.os.name === 'Android'
  // 安卓端保存文件
  // 需要通过native.js来实现文件的读写
  // 同样通过native.js实现文件自定义位置保存
  if (isAndroid) {
    let filePath = '/storage/emulated/0/Download/' + fileName
    // 只能用于安卓 导入java类
    const File = plus.android.importClass('java.io.File')
    const BufferedReader = plus.android.importClass('java.io.BufferedReader')
    const FileReader = plus.android.importClass('java.io.FileReader')
    const FileWriter = plus.android.importClass('java.io.FileWriter')
    // 安卓11以下 /sdcard/自己的文件夹/文件名
    // 安卓11 建议用 /storage/emulated/0/Download/文件名
    // 写文件 writeFile("/sdcard/or/result.json",{"key":"value"})
    const writeFile = (fileName, data) => {
      try {
        // 不加根目录创建文件(即用相对地址)的话directory.exists()这个判断一值都是false
        const n = fileName.lastIndexOf('/')
        if (n !== -1) {
          const fileDirs = fileName.substring(0, n)
          const directory = new File(fileDirs)
          // 目录不存在的话,先创建目录
          if (!directory.exists()) {
            const a = directory.mkdirs()
          }
        }
        const file = new File(fileName)
        // 文件不存在的话,先创建文件
        if (!file.exists()) {
          file.createNewFile()
        }
        const fos = new FileWriter(fileName, false)
        fos.write(data)
        fos.close()
      } catch (e) {
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      }
    }
    // 写入文件
    writeFile(filePath, data)
  } else {
    // iOS端保存文件
    // 需要通过plus.io来实现文件读写
    // 再通过uni.saveFile保存在应用沙盒目录中
    // 最后调用uni.openDocument来打开文件,打开后自己选择保存位置,从而实现文件自定义位置保存
    plus.io.requestFileSystem(
      plus.io.PUBLIC_DOWNLOADS,
      (fs) => {
        let rootPath = fs.root.toURL()
        let fileUrl = rootPath + '/' + fileName //文件目标位置

        // 创建或打开文件, fs.root是根目录操作对象, 直接fs表示当前操作对象;
        // create:true文件不存在则直接创建,false则不会自动创建
        fs.root.getFile(
          fileUrl, {
            create: true
          },
          (fileEntry) => {
            console.log('get file suc, path is', fileEntry.fullPath)
            fileEntry.createWriter(
              (writer) => {
                // 写入文件成功完成的回调函数
                writer.onwrite = (e) => {
                  let path = e.target.fileName
                  console.log('write suc, path is', path)
                  uni.saveFile({
                    tempFilePath: path,
                    success(res) {
                      console.log('saveFile suc')
                      uni.openDocument({
                        filePath: res.savedFilePath,
                        success() {
                          console.log('openDocument suc')
                        }
                      })
                    },
                    fail() {
                      console.log('1', error)
                      uni.showToast({
                        title: '保存失败',
                        icon: 'none'
                      })
                    }
                  })
                }
                writer.seek()
                // 写入数据
                writer.write(data)
              },
              (error) => {
                console.log('2', error)
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                })
              }
            )
          },
          (error) => {
            console.log('3', error)
            uni.showToast({
              title: '保存失败',
              icon: 'none'
            })
          }
        )
      },
      (error) => {
        console.log('4', error)
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      }
    )
  }
  // #endif
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问