ci-plus 1.6.4 → 1.6.6

package/src/utils/ajaxBox.ts

@@ -15,7 +15,7 @@ import { ElMessage } from 'element-plus'
  * 如果blob对象是JSON格式，则尝试解析为JavaScript对象，并显示相应的错误消息。
  * 如果解析失败，则直接以原始格式下载blob对象。
  */
-const downFileFn = function (blob: Blob | BlobPart, fileName: string) {
+const downFileFn = function (blob: Blob | BlobPart, fileName: string, resolve?: Function, reject?: Function) {
   // 创建一个新的Blob对象，指定类型为application/json,假设blob是我们需要转换的Blob对象
   let b = new Blob([blob], {
     type: 'application/json',
@@ -35,7 +35,7 @@ const downFileFn = function (blob: Blob | BlobPart, fileName: string) {
       let response = JSON.parse(text as string)
       console.log(response) // 这里是解析后object对象
       ElMessage.error(response.msg)
-      return
+      return reject && reject(response)
     } catch (error) {
       // 如果解析失败，将Blob对象转换为URL并创建下载链接
       // console.error('Error parsing JSON', error)
@@ -47,8 +47,9 @@ const downFileFn = function (blob: Blob | BlobPart, fileName: string) {
       link.setAttribute('download', fileName)
       document.body.appendChild(link)
       link.click()
-      ElMessage.success('导出完成！请打开浏览器自带下载器查看文件！')
+      ElMessage.success('操作成功,请打开浏览器自带下载器查看文件！')
       link = null
+      resolve && resolve({ msg: '操作成功,请打开浏览器自带下载器查看文件！' })
     }
   }
 
@@ -69,6 +70,7 @@ interface Config {
   cbpercentage?: Function  // 获取下载进度的回调函数
   fileName?: string, // 下载后的文件名
   chunkSize?: number, // 每次下载的块大小，默认为 10KB
+  body?: string, // 请求体
 }
 const ajaxBox = {
   downFile: function (blob: Blob | BlobPart, fileName: string) {
@@ -267,7 +269,7 @@ const ajaxBox = {
                 console.log('下载完成.')
                 // 处理下载完成的数据，例如将其保存或显示
                 downFileFn(blob, _fileName)
-                resolve(true)
+                // resolve(true)
               }
             }
           }
@@ -277,7 +279,120 @@ const ajaxBox = {
           reject(error)
         })
     })
-  }
+  },
+
+  // 下载文件:3.0版本:优先使用传递的文件名，若不传递文件问就使用后端返回的文件名
+  downFileFetchV3: function (url: string, params?: Obj, config?: Config) {
+    let options: any = {
+      method: config?.method || 'GET',
+    }
+    let _headers
+    let _fileName = ''
+    if (options.method === 'GET' || options.method === 'get') {
+      _headers = {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      }
+    } else if (options.method === 'POST' || options.method === 'post') {
+      _headers = {
+        'Content-Type': 'application/json', // 设置为json格式
+      }
+    }
+    // 数组请求头: 优先使用传递的请求头，如果没有传递，则使用默认的请求头
+    options['headers'] = config?.headers || _headers
+
+    // 判断请求是否为get请求，若是get请求，则将params参数拼接在url后面
+    if (options.method === 'GET') {
+      const queryString = new URLSearchParams(params).toString()
+      url = url + '?' + queryString
+    }
+    // 处理post请求的参数
+    if ((options.method === 'post' || options.method === 'POST') && params) {
+      options['body'] = JSON.stringify(params)
+    }
+
+    // 定义每次读取的数据块大小（字节）
+    let chunkSize = config?.chunkSize || 10240 // 例如，10KB
+
+    // 初始化已下载的字节数
+    let downloaded = 0
+    // 初始化 Blob 切片起始点
+    let start = 0
+
+    return new Promise((resolve, reject) => {
+      fetch(url, options)
+        .then((res: any) => {
+          if (config?.fileName && res.ok) {
+            // 如果传递了文件名，则直接返回 Blob
+            _fileName = config?.fileName || '附件.xlsx'
+            return res.blob().then((blob: Blob) => ({ blob, _fileName }))
+          } else if (!config?.fileName && res.ok) {
+            // 如果没传递文件名，则使后端返回文件名
+            // 获取响应头中的 Content-Disposition(此属性中包含文件名)如：'attachment; filename="测试文件.xlsx"'
+            const contentDisposition = res.headers.get('Content-Disposition')
+            console.log('后端返回的文件名字符串: ', contentDisposition)
+            if (contentDisposition) {
+              // 解析文件名
+              const fileNameMatch = contentDisposition.match(/filename="(.+)"/)
+              // console.log('文件名数组: ', fileNameMatch)
+              if (fileNameMatch.length > 1) {
+                // 匹配到文件名，则将文件名解码并赋值给 _fileName
+                _fileName = decodeURIComponent(fileNameMatch[1])
+                console.log('后端返回的文件名: ', _fileName)
+                return res.blob().then((blob: Blob) => ({ blob, _fileName }))
+              }
+            }
+          }
+
+          if (!res.ok) {
+            console.log('res: ', res)
+            throw new Error('网络响应不正常！或其他错误')
+          }
+          // 如果没有找到文件名，直接返回 Blob
+          return res.blob().then((blob: Blob) => ({ blob, _fileName }))
+        })
+        .then(({ blob, _fileName }) => {
+          // console.log('blob: ', blob, _fileName)
+          const reader = new FileReader() // 创建 FileReader 对象
+          const readBlobInChunks = () => {
+            // 创建一个 Blob 切片，大小为 chunkSize
+            const chunkBlob = blob.slice(start, start + chunkSize)
+            start += chunkSize // 更新起始点
+            // 读取 Blob 切片
+            reader.readAsArrayBuffer(chunkBlob)
+            reader.onload = () => {
+              // 累加已下载的字节数
+              // downloaded += reader.result.byteLength
+              if (typeof reader.result === 'string' || reader.result === null) {
+                console.log('reader.result不为 ArrayBuffer')
+                // 处理字符串的情况，可能需要转换为 ArrayBuffer 或者其他处理逻辑
+              } else {
+                downloaded += reader.result.byteLength
+              }
+              // 计算下载进度百分比
+              const total = blob.size
+              const progress = ((downloaded / total) * 100).toFixed(2)
+              config?.cbpercentage && config?.cbpercentage(progress) // 如果传递了获取下载进度的回调函数，则调用回调函数传递进度百分比
+              console.log(`下载进度: ${progress}%`)
+              // 如果还有数据未读取，则继续读取
+              if (start < total) {
+                readBlobInChunks()
+              } else {
+                console.log('下载完成.')
+                // 处理下载完成的数据，例如将其保存或显示
+                downFileFn(blob, _fileName, resolve, reject)
+                // resolve(true)
+              }
+            }
+          }
+          readBlobInChunks()
+        })
+        .catch((error) => {
+          console.error('下载文件时出错:', error)
+          reject(error)
+        })
+    })
+  },
+
 
 
   /*
@@ -363,4 +478,27 @@ const exportFile = () => {
       loading.close() // 关闭加载中
     })
 }
+ // 版本3.0：提供了.then和.catch方法，可以更方便地处理异步操作的结果和错误。
+  const loading = ElLoading.service({
+    lock: true,
+    text: 'Loading',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+  const url = CrossAuditModule + 'generate_report_get/'
+  const params = {
+    ids: ids,
+  }
+  ajaxBox
+    .downFileFetchV3(url, params, {
+      method: 'POST',
+    })
+    .then((res) => {
+      console.log('成功: ', res)
+    })
+    .catch((err) => {
+      console.log('失败: ', err)
+    }).finally(() => {
+      loading.close() // 关闭加载中
+    })
+
  */