前端下载excel文件的两种方式

前端下载后端的excel文件的两种方式

//当下载excel的时候，不让其操作
import { Loading } from 'element-ui'; //使用element的loading效果
let instance
const request = axios.create({baseURL:'http://127.0.0.1:3000'
})
request.interceptors.request.use(function(config) {instance = Loading.service({//   lock: true,text: '数据加载中',spinner: 'el-icon-loading',background: 'rgba(254, 254, 254, 0.7)'})let token = localStorage.getItem('userToken')if (token) {config.headers.userToken = token}return config
})
request.interceptors.response.use(resp => {instance.close()  // 关闭return resp
})export const allUrl = (date1,date2) => {return request({url:`/dsc-toclass/exportall?date1=${date1}&date2=${date2}`,method:'get',responseType: "blob", })
}

在你要下载的页面里‘

    totalData() {allUrl(this.dateArr[0], this.dateArr[1]).then( res => {console.log(res,'154')let url = window.URL.createObjectURL(new Blob([res.data]));let link2 = document.createElement("a");link2.style.display = "none";link2.href = url;link2.setAttribute("download", `${res.config.url.match(/(?<==)(\d|-)+/g)[0]}~${res.config.url.match(/(?<==)(\d|-)+/g)[1]}所有员工给班信息表.xlsx`);document.body.appendChild(link2);link2.click();console.log(res,'161行的')});},

2.使用依赖包

npm install js-export-excel

yarn add js-export-excel

import ExportJsonExcel from “js-export-excel”;

<template><div class="box"><div class="title">导出excel</div><el-button @click="exportExcel">导出</el-button></div>
</template><script>
import ExportJsonExcel from "js-export-excel";
export default {data() {return {list: {getList: [{id: "1",province: "江西",city: "赣州",},{id: "2",province: "广东",city: "深圳",},{id: "3",province: "湖南",city: "长沙",},{id: "4",province: "浙江",city: "杭州",},{id: "5",province: "河南",city: "洛阳",},{id: "6",province: "山东",city: "青岛",},{id: "7",province: "安徽",city: "烟台",},],},};},methods: {exportExcel() {console.log(123);const dataList = this.list.getList;let option = {};  //   option代表的就是excel文件let dataTable = [];   //   dataTable代表excel文件中的数据内容if (dataList) {for (let i in dataList) {let obj = {序号: dataList[i].id,省份: dataList[i].province,城市: dataList[i].city,};dataTable.push(obj);   //   设置excel每列获取的数据源}}option.filename = "省份城市表";  //excel文件名//excel文件数据option.datas = [{//   excel文件的数据源sheetData: dataTable,//   excel文件sheet的表名sheetName: "sheet",//   excel文件表头名sheetHeader: ["序号", "省份", "城市"],//   excel文件列名sheetFilter: ["序号", "省份", "城市"],},];//   创建ExportJsonExcel实例对象let toExcel = new ExportJsonExcel(option);//   调用保存方法toExcel.saveExcel();},},
};
</script><style>
</style>

前端下载excel文件的两种方式相关推荐

Ruby读取Excel文件的两种方法
用Ruby读取Excel文件的两种重要方式 1. 通常做法,查阅微软提供的API了,需要包含win32, 在ruby前加入,require 'win32ole' 例如: require 'win32o ...
Python加载csv文件的两种方式
本文主要讲解下Python加载csv文件的两种方式,如果知道如何处理的就不必往下看了! 下面来简单介绍下. 实例中的数据集是kaggle的Digit Recognizer的train.csv文件,数据 ...
创建和应用Java包文件的两种方式(转)
创建和应用Java包文件的两种方式(转) <Java编程艺术>章节选登.作者:高永强清华大学出版社 (即将出版) 12.1 包--package ... 12.1.1 包命名规 ...
第四章：数据存储-csv文件处理-读取csv文件的两种方式
直接学习:https://edu.csdn.net/course/play/24756/280718 csv文件处理-读取csv文件的两种方式: # 这种方式读取到的每一条数据是个列表,所以需要通过下 ...
java读取csv文件的两种方式
java读取csv文件的两种方式 1.CsvReader读取 import com.csvreader.CsvReader; /*** CsvReader 读取* @param filePath* @ ...
jsp：jsp包含文件的两种方式
第一种:include指令 include指令:当JSP转换成Servlet时引入指定文件(指令元素),这是一种静态包含,它运行的时候不会单独编译成.class文件,它生成一个新的整体.class文件 ...
读写ASCII文件的两种方式
读写ASCII文件的两种方式 :读取文件的路径 EXAMPLE: IDL>asciiFile=FILE_DIRNAME(ROUTINE_FILEPATH('TEST_READF')) + '\d ...
KEIL / MDK生成BIN文件的两种方式
KEIL / MDK生成BIN文件的两种方式 1 KEIL工程配置入口点击"魔术棒"图标(Option for Target) 在After Build/Rebuild选项卡中, ...
nodejs 逐行读取文件的两种方式
nodejs 逐行读取文件的两种方式通过readline的方式 const fs = require('fs'); const readline = require('readline');let ...
django + python上传文件的两种方式
突然心血来潮,研究了下django+python上传文件的两种方式. 第一:直接采用文件读写的方式上传 1. settings.py文件中设置文件的存放路径和文件读取路径 MEDIA_ROOT = o ...

前端下载excel文件的两种方式

前端下载excel文件的两种方式相关推荐

最新文章

热门文章