常见的下载方式

一. 使用 window.open()

  1. 使用场景
// 1. 先封装一个实习下载的函数
export const download = (path) => {window.open('下载的接口,例如:/fs/download?path' + path)
}
// 2. 使用:在需要下载的地方调用download函数,传入下载的url
download(path)
  1. 可能出现的问题
    • 页面闪烁
    • 如果是嵌入在别的模块中可能无法下载
  2. 解决办法:造成上述问题的原因都是window.open()默认打开一个新窗口
export const download = (path) => {window.location.href = '下载的接口,例如:/fs/download?path' + path //不闪屏
}

二. 使用 a 标签

  1. a标签download下载
 <!-- href是下载资源的相对路径 --><a href="./margin塌陷1.jpg" download target="_blank">点击我下载</a>

可以看到图片、markdown、word都可以正常下载
在这里插入图片描述

  1. a标签 + fetch实现下载
// 封装download函数
export const download = (href, method = 'GET', data = null, newName = '') => {let params = {method,header: {'Content-Type': 'application/json;charset=utf-8' },}if(method == 'post' || method == 'POST'){params['body'] = JSON.stringify(data)}fetch(href, params).then(res => {res.blob().then(blob => {let a = document.createElement('a')document.body.appendChild(a)let url = window.URL.createObjectURL(blob)a.href = urla.download = newName ? newName : (res.headers.get('filename') ? decodeURI(res.headers.get('filename')) : 'file')a.click()window.URL.revokeObjectURL(url)a.remove()this.$message.success('下载成功!')})}).catch(() => {this.$message.error('下载失败!')})
}// 引用下载
download('/fs/download?path=' + path, 'GET', null, filename)

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

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

相关文章

视频批量剪辑矩阵分发系统源码开源分享----基于PHP语言

批量剪辑视频矩阵分发&#xff1a; 短视频seo主要基于抖音短视频平台&#xff0c;为企业实现多账号管理&#xff0c;视频分发&#xff0c;视频批量剪辑&#xff0c;抖音小程序搭建&#xff0c;企业私域转化等&#xff0c;本文主要介绍短视频矩阵系统抖音小程序开发详细及注意事…

linux创建进程

linux创建进程 准备工作 准备工作 在Ubuntu64系统上 1、安装GCC和Make工具 编译器GCC&#xff1a;把C源码转为二进制程序 Make&#xff1a;自动编译多源文件项目 sudo apt-get update #更新存储库 sudo apt-get install build-essential #安装build-essential包 gcc --versio…

docker之 Consul(注册与发现)

目录 一、什么是服务注册与发现&#xff1f; 二、什么是consul 三、consul 部署 3.1建立Consul服务 3.1.1查看集群状态 3.1.2通过 http api 获取集群信息 3.2registrator服务器 3.2.1安装 Gliderlabs/Registrator 3.2.2测试服务发现功能是否正常 3.2.3验证 http 和 ng…

关于异数OS服务器CPU效能分析工具

该工具发布背景 近年来&#xff0c;国产服务器CPU产业的逐渐发展&#xff0c;但由于专业性较差&#xff0c;与国外存在40年以上技术差距&#xff0c;一些服务器CPU厂商利用信息差来制造一些非专业的数据夸大并虚假宣传混淆视听&#xff0c;成功达到劣币驱良币的目标&#xff0…

【论文笔记】最近看的时空数据挖掘综述整理8.27

Deep Learning for Spatio-Temporal Data Mining: A Survey 被引用次数&#xff1a;392 [Submitted on 11 Jun 2019 (v1), last revised 24 Jun 2019 (this version, v2)] 主要内容&#xff1a; 该论文是一篇关于深度学习在时空数据挖掘中的应用的综述。论文首先介绍了时空数…

react css 污染解决方法

