excel导入&下载模板

exportExcel导入&下载模板

1.下载exportExcel模版

    // 下载导入模板(vue2放在根目录static下，要用英文名，要用绝对路径)
    downLoadExcel() {
      const a = document.createElement('a')
      a.href = 'https://tanlink-erp.oss-cn-hangzhou.aliyuncs.com/target.xlsx'
      // a.download = '工厂开票信息.xlsx'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },

ps ：a.href 只向的是oss 上面的静态文件也可通过接口指向后端返回的地址

2.exportExcel 导入

在utils 下面新增一个js 方法，可能有点长cv一下 ，有更好的方法也可不用

// 封装公共下载表格方法
const exportExcel = (data, fileName) => { // data 后端返回文件流 fileName 自定义下载文件名
  const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) // 将返回的数据通过Blob的构造方法，创建Blob对象
  if ('download' in document.createElement('a')) {
    const link = document.createElement('a') // 创建a标签
    link.download = fileName
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob) // 创建一个指向blob的url，点击可以下载文件
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(link.href)
    document.body.removeChild(link)
    // this.$message.success(data.msg)
  } else {
    navigator.msSaveBlob(blob, fileName)
  }
}
export default exportExcel

用el-upload 上传文件

       <el-upload
              ref="uploadImport"
              class="upload-demo"
              action=""
              :http-request="upLoad"
              :before-upload="beforeUpload"
              :file-list="fileList"
              accept=".xls,.xlsx"
              :auto-upload="true"
              :multiple="false"
              :show-file-list="false"
              style="display: inline-block;"
            >
              <el-button type="primary" size="small">导入目标</el-button>
            </el-upload>

    upLoad(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      importTargetASINAPI(formData).then(res => {
        const fileName = '目标导入记录' + '.xlsx' // 表格名称
        exportExcel(res, fileName)
        this.dialogImportLog = false
      })
    },
    // 上传文件之前的钩子：判断上传文件格式、大小等，若返回false则停止上传
    beforeUpload(file) {
      // 文件类型
      const isType = file.type === 'application/vnd.ms-excel'
      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const fileType = isType || isTypeComputer
      if (!fileType) {
        this.$message.error('上传文件只能是Xls/Xlsx/CSV格式！')
      }

      // 文件大小限制为5M
      const fileLimit = file.size / 1024 / 1024 < 5
      if (!fileLimit) {
        this.$message.error('上传文件大小不超过5M！')
      }
      return fileType && fileLimit
    },

最后调用后端的接口即可

// 处理后端返回的数据格式问题
    upLoad(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      importTargetASINAPI(formData).then((res) => {
        if (res.type === 'application/json') {
          const reader = new FileReader() // 创建FileReader实例
          reader.readAsText(res, 'utf-8') // 读取文件, 用字符串显示
          reader.onload = () => {
         console.log(JSON.parse(reader.result))// string 转 json
          }
        } else {
          this.dialogImportLog = false
          this.$message.warning('格式错误,请检查导入的数据!')
          const fileName = '目标导入记录' + '.xlsx' // 表格名称
          exportExcel(res, fileName)
        }
      })
    },

// 导入目标asin
export function importTargetASINAPI(data) {
  return request({
    url: 'object/import/asin',
    method: 'post',
    responseType: 'blob',
    data

  })
}