导入功能、导出功能的代码

 Vue

导出功能

方式1：arraybuffer

<template>
    <button @click="download">点击此处完成下载功能</button>
</template>

<script>
export default defineComponent({
    name:'Testcomponent',
    setup(){
        const download=async()=>{
          await standardCodedownLoad().then(() => {
            ElMessage.success('模板导出中...')
          })
          .catch(() => {
            ElMessage.error('模板导出失败') }
            )
        }
        return {
            download:download}
    }
})
</script>


//以下为下载的请求事件
import axios from 'axios'
const instance = axios.create() // 创建 axios 实例
// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token') ? sessionStorage.getItem('token') : ''
    // 获取token 
    config.headers.token = `${token}`
    // 将 token 添加到 Authorization 头中，用于身份验证
    return config
  },
  error => {
    return Promise.reject(error) // 返回错误信息
  }
)

export async function standardCodedownLoad () {
  return instance.get('/datastandar/standardCode/downLoad', {
    responseType: 'arraybuffer'
  }).then(response => {
    const date = new Date()
    const year = date.getFullYear() 
    // 获取年份，比如：2021
    const month = date.getMonth() + 1 
    // 获取月份，注意：月份从0开始，因此需要加上1，比如：1月对应的是0，2月对应1，以此类推。
    const day = date.getDate() // 获取天数，比如：1号、2号等
    const hour = date.getHours().toString().padStart(2, '0') 
    // 获取小时，注意：getHours 方法返回的是0-23的整数，可使用padStart方法来将其转换为两位数字
    const minute = date.getMinutes().toString().padStart(2, '0') 
    // 获取分钟，同上
    const second = date.getSeconds().toString().padStart(2, '0') 
    // 获取秒数，同上
    const newdata = `${year}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}${hour}${minute}${second}`
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', `标准代码模板${newdata}.xlsx`)
    document.body.appendChild(link)
    link.click()
  })
}

方式2：blob

<template>
    <button @click='exportexcel'>点击此处完成导出功能</button>
</template>

<script>
export default defineComponent({
    name:'Testcomponent',
    setup(){
        const exportexcel = async () => {
        let param = {
        projectId: Number(sessionStorage.getItem('datastandar_projectId'))
      }
      await standardCodeexport(param).then(() => {
        ElMessage.success('文件导出中...')
      }).catch((error) => {
        if (error.response.status == 401) {
          router.push({ name: 'login' })
          ElMessage.error('登录失效')
        } else { ElMessage.error('导出失败') }

      })
    }
        return {
            exportexcel :exportexcel }
    }
})
</script>


//以下为下载的请求事件
import axios from 'axios'
const instance = axios.create() // 创建 axios 实例
// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token') ? sessionStorage.getItem('token') : ''
    // 获取token 
    config.headers.token = `${token}`
    // 将 token 添加到 Authorization 头中，用于身份验证
    return config
  },
  error => {
    return Promise.reject(error) // 返回错误信息
  }
)

export async function standardCodeexport (data) {
  const params = new URLSearchParams(data).toString()
  return instance.post(`/datastandar/standardCode/export?${params}`, {
  }, {
    responseType: 'blob'
  }).then(response => {
    const date = new Date()
    const year = date.getFullYear() 
    // 获取年份，比如：2021
    const month = date.getMonth() + 1 
    // 获取月份，注意：月份从0开始，因此需要加上1，比如：1月对应的是0，2月对应1，以此类推。
    const day = date.getDate() // 获取天数，比如：1号、2号等
    const hour = date.getHours().toString().padStart(2, '0') 
    // 获取小时，注意：getHours 方法返回的是0-23的整数，因此我们可以使用 padStart 方法来将其转换为两位数字
    const minute = date.getMinutes().toString().padStart(2, '0') 
    // 获取分钟，同上
    const second = date.getSeconds().toString().padStart(2, '0') 
    // 获取秒数，同上
    const newdata = `${year}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}${hour}${minute}${second}`
    const link = document.createElement('a')
    let blob = new Blob([response.data], { type: 'application/vnd.ms-excel' })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)  //创建url对象
    link.setAttribute('download', `标准代码导出${newdata}.xlsx`)
    document.body.appendChild(link)
    link.click()
  })
}

导入功能

版本为vue3（使用的是 "element-plus": "^2.4.1"）

<template>
     <el-upload class="uploadclass" 
            action="#" 
            :show-file-list="false" 
            accept="'.xlsx','.xls'"
            :auto-upload="false" 
            :headers="headers.data" 
            :on-change="handleExcel">
                <el-icon class="icon" title="导入">
                  <Upload />
                </el-icon>
      </el-upload>
</template>

<script>
    export default defineComponent({
       name:'Testcomponent',
       setup(){
         const headers = reactive({
           data: { "Content-Type": "multipart/form-data;charset=UTF-8" }
         })
         const handleExcel = (file) => {
            let formData = new FormData()      //声明一个FormDate对象
            formData.append("file", file.raw)  //把文件信息放入对象中
            SetPDFile(formData, mber(sessionStorage.getItem('projectId'))
                )
                .then(({ data: res }) => {
                    if (res.code == 200) {
                        ElMessage.success(res.msg)
                       } else {ElMessage.error(res.msg)}
                })
                .catch((error) => {
                    ElMessage.error('导入失败')
        
                })
         }
      }
    })
</script>

//api文件

import axios from 'axios'
const instance = axios.create() // 创建 axios 实例
// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token') ? sessionStorage.getItem('token') : ''
    // 获取token 
    config.headers.token = `${token}`
    // 将 token 添加到 Authorization 头中，用于身份验证
    return config
  },
  error => {
    return Promise.reject(error) // 返回错误信息
  }
)

export function SetPDFile (formFile, id) {
  return instance.post(`/datastandar/standardCode/import/${id}`, formFile, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

React