上传文件组件-实现pc端直接下载弹框

 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-27 13:07:02
+ * @LastEditTime: 2024-07-27 19:30:34
  * @FilePath: /data-table/src/components/FileUploaderField/index.vue
  * @Description: 文件上传控件
 -->
@@ -121,10 +121,62 @@ const downloadFile = (item) => {
     window.location.href = item.url;
   } else {
     // 不在微信内置浏览器中，直接打开下载链接
-    window.open(item.url, '_blank');
+    fileLinkToStreamDownload(item.url, item.name, item.name.split('.').pop());
   }
 }
 
+// TAG: 文件下载操作
+/**
+ * 数据流下载
+ * @param {*} url
+ * @param {*} fileName
+ * @param {*} type
+ */
+const fileLinkToStreamDownload = (url, fileName, type) => {
+  let reg =
+    /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
+  if (!reg.test(url)) {
+    throw new Error("传入参数不合法,不是标准的文件链接");
+  } else {
+    let xhr = new XMLHttpRequest();
+    xhr.open("get", url, true);
+    xhr.setRequestHeader("Content-Type", `application/${type}`);
+    xhr.responseType = "blob";
+    xhr.onload = function () {
+      if (this.status == 200) {
+        //接受二进制文件流
+        var blob = this.response;
+        downloadExportFile(blob, fileName, type);
+      }
+    };
+    xhr.send();
+  }
+}
+/**
+ * 下载文件
+ * @param {*} blob
+ * @param {*} fileName
+ * @param {*} fileType
+ */
+const downloadExportFile = (blob, fileName, fileType) => {
+  let downloadElement = document.createElement("a");
+  let href = blob;
+  if (typeof blob == "string") {
+    downloadElement.target = "_blank";
+  } else {
+    href = window.URL.createObjectURL(blob); //创建下载的链接
+  }
+  downloadElement.href = href;
+  downloadElement.download = fileName;
+  document.body.appendChild(downloadElement);
+  downloadElement.click(); //点击下载
+  document.body.removeChild(downloadElement); //下载完成移除元素
+  if (typeof blob != "string") {
+    window.URL.revokeObjectURL(href); //释放掉blob对象
+  }
+}
+/************ END ************/
+
 // 文件类型中文页面显示
 const type_text = computed(() => {
   return props.item.component_props.file_type;