2024年最新Vue项目导入导出csv文件(1)，跳槽面试大厂被拒

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

安装vue插件papaparse

npm install papaparse

如果安装慢的话，可以使用淘宝镜像试一下。如果安装时出问题导致整个项目都崩盘直接跑不起来的话也没关系，删掉所有依赖重新装一遍就行了！ “npm install”

插件使用

首先，导出的数据一定得是一个列表，一个对象列表，例如：

itemList: [

{

name: “红木”,

type: “P000001”,

price: “￥88888”

},

{

name: “水杉”,

type: “P000002”,

price: “￥2000”

}

]

写一个按钮，点击按钮的时候把数据导出csv文件：

<a-button type=“primary” @click=“exportCsv()”>导出指令

点击按钮调用 exportCsv 方法，首先在script里面引用一下库

import Papa from ‘papaparse’

接下来是 exportCsv 方法的实现：

/**

• by wjw

• 导出指令csv文件

*/

exportCsv(){

var csv = Papa.unparse(this.itemList);

//定义文件内容，类型必须为Blob 否则createObjectURL会报错

let content = new Blob([csv]);

//生成url对象

let urlObject = window.URL || window.webkitURL || window;

let url = urlObject.createObjectURL(content);

//生成DOM元素

let el = document.createElement(“a”);

//链接赋值

el.href = url;

el.download = “文件导出.cvs”;

//必须点击否则不会下载

el.click();

//移除链接释放资源

urlObject.revokeObjectURL(url);

},

可以了。这样的话点击按钮之后就可以将数据转成csv文件导出到本地。但是记住哈，数据一定要符合格式，每条数据都是一样的。

可以参考一下这篇博客：https://blog.csdn.net/mmorss/article/details/82586743

导入

---

首先一样，写一个上传文件的按钮，点击打开文件上传对话框，选择csv文件那种。

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素