在
Vue中导入Excel文件的代码如下所示：
```
vue
<template>
<div>
<el-upload class="upload" action="#" :show-file-list="false" :on-change="handle
Excel" accept="'.
xlsx','.xls'" :auto-upload="false" :headers="headers">
<el-button size="
mini" type="primary">
导入</el-button>
</el-upload>
</div>
</template>
<script>
import { SetPDFile } from "@/api";
export default {
data() {
return {
headers: {
"Content-Type": "multipart/form-data;charset=UTF-8"
}
};
},
methods: {
//
导入表格
handle
Excel(file) {
let formData = new FormData(); // 声明一个FormDate对象
formData.append("formFile", file.raw); // 把文件信息放入对象
中
// 调用后台
导入的接口
SetPDFile(formData)
.then(res => {
if (res.Status && res.Data) {
this.$message.success("
导入成功");
this.getList(); //
导入表格之后可以获取
导入的数据渲染到页面，此处的方法是获取
导入的数据
} else {
this.$message.error(res.Message);
}
})
.catch(err => {
this.$message({
type: "error",
message: "
导入失败"
});
});
}
}
};
</script>
```
在上述代码
中，我们使用了`el-upload`组件来实现文件上传功能。通过设置`accept`属性来限制只能上传`.
xlsx`和`.xls`格式的文件。在`handle
Excel`方法
中，我们使用`FormData`对象来构建
表单数据，并将文件信息放入其
中。然后调用后台的
导入接口`SetPDFile`来处理上传的文件。如果
导入成功，我们会显示成功的提示信息，并调用`getList`方法来获取
导入的数据并渲染到页面上。如果
导入失败，我们会显示失败的提示信息。
#### 引用[.reference_title]
- *1* *3* [
Vue中导入excel文件的两种方式](https://blog.csdn.net/weixin_56242672/article/details/126014300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [
Vue实现
导入Excel功能](https://blog.csdn.net/wanghaoyingand/article/details/118396098)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
本文介绍了在Vue项目中利用js-xlsx库进行Excel操作的方法。首先，通过npm安装xlsx库，然后在main.js中全局引入，或者在具体页面局部引入。在实际使用中，可以结合element组件进行数据交互。
最低0.47元/天 解锁文章
扫一扫
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
