导入导出

最新推荐文章于 2024-07-03 14:13:18 发布

M-Jay

最新推荐文章于 2024-07-03 14:13:18 发布

阅读量349

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45445433/article/details/103363206

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue项目的导入导出

最近有一个关于导入导出的项目需求，现在就来整理一下。一般来说，导入分为两种：一是导入文件，文件内容由后台解析。二是由前端解析；在这只是向后台发送文件，由后台解析。

技术

采用vue+elementui,另外下载了两个依赖：npm i -S file-saver xlsx

导入

具体的参数说明可去elementui官网的上传组件查看

<template>
	<el-upload
		class="upload-demo"
		 ref="upload"
		 accept=".xls,.xlsx,.csv"
		 :headers="headers"
		 :before-upload="beforeAvatarUpload"
		 action="后台地址"
		 :on-success="uploadSuccess"
		 :on-error="uploadFalse"
		 :on-preview="handlePreview"
		 :auto-upload="false">
		     <el-button placeholder="请选择文件" slot="trigger">读取文件</el-button>
		     <el-button @click="submitUpload">上传</el-button>
	</el-upload>
</template>

data(){
	return{
		headers: {
            Authorization: "Bearer "+JSON.parse(sessionStorage.getItem("user")).token  //token
         },
	}
}

methods:{
	  submitUpload() {
            this.$refs.upload.submit();
      },
      uploadSuccess(response, file, fileList) {
          if (response.code==200) {
              this.$message.success("导入成功!");
              this.$router.push("/personallist");
          } else {
              if(response.data.length == 0){
                  this.$message.error(response.message);
              }
          }
      },
      uploadFalse(response, file, fileList) {
          if(response.data.length == 0){
              this.$message.error(response.message);
          }
      },
      beforeAvatarUpload(file) {
          const extension = file.name.split(".")[1] === "xls";
          const extension2 = file.name.split(".")[1] === "xlsx";
          const extension3 = file.name.split(".")[1] === "csv";
          const isLt2M = file.size / 1024 / 1024 < 4;
          if (!extension && !extension2 && extension3) {
              this.$message.error("上传模板只能是 xls、xlsx、csv格式!");
          }
          if (!isLt2M) {
              this.$message.error("上传模板大小不能超过 4MB!");
          }
          return extension || extension2 || extension3;
      },
      handlePreview(file) {
          if (file.response.status) {
              this.$message.success("文件导入成功!");
          } else {
              this.$message.error("此文件导入失败!");
          }
      }
}

导出

首先在需要导出的组件引入

import FileSaver from "file-saver";
import XLSX from "xlsx";

注意：还需要在axios设置

export function exportFiles(data){
  return request({
    url: "地址",
    method: 'post',
    responseType: 'blob',
    dataType: 'json',
    data:data
  })
}
现在开始：

<el-button @click=“exportFile”>开始导出

exportFile(){
let params={
fileName:“人员信息表”
}
exportFiles(params).then(res=>{
FileSaver.saveAs(new Blob([res], { type: ‘application/vnd.ms-excel;charset=utf-8’ }), ‘文件名：人员信息表.xlsx’);
})
.catch(err=>{
console.log(err);
})
}