在uniapp中我使用了exceljs库导出excel表，我在电脑pc端直接点击按钮生成excel表，也可以打开，但是在手机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 = URL.createObjectURL(blob);
// 创建一个<a>标签并设置下载链接
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', '数量表.xlsx');
// 触发点击事件进行下载
link.click();
// 释放URL对象
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)
}
} else {
this.exportExcel22(this.searchResults)
}
},
引用 皆我百晓生 小程序回复内容作答：
在移动端无法通过直接点击按钮下载文件，需要通过其他方式实现下载。以下是一种可行的解决方案：
exportExcel22方法中的代码，不使用URL.createObjectURL和<a>标签进行下载，而是将Excel文件作为响应返回给前端。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 fileName = '数量表.xlsx';
const blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
if (window.navigator.msSaveOrOpenBlob) {
// 针对IE浏览器
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
// 非IE浏览器，使用兼容性写法
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.href = url;
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
});
}
exportExcel方法中，用uni.downloadFile方法下载Excel文件。exportExcel() {
if (this.searchResults.length == 0) {
if (this.list1.length == 0) {
uni.showToast({
title: '请进行筛选',
icon: 'error'
});
} else {
this.exportExcel22(this.list1);
}
} else {
this.exportExcel22(this.searchResults);
}
// 通过uni.downloadFile方法下载文件
uni.downloadFile({
url: 'http://example.com/excel.xlsx',
success: function (res) {
// 下载成功后的处理，可以弹出提示信息等
uni.showToast({
title: '下载成功',
icon: 'success'
});
},
fail: function (error) {
// 下载失败后的处理，可以弹出提示信息等
uni.showToast({
title: '下载失败',
icon: 'error'
});
}
});
}
需要注意的是，上述代码中的url参数需要替换成实际的Excel文件下载链接。另外，Android 手机上需要在 manifest.json 文件中声明相应的权限，以允许应用进行文件下载。例如：
{
"android": {
"permissions": ["android.permission.WRITE_EXTERNAL_STORAGE"]
}
}
【相关推荐】