上传和导出excel表格

导出excel

1、安装依赖
npm install xlsx file-saver -S
npm install script-loader -S -D
2、需要两个文件
Blob.js和 Export2Excel.js,可以百度下载
项目中新建一个文件夹vendor,放这两个文件
3、vue写方法

handleDownload() {
//请求后端接口拿到list数据
   download().then(response => {
        if (response.data) {
          this.downList = response.data.data
        } else {
          this.downList = []
        }
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['编号',  '地市', '姓名',  '交易金额', '下单时间'] 
          //表格第一行标题
          const filterVal = ['orderId', 'cityName', 'Name', 'payAmount', 'creatDate']
         //表格跟接口字段对应
          const list = this.downList
          const data = this.formatJson(filterVal, list)  //数据过滤
          excel.export_json_to_excel({
    header: tHeader, //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', //文件名 非必填
    autoWidth: true, //单元格是否要自适应宽度  非必填
    bookType: 'xlsx' //非必填Ï
          })
          this.downloadLoading = false
        })
      }).catch(() => {
        this.downloadLoading = false
      })
    },
// 过滤数据方法,例如时间格式
    formatJson(filterVal, jsonData) { 
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'creatDate') {
          var date = new Date(v[j])
          return formatTime(date, 'yyyy-MM-dd hh:mm:ss')
        } else {
          return v[j]
        }
      }))
    },

上传文件 格式要注意

 const formData = new FormData()
  formData.append('token', getToken())
  formData.append('file', data.file)
  formData.append('appName', data.appName)
请求接口配置post
   {
    url: '.....',
    method: 'POST',
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
``
步骤和传图片一样

你可能感兴趣的:(上传和导出excel表格)