Excel 文件前端导入解析及下载

1. 文件上传使用 XLSX 解析 Excel 文件

   // 文件上传前钩子
   const onBeforeUpload = (file: RcFile, fileList: RcFile[]) => {
     console.log(file)
     setFileName(file.name)
     
     const fileSize = file.size / 1024 / 1024
     if (fileSize > 100) {
       message.error('文件不得超过 100MB!')
       return false
     }
   
     const fileType = file.name.split('.').reverse()[0]
     let fileReader = new FileReader()
   
     // 文本
     if (fileType === 'txt') {
       fileReader.readAsText(file)
       fileReader.onload = (res: any) => {
         // 获取内容
         const resStr = res.currentTarget.result.replace(/\r/g, '')
         const resArr = Array.from(new Set(resStr.split('\n'))) as string[]
   
         setPhoneNumArr(resArr)
       }
     }
     // excel
     if (fileType === 'xsl' || fileType === 'xlsx') {
       let workBook: any
       try {
         fileReader.readAsBinaryString(file)
         fileReader.onload = (res: any) => {
           // 获取内容
           const data = res.target.result
           // console.log(data)
           workBook = XLSX.read(data, {
             type: 'binary'
           })
           // let fromTo = ''
           let result: any[] = []
           for (var sheet in workBook.Sheets) {
             if (workBook.Sheets.hasOwnProperty(sheet)) {
               // fromTo = workBook.Sheets[sheet]['!ref']
               // console.log(fromTo)
               result = result.concat(XLSX.utils.sheet_to_json(workBook.Sheets[sheet]))
               // break; // 如果只取第一张表，就取消注释这行
             }
           }
           filterPhoneNumber(result)
         }
       } catch (e) {
         console.log(e)
       }
     }
     return false
   }

   <Dragger
     action="/api/sms/send/sendFile"
     name="file"
     maxCount={1}
     accept={'.excel,.txt, .xls, .xlsx'}
     showUploadList={false}
     headers={{
       Authorization: `Bearer ${Cookies.get(tokenKey)}`,
     }}
     beforeUpload={onBeforeUpload}
     onChange={onChangeFile}
     onRemove={onRemoveFile}
   >
     <img className={styles.picIcon} src={picicon} alt="" />
     <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
     <p className="ant-upload-hint">支持文件Excel或TXT文档, 大小不超过100M</p>
   </Dragger>

2. 从后端获取 blob 格式的二进制流，解析并下载

   export const exportTaskExcel = function (id: string) {
     return request.get('/api/exportExcel', {
       params: { id },
       responseType: 'blob',
     })
   }

   exportTaskExcel(id)
     .then((resp: any) => {
       console.log(resp)
       // 二进制转url打开下载
       if (resp.status === 200) {
         const url = window.URL.createObjectURL(resp.data)
         window.open(url)
       }
     })
     .catch((err) => {
       console.log(err)
       message.error(t(`${RPath}.下载失败`))
     })

图片、PDF 实现预览

<img :src="imgUrl " />
window.opean(this.imgUrl )