vue中csv文件的导入、导出

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;
}