vue---excel导入导出以及本地模板下载

下载excel

download() {
      API({}).then(res => {
        const content = res;
        const blob = new Blob([content],{ type: 'application/vnd.ms-excel' });
        const fileName = "可加计扣除清单.xlsx";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          window.navigator.msSaveOrOpenBlob(blob, fileName);
        }
      });
    }

普通文件导入 带有进度条

<el-upload
    ref="upload"
    class="upload-demo"
    action
    :show-file-list="false"
    :before-upload="beforeUpload"
    :http-request="uploadRequest"
    style="display:inline-block;"
>
    <el-button size="small" type="primary">选取文件</el-button>
</el-upload>
<el-progress :percentage="percentage"></el-progress>


beforeUpload(file) {
    const Xls = file.name.split('.');
    const islt20 = file.size / 1024 / 1024 < 20;
    if (Xls[1] == 'xls' || Xls[1] == 'xlsx') {
    } else {
        this.$message.warning('只能上传xls或者xlsx格式的文件');
        return;
    }
    if (!islt20) {
        this.$message.warning('文件大小不能超过20M');
        return;
    }
    this.file = file;
    return true;
},
async uploadRequest() {
    let formData = new FormData();
    formData.append('file', this.file);
    let res = await request({
        baseURL: '',
        url: '',
        methods: 'post',
        data: formData,
        onUploadProgress(event) {
            if (event.lengthComputable) {
                this.percentage = Math.floor((event.loaded / event.total) * 100);
            }
        }
    });
    if (res.resultCode == '00') {
        this.$message.success(res.resultData.message);
    } else {
        this.$message.success(res.resultData.message);
    }
},  

下载模板EXCEL

export const downloadFile = (url,ext, params) => {
let accessToken = getStore('accessToken');
return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params,
    headers: {
        'accessToken': accessToken
    },
    responseType: 'blob', //二进制流
}).then(res => {
    // 处理返回的文件流
    const content = res;
    const blob = new Blob([content], { type: 'application/vnd.ms-excel;charset=utf-8' });
    var date =
        new Date().getFullYear() +
        "" +
        (new Date().getMonth() + 1) +
        "" +
        new Date().getDate() +
        "" +
        new Date().getHours() +
        "" +
        new Date().getMinutes() +
        "" +
        new Date().getSeconds() +
        "" +
        new Date().getMilliseconds();
    const fileName = date + "." + ext;
    if ("download" in document.createElement("a")) {
        // 非IE下载
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
    } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName);
    }
});
};

let loading = this.$loading({text:"",fullscreen:true})
downloadFile('/record/export',"xlsx", this.searchForm).then(()=>{loading.close()})

EXCEL导入显示成table 表格数据

 npm install -S file-saver xlsx
 npm install -D script-loader
 npm install xlsx

main.js中
 import XLSX from 'xlsx'
 Vue.use(XLSX)


<!--limit:最大上传数，on-exceed：超过最大上传数量时的操作  -->
<el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :on-remove="handleRemove"
    :on-exceed="handleExceed"
    :limit="limitUpload"
    accept="application/vnd.openxmlformats-    
    officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :auto-upload="false">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>

data(){
    return{
        fileTemp:{},
        file:{},
        tableData:[],
    }
//上传文件时处理方法  
handleChange(file, fileList){
    this.fileTemp = file.raw;
    if(this.fileTemp){
        if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
            || (this.fileTemp.type =