前端form表单+ifarme方式实现大文件下载

news2024/9/17 8:44:26

// main.js

import Vue from 'vue';
import App from './App.vue';
import { downloadTokenFile } from '@/path/to/your/function'; // 替换为您的函数路径

// 将 downloadTokenFile 添加到 Vue 原型上
Vue.prototype.$downloadTokenFile = downloadTokenFile;

new Vue({
  el: '#app',
  render: h => h(App),
});
// ExampleComponent.vue


export default {
  methods: {
    async downloadFile() {
      try {
        const params = {
          // 下载时的具体参数
                id: row.id,
        };
        await this.$downloadTokenFile('/api/download-url', params);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
/* Ended by AICoder, pid:3998fad1c627467144b30897c0b61912c4b6e505 */
import { getDownloadToken } from '@/api/service';

function createHiddenIframe() {
  const iframe = document.createElement('iframe');
  iframe.name = 'downLoadframe';
  iframe.id = 'hiddenIframe';
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
}

function downloadFile(url, params = {}, authInfo) {
  if (!document.getElementById('hiddenIframe')) {
    createHiddenIframe();
  }

  const iframe = document.getElementById('hiddenIframe');
  const form = document.createElement('form');
  form.method = 'post';
  form.enctype = 'multipart/form-data';
  form.style.display = 'none'; // 隐藏表单

  for (const key in params) {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    input.value = params[key];
    form.appendChild(input);
  }

  document.body.appendChild(form);
  form.action = `${url}?uuid=${authInfo.uuid}&value=${authInfo.value}`;
  form.target = 'downLoadframe';

  form.submit();

  iframe.onload = function () {
    const response = JSON.parse(iframe.contentWindow.document.body.innerText);
    if (response.code !== 0) {
      handleFailure(response.message);
    } else {
      handleSuccess();
    }
  };

  setTimeout(() => {
    document.body.removeChild(form);
    document.body.removeChild(iframe);
  }, 1000); // 等待1秒后移除表单
}

async function downloadTokenFile(url, params) {
  const uuid = new Date().getTime();
  const { data, code } = await getDownloadToken(uuid);

  try {
    if (code === 0) {
      const downloadParams = {
        ...params, //下载时具体参数 对象格式
      };
      const authInfo = {
        //鉴权信息
        value: data,
        uuid,
      };
      downloadFile(url, downloadParams, authInfo);
    } else {
      handleFailure('获取下载令牌失败');
    }
  } catch (error) {
    console.error(error);
    handleFailure('下载文件时发生错误');
  }
}

function handleSuccess() {
  alert('文件下载成功');
}

function handleFailure(message) {
  alert(message);
}

export { downloadTokenFile };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2116919.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c++ string类的模拟实现的注意事项

一.构造函数 第一种形式,使用字符指针赋值 为了防止修改,我们传入了常量字符串。但是这里的初始化列表出错了,因为_str是一个变量,将常量给到一个变量涉及到权限的放大,是错误的。那该怎么写呢?对_str的赋…

证书学习(四)X.509数字证书整理

目录 一、X.509证书 介绍1.1 什么是 X.509证书?1.2 什么是 X.509标准?1.3 什么是 PKI?二、X.509证书 工作原理2.1 PKI 的基础——加密算法2.2 PKI 证书编码三、X.509证书 结构3.1 证书字段3.2 证书扩展背景: 我们在日常的开发过程中,经常会遇到各种各样的电子证书文件,其…

【每日一题】LeetCode 2181.合并零之间的节点(链表、模拟)

【每日一题】LeetCode 2181.合并零之间的节点(链表、模拟) 题目描述 给定一个链表,链表中的每个节点代表一个整数。链表中的整数由 0 分隔开,表示不同的区间。链表的开始和结束节点的值都为 0。任务是将每两个相邻的 0 之间的所…

虚拟机VMware桥接网络命令来重置 /etc/sysconfig/network-scripts/ifcfg-ens33 文件

ifcfg-ens33 文件专门用于配置这个特定的网络接口。 有时候把ifcfg-ens33文件配置弄乱了,可以使用命令重置。 最常用的方式是通过 nmcli 或者 nmtui 来重置网络接口的配置。 第一种方法. 使用 nmcli 命令重置网络配置 nmcli 是一个强大的网络管理命令行工具&…

闯关leetcode——3.Longest Substring Without Repeating Characters

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/longest-substring-without-repeating-characters/description/ 内容 Given a string s, find the length of the longest substring without repeating characters. Example 1: Input: s “abc…

力扣最热一百题——矩阵置零

目录 题目链接:73. 矩阵置零 - 力扣(LeetCode) 题目描述 示例 提示: 解法一:采用标记数组遍历处理 Java写法: C写法: 优化 解法二:优化解法之标记变量 Java写法:…

【鸿蒙HarmonyOS NEXT】UIAbility的生命周期

【鸿蒙HarmonyOS NEXT】UIAbility的生命周期 一、环境说明二、UIAbility的生命周期三、示例代码加以说明四、小结 一、环境说明 DevEco Studio 版本: API版本:以12为主 二、UIAbility的生命周期 概念: HarmonyOS中的UIAbility是一种包含…

入门pytorch

卷积神经网络模型 卷积神经网络(简称 CNN)是一种专为图像输入而设计的网络。它最明显的特征就是具有三个层次,卷积层,池化层,全连接层。 借用一张图,下图很好的表示了什么是卷积(提取特征&…

机器学习:多种算法处理填充后的数据

在机器学习中,填充数据(即处理缺失值)后,选择合适的算法并优化模型以提高召回率是一个常见的任务。召回率是指模型正确识别的正例占所有实际正例的比例。 代码思路: 数据预处理: 导入填充后的数据 …

FastGPT自定义插件的icon

最近研究FastGPT的自定义插件,经过好几天的折磨,终于实现了一个简单的发送邮件功能,但是呢在使用的时候发现插件的icon是默认的fastgpt的logo,那肯定得自定义一个啊。直接说方法: 1、自定义插件下面的template.json文件…

zookeeper相关面试题

zk的数据同步原理?zk的集群会出现脑裂的问题吗?zk的watch机制实现原理?zk是如何保证一致性的?zk的快速选举leader原理?zk的典型应用场景zk中一个客户端修改了数据之后,其他客户端能够马上获取到最新的数据吗…

握 手 问 题

目录 一:问题描述 二:思路: 三:代码: 四:结果:1204 一:问题描述 小蓝组织了一场算法交流会议,总共有50 5050 人参加了本次会议。在会议上,大家进行了握手交流。按照…

excel如何删除某列或者某区域的重复数据

先,鼠标选中想要去除重复数据的某列或者某区域 然后,点击上方栏中的【数据】-【删除重复数据】: 之后,表格里只留下了无重复的数据

STM32(十一):ADC数模转换器实验

AD单通道: 1.RCC开启GPIO和ADC时钟。配置ADCCLK分频器。 2.配置GPIO,把GPIO配置成模拟输入的模式。 3.配置多路开关,把左面通道接入到右面规则组列表里。 4.配置ADC转换器, 包括AD转换器和AD数据寄存器。单次转换,连…

Kafka (快速)安装部署

文章目录 1、软件下载&配置环境1_JDK安装2_Zookeeper安装3_Kafka安装 2、单机安装1_配置主机名和IP映射2_单机Kafka配置 3、集群安装1_配置主机名和IP的映射关系2_时钟同步3_Zookeeper配置信息4_集群Kafka配置 4、kafka的其他脚本命令5、监控工具Kafka-eagle安装 1、软件下…

Java并发编程实战 07 | 如何正确停止线程

什么时候需要停止一个线程? 一个线程被创建并启动之后,大部分情况下都会自然运行至结束,但是也有一些情况需要主动停止线程,比如: 用户主动取消执行:用户可能会中止一个正在进行的操作,这时需…

Python系统教程004(字符串)

一、input函数的算术运算 一包奥特曼卡片卖0.5元,小华想编写一个只需要输入卡片的包数就能自动计算价格的程序,请你帮帮它。 解题 报出类型错误 注意: input函数接收到的键盘信息,默认都是字符串的数据类型。 字符串的数据类型…

书生浦语三期实战营 [进阶] LMDeploy 量化部署进阶实践

LMDeploy 量化部署进阶实践 1 配置LMDeploy环境 1.1 InternStudio开发机创建与环境搭建 在终端中,让我们输入以下指令,来创建一个名为lmdeploy的conda环境,python版本为3.10,创建成功后激活环境并安装0.5.3版本的lmdeploy及相关…

IM即时通讯,稳定可靠的即时通讯服务-WorkPlus

在现代企业日常工作中,即时通讯已成为了一种不可或缺的沟通工具。为了满足企业对稳定可靠的即时通讯服务的需求,WorkPlus提供了一款优秀的IM即时通讯平台,以满足企业高效沟通和协作的要求。本文将深入探讨IM即时通讯服务的重要性以及WorkPlus…

Linux下的RTC应用

RTC RTC基础知识 1. RTC简介 RTC 全称是 Real-Time clock,翻译过来是实时时钟。实时时钟在日常生活中的应用也比较泛,比如电子时钟。实时时钟可以为系统提供精确的实时时间,通常带有电池,可以保证系统断电时还可以正常工作&…