uniapp中写一个h5的网页，我使用了exceljs导出一个exceljs表，但是我无法在手机app端下载保存

Question

uniapp中app跳转到我写一个h5的网页，我使用了exceljs导出一个exceljs表，但是我无法在手机app端下载保存，所以我该使用什么方法

            exportExcel22(data) {
                  const workbook = new ExcelJS.Workbook()
                  const worksheet = workbook.addWorksheet('Sheet 1')

                  // 设置标题样式
                  const titleStyle = {
                    font: {
                        bold: true
                    },
                    alignment: {
                        vertical: 'middle',
                        horizontal: 'center'
                    },
                    border: {

                        bottom: {
                            style: 'none'
                        },
                    },
                };

                // 添加标题并设置样式
                worksheet.mergeCells('A2:E2');
                worksheet.getCell('A2').value = '库存数量表';
                worksheet.getCell('A2').style = titleStyle;

                // 添加数据并设置样式
                data.forEach((item, index) => {
                    const row = 6 + index; // 从第五行开始添加数据
                    worksheet.getCell(`A${row}`).value = item.whdt_zbgno;
                    worksheet.getCell(`B${row}`).value = item.whdt_stno;
                    worksheet.getCell(`C${row}`).value = item.whdt_zbno;
                    worksheet.getCell(`D${row}`).value = item.whdt_zbna;
                    worksheet.getCell(`E${row}`).value = item.whdt_num;
                    // 添加表头
                    worksheet.getCell('A5').value = '库房编号';
                    worksheet.getCell('B5').value = '储位编号';
                    worksheet.getCell('C5').value = '装备编号';
                    worksheet.getCell('D5').value = '装备名称';
                    worksheet.getCell('E5').value = '装备数量';
                    // 设置边框样式
                    const borderStyle = {
                        top: {
                            style: 'thin'
                        },
                        right: {
                            style: 'thin'
                        },
                        bottom: {
                            style: 'thin'
                        },
                        left: {
                            style: 'thin'
                        },
                    };
                    //表头样式
                    worksheet.getCell('A5').border = borderStyle;
                    worksheet.getCell('B5').border = borderStyle;
                    worksheet.getCell('C5').border = borderStyle;
                    worksheet.getCell('D5').border = borderStyle;
                    worksheet.getCell('E5').border = borderStyle;
                    //内容
                    worksheet.getCell(`A${row}`).border = borderStyle;
                    worksheet.getCell(`B${row}`).border = borderStyle;
                    worksheet.getCell(`C${row}`).border = borderStyle;
                    worksheet.getCell(`D${row}`).border = borderStyle;
                    worksheet.getCell(`E${row}`).border = borderStyle;
                });

                // 设置所有单元格居中
                worksheet.eachRow(row => {
                    row.eachCell(cell => {
                        cell.alignment = {
                            vertical: 'middle',
                            horizontal: 'center'
                        };
                    });
                });
                // 导出Excel文件
                workbook.xlsx.writeBuffer().then((buffer) => {
                    const blob = new Blob([buffer], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    });
                    const url = window.URL.createObjectURL(blob);
                    console.log(url,'999');
                    // 创建一个<a>标签并设置下载链接
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', '库存数量表.xlsx');

                    // 触发点击事件进行下载
                    link.click();

                    // 释放URL对象
                    window.URL.revokeObjectURL(url);
                    
                });


            },
            //生成excel表
            exportExcel() {
                if (this.searchResults.length == 0) {
                    if (this.list1.length == 0) {
                        uni.showToast({
                            title: '请进行筛选',
                            icon: 'error'
                        })
                    } else {
                        this.exportExcel22(this.list1)
                        // console.log('if');
                    }

                } else {
                    this.exportExcel22(this.searchResults)
                    // console.log('else');
                }

            },

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

在uni-app中，由于app端和H5端的下载方式不同，无法直接在app端使用标签进行文件下载。可以尝试使用uni-app提供的下载保存文件的功能，具体步骤如下：

1. 在exportExcel22方法中，修改导出Excel文件的部分代码如下：

   // 导出Excel文件
   workbook.xlsx.writeBuffer().then((buffer) => {
    const blob = new Blob([buffer], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    const url = window.URL.createObjectURL(blob);
    console.log(url,'999');
    
    // 判断是否在app端
    if (uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android') {
        // 使用uni-app的下载保存文件功能
        uni.downloadFile({
            url: url,
            success: (res) => {
                // 下载成功后保存文件
                uni.saveFile({
                    tempFilePath: res.tempFilePath,
                    success: (res) => {
                        uni.showToast({
                            title: '文件保存成功',
                            icon: 'success'
                        });
                        // 可以在这里触发其他操作或者回调函数
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: '文件保存失败',
                            icon: 'error'
                        });
                    }
                });
            },
            fail: (err) => {
                uni.showToast({
                    title: '文件下载失败',
                    icon: 'error'
                });
            }
        });
    } else {
        // 在H5端直接触发点击事件进行下载
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', '库存数量表.xlsx');
        link.click();
        // 释放URL对象
        window.URL.revokeObjectURL(url);
    }
   });
   

2. 然后在exportExcel方法中调用exportExcel22方法时，将this.exportExcel22(this.list1)和this.exportExcel22(this.searchResults)改为this.exportExcel22(this.list1 || this.searchResults)，即如果this.list1有值则导出this.list1，否则导出this.searchResults。

通过这样的方式，在app端会通过uni-app的下载保存文件功能进行下载保存，而在H5端则会触发点击事件进行下载保存。