美甲微应用附件下载程序

钉钉微应用附件下载方案

最近在做一个微应用的报表项目，有关在钉钉微应用中下载Excel或其它文件附件时，从网上找了许多方案，并没有实现对应的效果，因此将我的方案记录一下

传统思路

在前后端分离的Vue项目中，我们一般下载文件的思路是后端返回文件流，利用Js的Blob对象，模拟a标签的点击事件，实现文件的下载，在大部分浏览器中，使用这种方式是没有问题的，但是刚好本项目是嵌套在了钉钉的微应用中，因此无法进行下载附件。那么需要另外寻找解决办法。

微应用内思路

针对前段文件下载的思路，可以直接将文件下载的链接利用钉钉微应用的能力，打开新的窗口，窗口的URL为附件的下载链接，这样，钉钉内部会直接判断当前为下载链接跳转到本地浏览器进行下载，这样就可以实现在微应用进行附件下载了。

实现代码

传统方式

• axio请求

// 下载excel
export function getReportDownloadExcel(params) {
  return axios({
    url: '/downloadExcel',
    method: 'GET',
    responseType: 'blob',
    params: {
      ...params
    }
  })
}

• 前端接收到文件流后的下载处理

getReportDownloadExcel({reportCode: this.pageCode, deptCode: this.deptCode}).then(res => {
    const fileName = this.year + '年' + this.month + '月' + this.phaseDict[this.phase] + this.excelName
    const blob = res
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName)
    } else {
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        // 此写法兼容可火狐浏览器
        document.body.appendChild(link)
        const evt = document.createEvent('MouseEvents')
        evt.initEvent('click', false, false)
        link.dispatchEvent(evt)
        document.body.removeChild(link)
    }
})

• 后台的文件导出处理,一般只要把文件流写出到response中，设置相应的ContentType即可。下面代码作为示例。

@GetMapping("/downloadExcel") 
public void downloadExcel(String reportCode, String deptCode, HttpServletResponse response) {
        ReportEnterpriseScoreExcelDTO result = reportInfoService.getExcelList(reportCode, deptCode);
        ExportParams exportParams = new ExportParams();
        Workbook workbook = ExcelExportUtil.exportExcel(exportParams, ReportEnterpriseScoreExcel.class, result.getExcelList());
        try {
            OutputStream outputStream = response.getOutputStream();
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", "attachment; filename="
                    + URLEncoder.encode(result.getFileName(), "UTF-8"));
            workbook.write(outputStream);
            outputStream.flush();
            outputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

钉钉微应用

在钉钉中，以上方式的文件下载不可行，此时，我们只需要判断是否在钉钉环境中，利用钉钉环境的打开窗口功能直接重定向到下载链接即可

• 钉钉微应用处理

 dd.biz.util.openLink({
     url: 'process.env.VUE_APP_API_BASE_URL + '/report/enterpriseScore/downloadExcel?reportCode=' + this.pageCode + '&deptCode=' + this.deptCode',要打开链接的地址
     onSuccess: (result) => {
		// 打开成功，会跳转手机本地浏览器进行文件下载
     },
     onFail: (err) => {
		// 说明不在钉钉环境，或打开失败
       // 这里为了适配传统的下载方式，当调用失败后在这里调用getReportDownloadExcel
     }
 }).catch(err => {
      // 说明不在钉钉环境，或打开失败   
        // 这里为了适配传统的下载方式，当调用失败后在这里调用getReportDownloadExcel
 }