钉钉小程序移动端下载文件的解决方案.
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... 处获得。