您现在的位置是：网站首页> 编程资料编程资料

Vue项目导入导出文件功能以及导出文件后乱码问题及解决_vue.js_

2023-05-24 367人已围观

简介 Vue项目导入导出文件功能以及导出文件后乱码问题及解决_vue.js_

vue项目导入导出功能

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上传组件开发即可，具体代码如下所示：

 导入

解析：

action是上传文件请求的路径，headers里面设置了token，accept表示接受文件的格式，multiple表示是否上传多个文件，showUploadList表示是否展示uploadList，@change则表示上传文件改变时的状态，上传文件有三种状态，分别是uploading、done以及error。

使用action作为上传文件的接口路径，通常是没有携带token的，所以需要在请求头里自定义带上token。

文件上传后js部分代码：

// 文件状态 -- 上传文件后更新列表 const uploadChangeHandle = (data: any) => { if (data.file.status == "done") { Message.success("文件导入成功") getList() } if (data.file.status == "error") { Message.error(data.file.response.message ? data.file.response.message : "文件导入失败") getList() } }

当然，还有其他的情况，还可以使用自定义上传的方式，通过customRequest覆盖默认上传的方式

3.另一种方法实现文件上传

接口部分：

// 导入月度薪资 export const apiImportExcel = (params: any) => { return request({ url: '/api/slaughter_smart/mySalaryMonthResult/importExcel', method: 'post', data: params, headers: { 'Content-Type': 'multipart/form-data' } }) }

html部分：

 模板下载 
(注：请按照模板进行设计，如与模板不符将无法录入)
 上传文件  上传文件 
{{ item.name }}
确认取消

该弹框打开后效果如下图所示：

js部分：

// 自定义导入 const customRequestChange = (options: any) => { modalDate.fileList.push(options.file) } // 点击确认上传文件 const imporSaveClick = () => { if (modalDate.fileList.length == 0) { message.warning("请选择上传的文件") return false } const params = new FormData() modalDate.fileList.forEach((item: any)=> { params.append("file", item) }) apiImportExcel(params).then((res: any)=>{ if (res.data.status == 200 && res.data.rel) { getList() message.success("上传成功！") modalDate.importVisivle = false modalDate.fileList = [] }else { message.error(res.data.message) } }) }

该写法只能上传一个文件！！！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：ElementPlus el-message-box样式错位问题及解决_vue.js_

下一篇：vue获取或者改变vuex中的值方式_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网