csv文件导出
安装命令
npm install --save csv-exportor
别忘了在script引用一下
-
import CsvExportor from "csv-exportor";
<templete>
<el-button type="primary" @click="outDialogVisible=true">导出</el-button>
<!-- 导出 -->
<el-dialog
v-dialogDrag
title="导出"
:visible.sync="outDialogVisible"
width="50%"
>
<el-form label-width="120px">
<el-form-item label="文件名" :model="File">
<el-input v-model="File.fileName"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="outDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="inPut(File.fileName)">确 定</el-button>
</span>
</el-dialog>
</templete>
<script>
import CsvExportor from "csv-exportor";
data(){
return{
outDialogVisible:false,
File:{
fileName:''
},
}
}
methods:{
async inPut(fileName){
const header=['序号','工号','姓名','职务','职称','技术等级','基本绩效绩点数','业绩绩效金额']
const { data: res } = await this.$axios.post(this.SearchAllUrl
);
console.log(this.header)
CsvExportor.downloadCsv(res.data,{header},fileName+ ".csv");
outDialogVisible=false
},
},
}
</script>
(2)
- 安装vue插件papaparse
npm install papaparse
- 使用
<templete>
<a-button type="primary" @click="exportCsv()">导出指令</a-button>
</templete>
<script>
import Papa from 'papaparse'
export default{
data: function() {
return {
isShowLast: false,
tableData: [],
itemList: [
{
name: "红木",
type: "P000001",
price: "¥88888"
},
{
name: "水杉",
type: "P000002",
price: "¥2000"
}
]
};
},
methods: {
download() {
console.log("downLoad");
var csv = Papa.unparse(this.itemList);
console.log("downLoad", csv);
//定义文件内容,类型必须为Blob 否则createObjectURL会报错
let content = new Blob([csv]);
//生成url对象
let urlObject = window.URL || window.webkitURL || window;
let url = urlObject.createObjectURL(content);
//生成<a></a>DOM元素
let el = document.createElement("a");
//链接赋值
el.href = url;
el.download = "todo文件导出.cvs";
//必须点击否则不会下载
el.click();
//移除链接释放资源
urlObject.revokeObjectURL(url);
}
}
}
</script>
csv文件导入
<el-upload
ref="upload"
action
:limit="1"
:file-list="fileList"
:auto-upload="false"
:http-request="httpRequest"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
httpRequest(param) {
let fileObj = param.file; // 相当于input里取得的files
let fReader = new FileReader();
fReader.readAsDataURL(fileObj);
fReader.onload = evt => {
// 检查编码
let encoding = this.checkEncoding(evt.target.result);
// 将csv转换成二维数组
Papa.parse(fileObj, {
encoding,
complete: res => {
// UTF8 \r\n与\n混用时有可能会出问题
let data = res.data;
if (data[data.length - 1] == "") {
//去除最后的空行
data.pop();
}
console.log(data);
}
});
};
},
// 检查编码,引用了 jschardet
checkEncoding(base64Str) {
// 这种方式得到的是一种二进制串
let str = atob(base64Str.split(";base64,")[1]);
// 要用二进制格式
let encoding = jschardet.detect(str);
encoding = encoding.encoding;
if (encoding == "windows-1252") {
// 有时会识别错误(如UTF8的中文二字)
encoding = "ANSI";
}
return encoding;
}