• 博客园logo
  • 会员
  • 周边
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
技术杨的博客园
希望每一次的努力都能得到自己想要的
博客园    首页    新随笔    联系   管理    订阅  订阅

vue Excel导入,下载Excel模板,导出Excel

vue  Excel导入,下载Excel模板,导出Excel

vue  Excel导入,下载Excel模板

<template>
    <div style="display: flex;">
      <el-button
        @click="handleDownload"
        class="button_search"
        type="primary"
        size="medium" >下载模板</el-button>
      <el-upload
        style="display: inline-block"
        :action="uploadUrl_file"
        name="file"
        :headers="{ 'x-token': token }"
        :file-list="exportfileList"
        :on-success="handleFileSuccess"
        :on-error="handleFileError"
        :show-file-list="true">
        <el-button
          class="button_search"
          type="primary"
          size="medium"
        >导入</el-button>
      </el-upload>
    </div>
</template>

<script>
  const rootpath = process.env.VUE_APP_BASE_API; 
  import { getToken } from "@/utils/auth";
  var busiContractorImport = "/business/fourth/excel/import.do"; //导入接口
  export default {
    name: 'importExcel',
    data(){
      return{
        uploadUrl_file:'',
        token: getToken() ,
        exportfileList: [],
        showShade:false
      }
    },
    mounted() {
      let vm = this;
      vm.uploadUrl_file = rootpath + busiContractorImport +"?excelHandler=dictCheckContentByMyselfImportHandler"; //上传地址
    },
    methods:{
      // 下载模板
      handleDownload() {
     // 把模板放在 : public/excel/隐患排查自建自建隐患库 window.open(
"excel/隐患排查自建隐患库.xlsx"); }, // 导入 handleFileError(result, file, exportfileList) { this.$notify.error("导入失败,错误:" + result); this.showShade = false; this.exportfileList = []; }, handleFileSuccess(result, file, exportfileList) { var that = this; var code = result.code; if (code === "0") { that.$notify({ title: "成功", message: "导入成功", type: "success", duration: 2000 }); that.$emit("importExcel") } else { that.$notify.error({ title: "导入失败", message: result.msg, duration: 2000 }); } that.showShade = false; that.exportfileList = []; }, } }; </script> <style scoped> </style>

 

导出Excel

第一步,创建文件:  exportData.js

import request from '@/utils/request'
import { getToken } from "@/utils/auth";

//列表导出
export function exportsData(params,url,fileName) {
  return request({
    url: url,
    method: "get",
    params,
    responseType: "blob",
    headers: { "x-token": getToken() }
  }).then((result) => {
    const excelBlob = result;
    const elink = document.createElement("a"); // 创建a标签
    elink.download = fileName;
    elink.style.display = "none";
    const blob = new Blob([excelBlob]);
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
  });
}

第二步,添加事件

<el-button
              @click="exportBtn"
              class="button_search"
              size="medium"
              type="primary"
            >导出</el-button>

import { exportsData } from "@/api/exportData"; //引入接口

//导出数据
exportBtn(){
  let that = this;
  var date = new Date();
  let listQuery = { 接口需要的参数
    date:date.getTime(),
    current:that.listQuery.current,
    size:that.listQuery.size,
    sord:'asc'
  }
  exportsData(listQuery,"/business/fourth/basicList/scqy/export.do","仓库清点.xlsx")
},



 

posted @ 2022-09-29 15:48  技术杨  阅读(529)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3