上代码 .m-nav-bar {background: #171a21;.content {height: 104px;margin: 0px auto;} }import React from "react"; import styles from ./css.module.scssexport default class NavBar extends React.Component<any, any> {constructor (props: any) {supe…

数组(个人学习笔记黑马学习)

一维数组 1、定义方式 #include <iostream> using namespace std;int main() {//三种定义方式//1.int arr[5];arr[0] 10;arr[1] 20;arr[2] 30;arr[3] 40;arr[4] 50;//访问数据元素/*cout << arr[0] << endl;cout << arr[1] << endl;cout &l…

Redis怎么测试?

有些测试朋友来问我&#xff0c;redis要怎么测试&#xff1f;首先我们需要知道&#xff0c;redis是什么&#xff1f;它能做什么&#xff1f; redis是一个key-value类型的高速存储数据库。 redis常被用做&#xff1a;缓存、队列、发布订阅等。 所以&#xff0c;“redis要怎么…

web自动化框架:selenium学习使用操作大全(Python版)

目录 一、浏览器驱动下载二、selenium-python安装&#xff08;打开网站、操作元素&#xff09;三、网页解析&#xff08;HTML、xpath&#xff09;四、selenium基本操作1、元素定位八种方法2、元素动态定位3、iframe切换4、填充表单_填充文本框5、填充表单_单选按钮6、填充表单_…

山海优选卷轴模式源码实例分享

山海优选通过与绿色有机产品供应商和生产商的合作&#xff0c;建立起稳定的供应链关系&#xff0c;确保产品的绿色、有机、健康。通过产品认证和检测&#xff0c;为会员提供可信赖的绿色产品。积分激励机制设计 山海优选引入“绿色积分”机制&#xff0c;通过会员购买产品、参与…

docker 搭建私有仓库和制作镜像

目录 1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 1.1 启动mysql镜像 1.2 启动owncloud镜像 1.3 浏览器访问 1.4 总结 2、安装搭建私有仓库 Harbor 2.1 下载docker-compose并赋予执行权限 2.2 磁盘挂载&#xff0c;保存harbor 2.3 修改配置文件…

4G WiFi LoRa无线外夹式超声波管道流量计MQTT/http协议 json数据说明

ip&#xff1a;114.128.112.131 port&#xff1a;1883 uname&#xff1a;scwl_flowmeter pwd&#xff1a;b123 topic&#xff1a;iot/data/scwlflowmeter { “deviceId”:“设备序列号”, “flow”:“瞬时流量&#xff08;浮点数&#xff09;”, “heatFlow”:“瞬时热流量&am…

Web 自动化神器 TestCafe—页面高级操作篇

♥ 前 言 在【Web 自动化神器 TestCafe — 页面基本操作篇】这篇文章中我们介绍了TestCafe页面交互的一些基本使用 Web 自动化神器 TestCafe — 页面基本操作篇 这篇文章接着上一篇来给大家介绍一下 TestCafe 页面交互的一些高级操作。 一、鼠标拖拽 鼠标拖拽鼠标拖拽 …

JavaScript常见的运算符

一、运算符和运算元 1.认识运算符 在小学的时候我们就学习了各种运算符&#xff0c;比如加号 、乘号 *、减号 - 、除号/ 几乎所有的编程语言都有各种各样的运算符(也被称之为操作符&#xff0c;operators) 初次接触这些运算符, 你会感觉种类繁多, 难以记忆.但是并不需要特别…

Kotlin判断null比较let布尔值Boolean

Kotlin判断null比较let布尔值Boolean class MyData {val count: Int? 2023val number: Int? null }fun main(args: Array<String>) {val data MyData()val year 2022if (data.count ! null) {if (data.count > year) {println("data.count ! null")}}…

CSS 盒子模型

前言 盒子模型-组成 CSS盒子模型是一种用来描述元素在页面布局中占据空间的模型。它将每个元素看作由内容区域、内边距、边框和外边距组成的一个矩形框。 盒子模型的组成部分包括&#xff1a; 内容区域&#xff08;Content&#xff09;&#xff1a;显示元素的实际内容&#xf…

无涯教程-Android - Frame Layout函数

Frame Layout 旨在遮挡屏幕上的某个区域以显示单个项目&#xff0c;通常&#xff0c;应使用FrameLayout来保存单个子视图&#xff0c;因为在子视图彼此不重叠的情况下&#xff0c;难以以可扩展到不同屏幕尺寸的方式组织子视图。 不过&#xff0c;您可以使用android:layout_grav…

Axure RP 8.1.0.3400(原型设计工具)

Axure RP 8是一款原型设计工具&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助用户创建高质量的网页、移动应用和桌面软件原型。以下是Axure RP 8的一些特色介绍&#xff1a; 强大的交互设计&#xff1a;Axure RP 8支持创建复杂的动画和过渡效果&#xff0c;让你的原型更…

微信短链跳转到小程序指定页面调试

首先说下背景&#xff1a;后端给了短链地址&#xff0c;但是无法跳转到指定页面。总是在小程序首页。指定的页面我们是h5页面。排查步骤如下&#xff1a; 1、通过快速URL Scheme 编译。上部普通编译 下拉找到此选项。 、 2、按照小程序的要求的URL Scheme输入。另外后端给的…