批量导入及日志下载

新需求 新需求，要求模板下载以及批量导入，日志下载，以及对表格的单元格进行样式追加

追加一个模板下载的链接：VUE 后台返回文件流，前端实现模板下载_我的椰子啊的博客-CSDN博客最新再写一个批量导入，模板下载的功能，今天就总结一下模板下载的功能效果，有一些博主说用a标签去下载，form表单去下载，这些针对我做的效果可能不是很理想，所以我就自己研究做了出来，希望可以帮到各位，话不多说，看代码；由于不想写样式，就直接借用的ElementUI跟着我的步骤走：（批量导入的链接：）先看下效果图：【图片】【图片】【图片】点击事件<el-button type="primary" plain size="mini" @click="handleDown">.https://blog.csdn.net/weixin_48215380/article/details/122072317

先看效果，两个按钮,导入excel文件，表格展示，表格中有错误数据展示，并下载错误行文件

 

还是按照步骤走，如果走不通请私信我

1. 批量导入的按钮事件走起(套用了element的el-table组件)

   <el-upload
                   class="upload-demo"
                   action="#"
                   :file-list="fileList"
                   :auto-upload="true"
                   :show-file-list="false"
                   :http-request="handImport"
                   :before-upload="beforeUpload"
                 >
                   <el-button
                     slot="trigger"
                     size="mini"
                     type="primary"
                     plain
                   >批量导入</el-button>
   </el-upload>

2.  在methods里边写我们的handImport和beforeUpload事件

   // 上传文件之前的钩子 判断上传文件格式，大小，如果不对停止上传
       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格式！')
         }
         // 文件大小限制为10M
         // const fileLimit = file.size / 1024 / 1024 < 10
         // if (!fileLimit) {
         //   this.$message.error('上传文件大小不超过10M！')
         // }
         // return fileType && fileLimit
         return fileType
       },
       //  批量导入
       handImport (param) {
         const deptId = this.queryParams.deptId
         const formData = new FormData() // FormData对象，添加参数只能通过append('key', value)的形式添加
         formData.append('file', param.file) // 添加文件对象
         formData.append('deptId', deptId)
         getImports(formData)
           .then((res) => {
             if (res.code !== 20000) {
               this.$message.error(res.msg)
             } else {
               this.loading = true
               backData({ page: 1, pageCount: 10 })
                 .then((res) => {
                   // console.log(res, 'res--伊森')
                   this.logName = res.data.logName
                   this.errCount = res.data.errCount
                   this.userList = res.data.records
                   this.dialogTableVisible = true
                   this.loading = false
                 })
                 .catch((error) => {
                   console.log(error)
                 })
             }
           })
           .catch((error) => {
             console.log(error, 'error')
           })
       },

   可限制上传的文件大小不超过多少兆，我这边不需要所以就没写

3.  有时候可能会遇到一种情况就是promise执行的时候，只执行.catch，不执行.then的时候，我们需要确认一下请求头里边的contentType是否与我们的文件一致，如果不一致就会出现不走.then的现象
4.  接下来就是弹窗里边的表格，我用的是el-table组件，代码如下

   <el-dialog title="批量导入确认" :visible.sync="dialogTableVisible">
         <div class="left_right_title">
           <p>请再次确认导入数据是否正确，如无问题，请点击确定。</p>
           <p>
             <span style="color: red">当前有问题数据{{ errCount }}行</span>请修改，具体可<span
               style="color: #1890ff; cursor: pointer"
               @click="download_Logs"
             >查看问题日志信息</span>。
           </p>
         </div>
         <el-table
           :data="
             userList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
           "
           border
           :header-cell-style="{ 'text-align': 'center', color: 'black' }"
           :cell-style="cellStyle"
           style="width: 100%"
         >
           <el-table-column property="number" label="序号" width="100" />
           <el-table-column
             property="department"
             label="部门(填写部门缩写)"
             width="100"
           />
           <el-table-column
             property="userName"
             label="*用户名(建议全字母)"
             width="100"
           />
           <el-table-column property="nickName" label="*昵称" width="100" />
           <el-table-column
             property="password"
             label="*用户密码(最小6位)"
             width="100"
           />
           <el-table-column
             property="authority"
             label="*权限角色"
             width="150"
           />
           <el-table-column property="phone" label="手机号" width="100" />
           <el-table-column property="email" label="邮箱" width="100" />
           <el-table-column property="hostName" label="主机" width="100" />
           <el-table-column property="deviceName" label="设备" width="100" />
           <el-table-column
             property="intranetAddress"
             label="内网"
             width="100"
           />
           <el-table-column
             property="publicAddress"
             label="公网"
             width="100"
           />        
           <el-table-column
             property="accountPassword"
             label="*账号密码"
             width="100"
           />
         </el-table>
         <el-pagination
           class="excel_pagination"
           :current-page="currentPage"
           :page-sizes="[5, 10, 20, 40]"
           :page-size="pagesize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="userList.length"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
         <div slot="footer" class="dialog-footer">
           <el-button
             type="primary"
             @click="dialogTableVisible = false"
           >关 闭</el-button>
         </div>
       </el-dialog>

5.  接下来是下载日志code

   download_Logs () {
         const logname = this.logName
         downloadLogs({ logname }).then((response) => {
           // console.log(response, 'resssss-downloadLogs')
           const link = document.createElement('a') // 创建a标签
           const blob = new Blob([response], {
             type: 'application/octet-stream'
           }) // response就是接口返回的文件流
           const objectUrl = URL.createObjectURL(blob)
           link.href = objectUrl
           link.download = '导入日志' + '.txt' // 自定义文件名
           link.click() // 下载文件
           URL.revokeObjectURL(objectUrl) // 释放内存
         })
       },

6.  因为下载的日志为txt格式，我们需要改一下后缀
7.  原创不易，点个赞呗