vue3+ts 前端word文档下载文件时不预览直接下载方法(支持 doc / excel / ppt / pdf 等)

前端word文档下载文件时不预览直接下载方法支持 doc / excel / ppt / pdf 等

根据需要,要实现一个下载文档的需要
在这里插入图片描述
最简单的方法就是使用a标签
如果是相同域可以直接下载,但如果是不同域的,就会先打开一个预览页,在预览页再点下载。
在这里插入图片描述
但其实我希望得到的效果是,当我点击下载时,可以直接下载,不要预览,可以使用如下方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码如下:

const downloadRecordHandler = (url) => {console.log("url", url);let filename = "xxxxxxx"; //文件名getBlob(url).then((blob) => {saveAs(blob, filename);});};const getBlob = (url) => {return new Promise((resolve) => {const xhr = new XMLHttpRequest();xhr.open("GET", url, true);xhr.responseType = "blob";xhr.onload = () => {if (xhr.status === 200) {resolve(xhr.response);}};xhr.send();});};const saveAs = (blob, filename) => {if (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, filename);} else {const link = document.createElement("a");const body = document.querySelector("body");link.href = window.URL.createObjectURL(blob);link.download = filename;link.style.display = "none";body.appendChild(link);link.click();body.removeChild(link);window.URL.revokeObjectURL(link.href);}};

这样就实现了我想要的效果。

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

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

相关文章

StarRocks Lakehouse 快速入门——Apache Paimon

StarRocks Lakehouse 快速入门指南为您提供了湖仓技术概览,旨在帮助您迅速掌握其核心特性、独特优势和应用场景。本指南将指导您如何高效地利用 StarRocks 构建解决方案。文章末尾,我们集合了来自阿里云、饿了么、喜马拉雅和同程旅行等行业领导者在 Star…

Eureka原理与实践:构建高效的微服务架构

Eureka原理与实践:构建高效的微服务架构 Eureka的核心原理Eureka Server:服务注册中心Eureka Client:服务提供者与服务消费者 Eureka的实践应用集成Eureka到Spring Cloud项目中创建Eureka Server创建Eureka Client(服务提供者&…

什么叫日志门面

日志门面,是门面模式的一个典型的应用。 门面模式(Facade Pattern),也称之为外观模式,其核心为:外部与一个子系统的通信必须通过一个统一的外观对象进行,使得子系统更易于使用。 就像Log4j、Lo…

stm32智能颜色送餐小车(ESP8266WIFI模块、APP制作、物联网模型建立、MQTTFX)

大家好啊,我是情谊,今天我们来介绍一下我最近设计的stm32产品,我们在今年七月份的时候参加了光电设计大赛,我们小队使用的就是stm32的智能送餐小车,虽然止步于省赛,但是还是一次成长的经验吧,那…

Linux系统-通用权限管理

目录 一、文件类型 二、通用权限 1.文件的常规权限 权限类型 壹.对于文件: 贰.对于目录: 查看和修改权限 说明: 举例: 字母表示法 数字表示法 2.文件的访问控制列表(FACL File access control list&#…

菱形继承和虚继承

菱形继承(Diamond Inheritance)是指在多重继承的情况下,某个类继承自两个类,而这两个类又都继承自同一个基类的情况。 在这个结构中,D 直接从 A 继承了 A 的所有特性,但通过 B 和 C 继承,这会导…

eNSP 华为三层交换机配置DHCP

华为三层交换机配置DHCP 华为DHCP原理:(思科四个都是广播包) 1、客户端广播发送DHCP Discover包。用于发现当前局域网中的DHCP服务器。 2、DHCP服务器单播发送DHCP Offer包给客户端。携带分配给客户端的IP地址。 3、客户端广播发送DHCP Resqe…

索引的数据结构

1.举例引出索引: 1.1.什么是索引: 1.2.数据查找分析: a.数据查找: 1.如上图所示,数据库没有索引的情况下,数据分布在硬盘不同的位置上面,读取数据时,摆臂需要前后摆动查找数据,这…

Java方法04:命令行传递参数

本节视频链接:https://www.bilibili.com/video/BV12J41137hu?p48&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5https://www.bilibili.com/video/BV12J41137hu?p48&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 在Java中,‌命令行传递参数…

PyTorch--深度学习

onux部署功能 cpu运行时间 3. 自动求导 求导结果为:2 1 1

考试题型宏观分析之公共营养师三级

背景 第一遍知识学习之后,打印《2023.10.14公共营养师三级真题》进行第一次摸底,首要目标在于通过摸底,对于考试题型进行宏观分析和了解,其次,对于后续的学习进行有的放矢 直至2024-08-18,对于上述资料的一…

Apache-JMeter压测工具教程

下载安装 《JMeter官网下载》 下载完成后,找个文件夹进行解压 配置环境变量 JAVA_HOME(如果是JAVA8还需要配置CLASSPATH)、JMETER_HOME JMETER_HOME修改bin目录下的jmeter.properties文件编码为UTF-8 5.6.3这个版本encoding已经默认为UT…

肿瘤细胞表皮生长因子EGFR靶向肽;GE11;YHWYGYTPQNVI

【GE11简介】 GE11肽是从噬菌体展示肽库中筛选出来的一种有效的EGFR配体,它是一种十二肽,可以高亲和力和选择性地与EGFR特异性结合。GE11已广泛用于EGFR阳性肿瘤的放射治疗、基因治疗和化疗药物的诊断和靶向递送。 【中文名称】肿瘤细胞表皮生长因子肽…

理解Tomcat的IP绑定与访问控制

在使用Spring Boot开发应用时,内置的Tomcat容器提供了灵活的网络配置选项。特别是,当计算机上有多个网卡时,如何配置server.address属性显得尤为重要。本文将详细探讨不同IP配置对Tomcat服务访问的影响。 多网卡环境下的IP配置 假设你的计算…

微前端架构:使用不同框架构建可扩展的大型应用

概述 在现代Web开发中,随着业务复杂度的不断提高,单一的巨型应用逐渐难以满足高效开发和维护的需求。微前端架构作为一种解决方案,允许将一个大型应用拆分成多个独立的小型应用,这些小型应用可以单独开发、部署,并且能…

【Neo4j系列】简化Neo4j数据库操作:一个基础工具类的开发之旅

作者:后端小肥肠 在Neo4j系列我打算写一个Neo4j同步关系数据库、增删改查及展示的基础小系统,这篇文件先分享系统里面的基础工具类,感兴趣的可以点个关注,看了文章的jym有更好的方法可以分享在评论区。 创作不易,未经允…

快讯 | OpenAI 找回场子:chatgpt-4o-latest 刷新多项AI跑分纪录

在数字化浪潮的推动下,人工智能(AI)正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展,捕捉行业动态;提供深入的新闻解读,助您洞悉技术背后的逻辑;汇聚行业专家的见解,…

微信支付代理商-自助提交资料源码之结算信息页面—微信支付商机版

一、支付代理上自助提交资料 一般在都在小程序完成提交 在网页中异常提示alert 但是很多小程序禁用了这个函数 并且不好看 那么久自定义一个组件每次直接调用 二、提示技术代码 function 未来之窗_VOS_通用提醒(msg){var 未来之窗内容message<cyberdiv style"font…

C++| QT图片调整透明度叠加

QT图片调整透明度叠加 实际效果界面UI放置控件设置布局界面自适应 代码项目工程的文件初始化按钮功能滑动条功能图片调整透明度叠加 实际效果 三个图片&#xff08;QLabel&#xff09;显示&#xff0c;两个按钮&#xff08;QPushButton&#xff09;加载图片&#xff0c;一个&a…

Spring 声明式事务 @Transactional

目录 一、添加依赖 二、Transactional 作用 三、Transactional详解 3.1 rollbackFor 3.2 事务隔离级别 3.3 Spring 事务传播机制 Spring 声明式事务 Transactional的使用很简单&#xff0c;只需要添加依赖&#xff0c;在需要的方法或者类上添加 Transactional注解即可。 …