前言
钉钉h5不支持pc端端端windows.location.href的方式进行下载、若需批量处理,开发者可在前端实现循环调用此接口,依次触发多个文件的下载操作。(最好还是压缩成压缩包、下载一次就行了、原因下文有提及)
钉钉H5微应用提供了“下载文件”JSAPI,可通过biz.util.downLoadFile接口实现文件下载功能,该接口支持在PC端使用,但不支持Android和iOS移动端。文档可以点击
具体实现
需要注意:
import * as dd from 'dingtalk-jsapi';这里需要先引人
钉钉h5在下载文件的时候要确保url是绝对路径
钉钉h5在下载文件的时候记得给下载的文件添加上文件类型后缀
代码里面这一步是获取链接const url = await store.getFile(attachment.file, 'data')
// 钉钉环境判断
const { platform } = getENV();
const isInDingTalk = platform !== 'notInDingTalk';
// 批量下载发票附件
async function batchDownloadInvoices() {
isDownloading.value = true;
try {
// 收集所有发票附件
const allAttachments = store.data.invoices
.filter(invoice => invoice.ossUrl)
.map(invoice => ({
name: `发票附件_${invoice.ossUrl}`,
file: invoice.ossUrl
}));
if (isInDingTalk) {
// 钉钉环境使用 biz.util.downloadFile
await downloadFilesInDingTalk(allAttachments);
} else {
// PC环境使用传统下载
await downloadFilesInPC(allAttachments);
}
} finally {
isDownloading.value = false;
}
}
// PC环境下载实现
async function downloadFilesInPC(allAttachments) {
for (const attachment of allAttachments) {
const url = await store.getFile(attachment.file, 'data');
window.location.href = url;
await new Promise(resolve => setTimeout(resolve, 500)); // 添加延迟
}
}
// 钉钉环境下载实现
async function downloadFilesInDingTalk(attachments) {
for (const attachment of attachments) {
try {
const url = await store.getFile(attachment.file, 'data');
const absoluteUrl = url.startsWith('http') ? url :
new URL(url, window.location.origin).href;
const fileName = attachment.name;
// 钉钉下载API调用
dd.ready(() => {
dd.downloadFile({
url: absoluteUrl,
name: fileName,
success: () => console.log('下载成功'),
fail: (err) => console.error('下载失败', err)
});
});
// 添加延迟避免钉钉限制
await new Promise(resolve => setTimeout(resolve, 500));
} catch (error) {
console.error(`下载失败: ${attachment.name}`, error);
}
}
}效果展示
你点击一次批量下载、它就会循环调用下载、也就是说需要你一直选择保存
如果有10个文件、那用户就得选择10次、其实这种方式很差劲、但是钉钉h5目前并不能达到用户点击一次批量下载就把所有文件都下载下来的要求。
