vue下载，导入、导出excel文件

模板下载：后台给我返回的是url地址

1、调接口获取dataUrl，下载模板window.open(dataUrl)

downloadTemplateBtn (){

api.getCustomerTemplate().then(res=>{

console.log(res)

if(res.code===20000){

let dataUrl = res.data

　window.open(dataUrl)

}

}).catch()

},

2、批量导入，使用的是elementUI的el-upload上传文件

<el-upload

class="upload-demo"

:action="uploadApi"

:headers="uploadHeader"

name="file"

:before-upload="beforeFileUpload"

:on-change="handleChangeFile"

:on-success="handleFileSuccess"

:on-remove="handleRemove"

:before-remove="beforeRemove"

:limit="1"

:on-exceed="handleExceed"

:file-list="fileList"

>

<el-button size="small" type="primary">批量导入</el-button>

</el-upload>

// 批量导入 方法

beforeFileUpload (file){

return this.$confirm(`确定导入 ${ file.name }？`);

},

handleFileSuccess(res, fileList) {

if(res.code==20000){

this.$message.success('文件上传成功')

}else{

this.$message.error('文件上传失败')

}

console.log(fileList)

},

handleChangeFile(file, fileList) {

console.log(file)

console.log(fileList)

this.fileList = fileList;

},

handleRemove(file, fileList) {

console.log(file, fileList);

},

handleExceed(files, fileList) {

this.$message.warning(`当前限制选择 1 个文件`);

},

3、表格数据----导出

1、引入两个JS文件，Export2Excel.js，Export2Zip.js

下载地址：

https://download.csdn.net/download/shimeifang11/12633791

 

// 表格数据----导出
    importTableDataExcel (){
       //excel数据导出
          if (this.toltals > 0) {
            this.$confirm('确定将此数据导出Excel文件?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
             
            }).then(() => {
               import('../../assets/js/Export2Excel').then(excel => {
                  const tHeader = ['姓名', '公司', '手机','注册时间', '邮箱', '地址'] // 表头
                  const filterVal = ['name', 'company', 'mobile','register_time', 'email', 'address'] // 需要导出的项目
                  const list = this.multipleSelection
                  const data = this.formatJson(filterVal, list)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: '客户信息',
                    autoWidth: true,
                    bookType: 'xlsx'
                  })
                 
                })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消导出'
              })
            })
          }else{
            this.$message('暂无数据可导出')
          }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },