钉钉小程序移动端下载文件的解决方案.

create by db on 2024-2-6 18:10:53

Recently revised in 2024-2-6 18:10:53

闲时要有吃紧的心思，忙时要有悠闲的趣味

钉钉小程序移动端下载文件的解决方案.
前言
正文
总结
- 参考文档
文档协议

前言

返回目录

最近在开发钉钉小程序的第三方企业应用，其中存在下载PDF文件的需求。

关于移动端下载文件，钉钉小程序存在些坑，现在记录一下。

正文

一、问题出现

返回目录

因为要在钉钉上开发第三方应用及H5页面，因此首要的就是看文档呗。

在钉钉开放平台文档中，存在两API， dd.downloadFile以及FileSystemManager.saveFile，并且都支持程序。

这不就妥了，现成可以用的。直接使用dd.downloadFile来下载文件，并使用FileSystemManager.saveFile将文件保存到本地，完美。

用了之后就傻眼了，在移动端（包括安卓和IOS）两个API 调用都可以成功，然而文件却无法保存到手机上。

经过一系列的尝试，确认钉钉小程序在移动端没办法直接下载文件，只能提工单找钉钉帮忙了。钉钉提工单的位置在钉钉开放平台，点击AI助理输入工单即可，具体位置。

在这要给钉钉的工单中心点个赞，恢复真的蛮及时的！

经工单沟通，获悉

dd.biz.util.downloadFile是微应用的jsapi非小程序的jsapi，并且仅支持pc端调用的，目前没有直接下载文件到手机内部的方案呢，使用小程序的文件管理器FileSystemManager.saveFile，保存到的是钉钉提供的小程序沙箱里，不是保存到手机设备里的。
下载API, 钉钉这边是没有的了你可以参考外部的方法下载预览例如pdf.js插件
预览的话，可以转存文件到钉盘，再调用钉盘预览文件的接口来预览，没有直接预览的方案

二、解决方案

返回目录

最终经过各方面了解，采取的解决方案为

转存钉盘相关API为dd.saveFileToDingTalk
调用钉盘预览文件的接口来预览:相关API为dd.previewFileInDingTalk
在预览界面有下载的方式，可以直接下载

三、上代码

因为我们是小程序H5页面，因此首先在使用H5向小程序通信，告知要下载的文件；非H5同学可以忽略此步骤

ts 复制代码

  const downloadFile = (url: string, name: string) => {
    // 判断当前是否处于钉钉环境
    if (navigator.userAgent.toLowerCase().indexOf("dingtalk") > -1) {
      // 下载dd资源
      if (!window.dd) {
        let script = document.createElement("script");
        script.src = "https://appx/web-view.min.js";
        script.async = true;
        document.head.appendChild(script);
      }
      // H5向钉钉小程序通信
      window.dd && window.dd.postMessage({ name, url });
    }
  };

在小程序web-view 组件中接受onMessage, 非H5同学可以忽略此步骤首先是 webview.axml文件中，注册事件

html 复制代码

  <web-view id="web-view-1" src="{{src}}" onMessage="test"></web-view>

还有webview.js文件中

js 复制代码

  onLoad (options) {
    // 注册事件
    this.webViewContext = dd.createWebViewContext('web-view-1');
    // 更新路径
    if (options.src) {
      const src = decodeURIComponent(options.src)
      this.setData({
        src
      })
    }
  },
  test (e) {
    // 获取数据
    let { name, url } = e.detail
    // 保存至钉盘
    dd.saveFileToDingTalk({
      url,
      name,
      success: (res) => {
        const { data = [] } = res;
        if(!data.length) return
        const {
          fileId = "",
          fileName = "",
          fileSize = 0,
          fileType = "",
          spaceId = "" } = data[0]
          // 保存成功调起预览
        dd.previewFileInDingTalk({
          spaceId: spaceId,
          fileName: fileName,
          fileSize: fileSize,
          fileSize: fileType,
          fileId: fileId,
          success: () => {
            // console.log('预览成功===', data)
          },
          fail: () => {
            // console.log('预览失败===')
          },
          complete: () => {
            // console.log('结束===')
          },
        });
      },
      fail: () => { },
      complete: () => { },
    });
  },

总结

返回目录

希望钉钉文档及生态越来越好，希望大家Bug越来越少！

2024，开工大吉！

参考文档

钉钉开发者社区

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议

db 的文档库由 db 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

基于 github.com/danygitgit上的作品创作。

本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by... 处获得。