网站开发有名的公司,装饰工程造价,c做的网站,制作简单网页教程之前的这个是vue3写法#xff0c;后端是.net6Api.net6Api后台VUE3前端实现上传和下载文件全过程_vue3 下载文件-CSDN博客
在现在看来似乎搞的复杂了#xff0c;本次记录一下.net6Api后台uniapp导出Excel。
后端和之前的不一样#xff0c;前端也和之前的不一样#xff0c;…之前的这个是vue3写法后端是.net6Api.net6Api后台VUE3前端实现上传和下载文件全过程_vue3 下载文件-CSDN博客
在现在看来似乎搞的复杂了本次记录一下.net6Api后台uniapp导出Excel。
后端和之前的不一样前端也和之前的不一样只是功能看起来是一样的实现的方法截然不同本次的方法更加的简单。
一.后端.net6api
使用的是EPPlus [HttpGet]public async TaskIActionResult DownloadFile(string fileName){ExcelPackage.LicenseContext LicenseContext.Commercial;ExcelPackage.LicenseContext LicenseContext.NonCommercial;using (var package new ExcelPackage()){var worksheet package.Workbook.Worksheets.Add(Sheet1);worksheet.Cells[A1].Value Hello;worksheet.Cells[B1].Value World!;var excelBytes await package.GetAsByteArrayAsync();return File(excelBytes, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, ${fileName}.xlsx);}}
运行webapi的效果 此时点击下载文件就可以了 二.前端uniapp
前端有2种方式
1.首先创建uniapp项目。
2.下载axios和file-saver 3.使用
templatedivbutton clickdownloadExcel下载 Excel/button/div
/templatescriptimport axios from axios;import {saveAs} from file-saver;export default {methods: {async downloadExcel() {try {const response await axios.get(http://localhost:7521/api/Export/DownloadFile?fileName1, {responseType: blob, // 设置响应类型为 blob});// 创建一个 Blob 对象用于保存 Excel 数据const blob new Blob([response.data], {type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet});//第一种方式saveAs(blob, example.xlsx);//第二种方式// 创建一个隐藏的 a 标签用于触发下载// const link document.createElement(a);// link.href URL.createObjectURL(blob);// link.download 1.xlsx;// link.style.display none;// document.body.appendChild(link);// link.click();// document.body.removeChild(link);} catch (error) {console.error(下载失败, error);}},},};
/script
第一种使用的是file-saver
第二种使用的是document
三.效果
运行uniapp同时开启后端的webapi 点击下载
