文件的导入导出

文件导出

1.直接通过浏览器导出文件

window.location.href = this.$api.module.browRecords // 接口地址

2.通过axios导出

// 引入
import axios from 'axios'
// 使用
exportData() {
	axios({
		method: 'post', // 请求方式
		url: `${baseUrl}/course/buyrecord/exportlist`, // 请求地址
		data: { // 请求参数
			"classCode": this.listfrom.classCode,
			"courseId": this.listfrom.courseId,
			"remindNum": this.listfrom.remindNum
          },
			responseType: 'arraybuffer',
			headers: { // 请求头
				'Token': getToken(),
			}
			}).then(res => {
				console.log(res)
				// 假设 data 是返回来的二进制数据
				const data = res.data
				const url = window.URL.createObjectURL(new Blob([data], {
					type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
				}))
				const link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				// debugger;
				link.setAttribute('download', 'exportCourseInfo.xls')
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
			})
    },

3.blob导出

downLoadModule() {
      var xhr = new XMLHttpRequest();
      var formData = new FormData();
      const token = getToken();
      xhr.open("post", `${baseUrl}/appuser/export`, true); // 设置请求方式、文件地址
      xhr.setRequestHeader("token", token);
      xhr.responseType = "blob";
      xhr.onload = function (e) {
        console.log(e);
        //如果请求执行成功
        if (e.status !== null) {
          if (e.currentTarget.status == 200) {
            var blob = e.currentTarget.response;
            var filename = "test.xls"; //这个名字可以自定义或者根据后端的返回值设置
            var a = document.createElement("a"); //创建一个`a`标
            // blob.type = "application/json" //如果类型是这个就可以不同设置
            //创键临时url对象
            var url = URL.createObjectURL(blob);
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            //释放之前创建的URL对象
            window.URL.revokeObjectURL(url);
          }
        }
      };
      xhr.send(formData);
    },

文件导入
1.通过文件流导入
a.HTML

<el-upload
        style="margin-left: 10px"
        :http-request="inportData"
        :show-file-list="false"
        class="upload-demo"
        action=""
        :before-upload="beforeUpload"
      >
        <el-button class="add-stroe" v-btnpermission="'students.import'">导入</el-button>
</el-upload>

b.Script

	// 导入
    inportData(files) {
      const that = this;
      var form = new FormData();
      form.append("file", files.file);
      // XMLHttpRequest 对象
      var xhr = new XMLHttpRequest();
      xhr.timeout = 30000; // 设置超时
      xhr.open("post", baseUrl + "/appuser/importList", true);
      const token = getToken();
      xhr.setRequestHeader("token", token);
      xhr.responseType = "json";
      xhr.responseType = "json";
      xhr.onload = function (e) {
        if (e.currentTarget !== null) {
          if (e.currentTarget.response.code === "0") {
            that.$message.success("导入成功!");
            // 刷新列表
            that.list();
            that.importShow = false;
          }
          if (e.currentTarget.response.code !== "0") {
            that.$message.error(e.currentTarget.response.message);
          }
        }
      };
      xhr.ontimeout = function () {
        that.$message.error("数据加载超时，请刷新页面");
      };
      xhr.onerror = function (res) {
        that.$message.error("数据加载超时，请刷新页面");
      };
      xhr.send(form);
    },
    // 上传前的钩子函数
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension1 = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      if (!extension1 && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "warning",
        });
      }
      return extension1 || extension2;
    },

因项目需求，通过多方查找资料与交流所得。如有侵权，请联系删除！