Vue下载文件的两种方法以及文件流处理

news2024/11/14 20:52:54
点击按钮下载文件

1.文件流形式
   pdfHeaders: {
                'Authorization': localStorage.getItem('Access-Token').replace(/"/g, ''),
                'Content-Type': 'application/json',
            },      
    
downLoad(){
             let getUrl = ''
            if (process.env.NODE_ENV === "development") {
                getUrl = `测试地址`
            } else if (process.env.NODE_ENV === "production") (
                getUrl = `生产地址`
            )
            //打开合同协议为文件流的方法
            axios({
                method: 'post',
                url: getUrl,
                data: this.formData,
                responseType: 'blob',
                headers: this.pdfHeaders,

            }).then(response => {
 let decodedString = decodeURIComponent(response.headers['content-disposition'].split(';')[1].split('=')[1]);  文件名在响应头里,需要后端设置Access-Control-Expose-Headers: Content-Disposition
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', '协议模版.pdf'); // 设置下载的文件名
                document.body.appendChild(link); // 需要添加到文档中
                link.click(); // 触发下载
                document.body.removeChild(link); // 下载后移除链接
            })
}
2.文件为链接形式

a标签不能直接下载非同源的文件,因此需要特殊处理

     getAuthAgreementUrl(this.formData).then(res => {
                let x = new XMLHttpRequest();
                x.open("GET", res.data(链接地址), true);
                x.responseType = 'blob';
                 x.onload = function (e) {
                    var url = window.URL.createObjectURL(x.response)
                     var a = document.createElement('a');
                     a.href = url
                     a.download = '文件名';
                     a.click()
                 }
                 x.send();
             })
PS:如果有mock.js记得取消引入,mock.js会重写请求
3.Blob对象转换成String字符串
reader.onload中的定义的变量如何抛出去
第一种 在外部定义方法    
let reader = new FileReader();
                    reader.readAsText(response.data, 'utf-8');
                    reader.onload = e => {
                        this.showError(reader.result)
          }

    //报错处理
        showError(response) {
            let temp = JSON.parse(response);
            let errorMes = ''
            errorMes = temp.message
            this.errorMesShow = errorMes
            this.$message.error(this.errorMesShow)
        },



第二种Promise抛出去:
function uploadFile(file) {    
        return new Promise(function(resolve, reject) {    
        let reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload = function() {
            resolve(this.result)
        }
    })
}
uploadFile(file).then(function(result){
})

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

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

相关文章

浅探空间智能

空间智能,这一概念在人工智能领域逐渐升温,部分归功于AI界的领军人物李飞飞博士所领导的创新项目。 Seeing is for doing and learning. 【精校】TED:李飞飞 | 空间智能让AI理解真实世界 2024.5 李飞飞在 X 上介绍称,「空间智能…

【流媒体】基于libRTMP的H264推流器

目录 1. 整体流程2. 代码2.1 头文件2.2 c文件 3. 测试 RTMP协议相关: 【流媒体】RTMP协议概述 【流媒体】RTMP协议的数据格式 【流媒体】RTMP协议的消息类型 【流媒体】RTMPDump—主流程简单分析 【流媒体】RTMPDump—RTMP_Connect函数(握手、网络连接&a…

智云-一个抓取web流量的轻量级蜜罐docker一键启动

智云-一个抓取web流量的轻量级蜜罐docker安装教程 github地址 https://github.com/xiaoxiaoranxxx/POT-ZHIYUN docker快速启动(v1.4) git clone https://github.com/xiaoxiaoranxxx/POT-ZHIYUN.git cd POT-ZHIYUN docker-compose up -d默认映射到80和8080端口 mysql不对外开放…

leetcode67. 二进制求和,简单模拟

leetcode67. 二进制求和 给你两个二进制字符串 a 和 b ,以二进制字符串的形式返回它们的和。 示例 1: 输入:a “11”, b “1” 输出:“100” 示例 2: 输入:a “1010”, b “1011” 输出:“10101” …

【Java】 力扣 最大子数组和

目录 题目链接题目描述思路代码 题目链接 53.最大子数组和 题目描述 思路 动态规划解析: 状态定义: 设动态规划列表 dp ,dp[i] 代表以元素 nums[i] 为结尾的连续子数组最大和。 为何定义最大和 dp[i] 中必须包含元素 nums[i] :…

一款免费的文件锁定占用解除工具,绿色免安装版

IObit Unlocker是一款由IObit公司开发的免费文件解锁工具,旨在解决用户在删除、重命名、移动或复制文件和文件夹时遇到的“无法删除”或“访问被拒绝”的问题。该软件体积小巧,不到3MB,非常易于使用,并且不需要安装,可…

【现代操作系统】3. 中断、异常、系统调用

通用概念 中断(Interrupt) 外部硬件设备所产生的信号异步:产生原因和当前执行指令无关,如程序被磁盘读打断 异常(Exception) 软件的程序执行而产生的事件包括系统调用同步:产生和当前执行或试图…

【AI学习】LLaMA模型的微调成本有几何?

在前面文章《LLaMA 系列模型的进化(二)》中提到了Stanford Alpaca模型。 Stanford Alpaca 基于LLaMA (7B) 进行微调,通过使用 Self-Instruct 方法借助大语言模型进行自动化的指令生成,Stanford Alpaca 生成了 52K 条指令遵循样例数…

【数据结构与算法】穷举搜索

穷举搜索目录 一.穷举搜索的原理二.穷举问题的引入三.穷举搜索的实现四.穷举搜索的高效版 一.穷举搜索的原理 列出所有可能出现的情况,逐个判断有那些是符合问题要求的条件. 通常可以从两方面分析: 问题所涉及的情况答案需要满足的条件 二.穷举问题的引入 有20枚硬币&#…

电价预测 | TSOA-TCN-Attention凌日算法优化时序卷积神经网络电价预测

目录 效果一览基本介绍程序设计 效果一览 基本介绍 电价预测 | TSOA-TCN-Attention凌日算法优化时序卷积神经网络电价预测 电价预测需求:随着能源市场的开放和电力交易的增加,准确的电价预测对于市场参与者的决策至关重要。而时序数据中的规律和趋势对于…

中小型制造企业质量管理设计与实现

文章目录 前言具体实现截图详细视频演示技术栈系统测试为什么选择我官方认证玩家,服务很多代码文档,百分百好评,战绩可查!!入职于互联网大厂,可以交流,共同进步。有保障的售后 代码参考数据库参…

多线程并行

多线程并行、所有线程结束后输出任务完成 示例 package com.fd;import java.util.concurrent.TimeUnit; import java.util.concurrent.atomic.AtomicInteger;public class Test3 {public static void main(String[] args) throws InterruptedException {AtomicInteger counter…

【数据结构入门】二叉树之堆的实现

文章目录 前言一、树1.1 树的概念1.2 树的相关概念 二、二叉树2.1 二叉树的概念2.2 特殊的二叉树2.3 二叉树的性质 三、堆3.1 堆的概念3.2 堆的性质3.3 堆的存储3.4 堆的实现3.4.1 堆的初始化3.4.2 堆的销毁3.4.1 堆向上调整算法3.4.2 堆向下调整算法3.4.3 堆的创建3.4.4 堆的插…

MT2523AS 原边10瓦无外围方案PCB设计要点

MT2523AS 是自供电原边反馈5V2A(10瓦)电源芯片。MT2523AS 内置功率三极管,采用脉冲频率调制(PFM)建立非连续导电模式(DCM)的反激式电源,外围设计极简化。MT2523AS 具有可变原边峰值电流,通过最大…

AI技术在招聘人才笔试测评中的作用

一、引言 在快速变化的商业环境中,企业之间的竞争日益激烈,而人才作为企业发展的核心驱动力,其选拔与培养显得尤为重要。传统的人才招聘流程,尤其是笔试测评环节,往往依赖于人工阅卷、主观判断,不仅效率低…

每日一问:深入理解JVM——结构与类的加载过程解析

每日一问:深入理解JVM——结构与类的加载过程解析 在Java的世界中,JVM(Java Virtual Machine,Java虚拟机)是一个核心概念。它是Java程序能够跨平台运行的基础,负责执行Java字节码,并为Java应用程…

成为Python砖家(3): 何时产生字节码 .pyc 文件

好奇:.pyc和 __pycache__是啥? 你是否好奇,在某些 Python 工程中,当执行了 xxx.py脚本后,多出了 __pycache__目录?这个目录下存放的是一些 .pyc结尾的文件。 这些文件,叫做 python bytecode。 …

电子信息工程专业学习路线的制定与实践

电子信息工程专业是一个多学科交叉、技术更新迅速的领域。对于大学生来说,制定合适的学习路线并有效学习专业知识至关重要。 目录 一、明确学习目标 二、构建知识体系 三、掌握基础知识 四、深入专业课程 五、实践与理论相结合 六、学习编程语言 七、参与科研…

345345

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话: 知不足而奋进,望远山而前行&am…

数学建模起步感受(赛前15天)

0基础直接上手数模,因为大一!年轻就是无所畏惧!开个玩笑,因为数模比赛比一年少一年… 抱着不打也是浪费的态度,我开始着手准备 首先python啥也不会,知道有元组这玩意… 仅仅在刷软考题的时候遇到python选择…