钉钉h5怎么支持批量下载

钉钉h5怎么支持批量下载

钉钉H5微应用提供了`biz.util.downloadFile`接口用于文件下载,但该接口仅支持PC端,移动端不支持。若需批量下载,PC端可直接循环调用`window.location.href`,但需注意添加延迟,避免触发浏览器限制。钉钉环境则需在`dd.ready`回调中调用`dd.downloadFile`,并确保URL为绝对路径,同时添加文件后缀。虽然可以通过循环调用实现批量下载,但用户仍需手动确认多次,目前尚无一次性批量下载的完美解决方案,建议优先考虑打包下载。

 次点击
8 分钟阅读

前言

钉钉h5不支持pc端端端windows.location.href的方式进行下载、若需批量处理,开发者可在前端实现循环调用此接口,依次触发多个文件的下载操作。(最好还是压缩成压缩包、下载一次就行了、原因下文有提及)

钉钉H5微应用提供了“下载文件”JSAPI,可通过biz.util.downLoadFile接口实现文件下载功能,该接口支持在PC端使用,但不支持Android和iOS移动端。文档可以点击https://open.dingtalk.com/document/orgapp/download-objects

具体实现

需要注意:

  1. import * as dd from 'dingtalk-jsapi';这里需要先引人

  2. 钉钉h5在下载文件的时候要确保url是绝对路径

  3. 钉钉h5在下载文件的时候记得给下载的文件添加上文件类型后缀

  4. 代码里面这一步是获取链接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目前并不能达到用户点击一次批量下载就把所有文件都下载下来的要求。

© 本文著作权归作者所有,未经许可不得转载使用。