Vue项目导入导出文件功能以及导出文件后乱码的解决方案

您所在的位置：网站首页 › vue调接口导入csv文件报错 › Vue项目导入导出文件功能以及导出文件后乱码的解决方案

Vue项目导入导出文件功能以及导出文件后乱码的解决方案

2024-06-15 06:35| 来源: 网络整理| 查看: 265

vue项目导入导出功能 1.导出2.导入3.另一种方法实现文件上传：

1.导出

导出功能其实很简单，只需要调用后端的接口即可，不过有一些需要注意的地方，具体代码如下所示：

这是导出按钮，定义导出的点击事件：

导出

js部分，调用接口，导出文件：

// 导出excel const downExcel = () => { if (state.selectedRowKeys.length == 0) { Message.warning("请先选择需要导出的数据") return } // const date = moment(new Date()).format("YYYY-MM") const params = { exportUserIds: state.selectedRowKeys } const hideLoading = message.loading("文件导出中...", 0) apiDownExcel(params) .then((res: any) => { if (res.status == 200) { const system = window.navigator.platform == "Win32" ? "window" : "mac" const link = document.createElement("a") const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }) link.href = URL.createObjectURL(blob) link.download = `月度薪资.${system == "mac" ? "xlw" : "xls"}` //下载的文件名 document.body.appendChild(link) link.click() document.body.removeChild(link) } }) .finally(() => { setTimeout(hideLoading, 0) }) }

在这里需要注意的是：点击导出按钮，接口跑通后，文件会成功导出，不过打开文件会出现乱码，这个时候我们需要配置下接口，具体代码如下所示：

// 导出月度薪资 export const apiDownExcel = (params: object) => { return request({ url: "/api/slaughter_smart/mySalaryMonthResult/exportExcel", method: "post", data: params, responseType: "blob", }) }

需要设置 ** responseType: “blob” ** 即可正常打开该文件。

2.导入

导入功能也不难，ant-design-vue已经封装了上传组件，我们按照upload上传组件开发即可，具体代码如下所示：

【本文地址】

Vue项目导入导出文件功能以及导出文件后乱码的解决方案

Vue项目导入导出文件功能以及导出文件后乱码的解决方案

今日新闻

推荐新闻