v3下载导出

1.接口

// 引入

import service, {
  upload as uploadService,
  all as allService,
  getHeaders,
} from "@/utils/request";
import qs from "qs";
let baseURL = "/demo";

/**
* 导入
*/
export function rmmPorousImportForExcel(data?: any) {
  return request("/rmmPorous/importForExcel", {
    method: "post",
    data,
    baseURL,
  });
}

/**
* 导出
*/
export function rmmPorousDownLoadExcel() {
  return getRequest("/rmmPorous/downLoadExcel", {
    method: "get",
    baseURL,
  });
}

/**
* 下载模板接口
*/
export function rmmPorousGetExcelFile() {
  return getRequest("/rmmPorous/getExcelFile", {
    method: "get",
    baseURL,
  });
}

export async function getRequest(
  url: string,
  {
    data = {},
    params = {},
    method = "POST",
    headers = {},
    baseURL = process.env.VITE_APP_ONLINE || "",
    json = true,
  }
) {
  method = method || "POST";
  headers = getHeaders(headers, json);
  if (!json) data = qs.stringify(data);
  let result = await service({
    url,
    baseURL,
    method,
    headers,
    data,
    params,
    responseType: "blob",
  }).catch((err) => false);
  return result;
}

js代码

/**
 * 点击导入
 * @param options
 */
const submitUpload = async (options: any) => {
  let formData = new FormData();
  formData.append("file", options.file);
  const res = await rmmPorousImportForExcel(formData);
  console.log(res);
};

/**
 * 点击导出
 */
const onDc = async () => {
  const res: any = await rmmPorousDownLoadExcel();
  console.log(res);
  let url = window.URL.createObjectURL(new Blob([res]));

  let link = document.createElement("a");
  link.download = "模板.xlsx";

  link.href = url;
  link.target = "_blank";
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  //释放URL对象所占资源
  window.URL.revokeObjectURL(url);
  //用完即删
  document.body.removeChild(link);
};

/**
 * 点击下载模板
 */
const onDown = async () => {
  const res: any = await rmmPorousGetExcelFile();
  let url = window.URL.createObjectURL(new Blob([res]));

  let link = document.createElement("a");
  link.download = "模板.xlsx";

  link.href = url;
  link.target = "_blank";
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  //释放URL对象所占资源
  window.URL.revokeObjectURL(url);
  //用完即删
  document.body.removeChild(link);
};

const onPreview = () => {};
const onRemove = () => {};
const onSuccess = () => {
  // console.log(fileList);
};

dom元素

          <button class="resetBtn" @click="onDown">下载模板</button>
          <button class="resetBtn" @click="onDc">导出</button>
          <div class="upload_div">
            <el-upload
              ref="uploadRef"
              accept=".pdf,.doc,.docx,.xls,.xlsx"
              class="upload-demo"
              :http-request="submitUpload"
              :on-preview="onPreview"
              :on-remove="onRemove"
              :on-success="onSuccess"
            >
              <template #trigger>
                <button
                  class="addBtn"
                  style="margin-left: 0px; width: auto; padding: 0 4px"
                  type="button"
                >
                  导入
                </button>
              </template>
            </el-upload>
          </div>