当前位置: 首页 > news >正文

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);}};

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

相关文章:

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

前端word文档下载文件时不预览直接下载方法支持 doc / excel / ppt / pdf 等 根据需要,要实现一个下载文档的需要 最简单的方法就是使用a标签 如果是相同域可以直接下载,但如果是不同域的,就会先打开一个预览页,在预览页再点下载…...

Java 空值与null 形参与实参学习

Java系列文章目录 文章目录 Java系列文章目录一、前言二、学习内容:三、问题描述四、解决方案:4.1 空值与null的区别4.1.1 空值(Empty Value)4.1.2 Null 4.2 形参与实参区别 五、总结:5.1 学习总结: 一、前…...

【QT常用技术讲解】QTableView添加QCheckBox、QPushButton

前言 QT展示列表信息的时候通常用到列表(比如用户信息、机构信息、设备信息等菜单),当需要对某列进行修改、删除操作时,就需要加入按钮(QPushButton),当需要对多列进行右键菜单操作时&#xff0…...

linux监控命令

在 Linux 中,有许多命令可以用于监控系统的性能和状态。以下是一些常用的监控命令及其用途: 1. top​ 和 htop​ top ​top​ 命令显示当前系统中运行的进程列表及其资源使用情况。 top​​ ‍ htop ​htop​ 是 top​ 命令的增强版,提…...

SpringBoot入门笔记

本文是看黑马老师讲课视频学习笔记整理 目录 入门案例 基于IDEA联网 基于Springboot官网创建 基于阿里云创建项目 手工创建 隐藏文件 入门案例解析: parent​编辑 starter 引导类 内嵌tomcat 入门案例 基于IDEA联网 RestController RequestMapping("/books&…...

python 华为od 单词接龙

sd[word,dd,da,dc,dword,d] # 计算出下一个接龙单词 def jl(sd,st):# sd.remove(st)sd list(set(sd))sends list(st)[-1]lg []sd.sort()for i in sd:if i.startswith(sends):lg.append((i, len(i)))if lg[]:return 0,0lg.sort(keylambda x: x[1],reverseTrue)maxlen lg[0][…...

Vue+Echart实现地图省市区三级下钻

采用在线地图数据&#xff0c;整体简约&#xff0c;扩展也方便 参考 <template><div><div ref"mapContainer" style"width: 100%; height: 600px;"></div><button click"goBack">返回上一级</button></…...

Apache Tomcat 信息泄露漏洞排查处理CVE-2024-21733)

一、漏洞描述 Apache Tomcat作为一个流行的开源Web服务器和Java Servlet容器并用于很多中小型项目的开发中。其中,Coyote作为Tomcat的连接器组件,是Tomcat服务器提供的供客户端访问的外部接口,客户端通过Coyote与服务器建立链接、发送请求并且接收响应。 近日发现Apache To…...

51单片机-LED实验

实现了按下独立按键&#xff0c;LED灯亮&#xff0c;松开独立按键&#xff0c;LED灯灭的功能 #include <8051.h>void delayms(unsigned char t){unsigned char i,j;i900;jt;do{jt;while (j--){/* code */}}while(i--); }void main(){// P2_01;while (1){if(P3_00){delay…...

无人机开启农林植保新篇章

嘿&#xff0c;小伙伴们&#xff0c;你们知道吗&#xff1f;无人机已经悄悄在农业领域大展拳脚&#xff0c;成为现代农业的“黑科技”新宠儿啦&#xff01; 想象一下&#xff0c;广袤的田野上空&#xff0c;无人机如同勤劳的蜜蜂&#xff0c;精准高效地完成着各项任务&#xff…...

第N4周:NLP中的文本嵌入

本文为365天深度学习训练营 中的学习记录博客原作者&#xff1a;K同学啊 任务要求&#xff1a;加载第N1周的.txt文件&#xff0c;使用Embeddingbag与Embedding完成词嵌入 第N1周的.txt文件的名称为“任务文件.txt”&#xff0c;内容为&#xff1a; 比较直观的编码方式是采用上…...

C++高精度减法

高精度减法其实跟加法差不多&#xff0c;首先就是需要逆序存入整数数组&#xff0c;其次就是做运算&#xff0c;最后就是删除前导0逆序输出。 不过在做高精度减法需要考虑一下两个数的关系是有三种的&#xff0c;a>b,a<b ab;思考全面咱们的程序才能拿满分。 以下是完整…...

protobuf cmakelist,msvc utf-8设置

源字符集和执行字符集 源字符集指的是cpp文件中字符串的编码方式 执行字符集指的是exe文件中字符串的编码方式 msvc编译器设置的命令行参数 /source-charset:utf-8 /execution-charset:utf-8 cmake中设置 add_compile_options(“ < < <<CXX_COMPILER_ID:MSVC>…...

Haproxy讲解

Haproxy: haproxy是一个开源的高性能反向代理和负载均衡器&#xff0c;主要用于‌TCP和‌HTTP流量管理。 功能和特点&#xff1a;haproxy能够处理大量的并发连接&#xff0c;支持TCP和HTTP协议&#xff0c;具有高可用性和负载均衡功能。它特别适用于需要处理大量流量的网站&am…...

K8S系列——一、Ubuntu上安装Helm

在使用K8S搭建集群服务时&#xff0c;有时候需要用到Helm&#xff08;一个用于Kubernetes应用管理的工具&#xff09;&#xff0c;下面是在Ubuntu上安装Helm的过程。 1.更新系统软件包列表 sudo apt-get update2.安装必要的依赖项 sudo apt-get install apt-transport-https…...

排序: 插入\希尔\选择\归并\冒泡\快速\堆排序实现

1.排序的概念及应用 1.1概念 排序:所谓排序&#xff0c;就是一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 1.2运用 购物筛选排序&#xff1a; 1.3常见排序算法 2.实现常见的排序算法 int a[ {5,3,9,6,2,4,7,1,8}; 2…...

OpenCV图像处理——按最小外接矩形剪切图像处理ROI后映射回原图像

引言 在图像处理过程中&#xff0c;提取感兴趣区域&#xff08;ROI&#xff09;并在其上进行处理后&#xff0c;往往需要将处理后的结果映射回原图像。这一步通常涉及以下几个步骤&#xff1a; 找到最小外接矩形&#xff1a;使用 cv::boundingRect 或 cv::minAreaRect 提取感兴…...

Linux中以单容器部署Nginx+ASP.NET Core

强烈推荐在生产环境中使用反向代理服务器转发请求到Kestrel Http服务器&#xff0c;本文将会实践将Nginx --->ASP.NET Core 部署架构容器化的过程。 Nginx->ASP.NET Coe部署架构容器化 在Docker中部署Nginx--->ASP.NETCore 有两种选择&#xff0c; 第一种是在单容器…...

【秋招笔试】8.11大疆秋招(第三套)-三语言题解

🍭 大家好这里是 春秋招笔试突围,一起备战大厂笔试 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 | 编程一对一辅导 ✨ 本系列打算持续跟新 春秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 🍒 本专栏已收…...

标题:打造编程学习的知识宝库:高效笔记记录与整理

标题&#xff1a;打造编程学习的知识宝库&#xff1a;高效笔记记录与整理 在编程学习的征途中&#xff0c;有效的笔记记录和整理技巧对于掌握和回顾知识点至关重要。本文将从笔记工具选择、笔记结构设计、以及实践与复习策略三个方面&#xff0c;探讨如何高效地记录并整理编程…...

AI浏览器扩展实战:从原理到应用,提升网页AI体验

1. 项目概述与核心价值如果你和我一样&#xff0c;每天花大量时间在浏览器里和各类AI工具打交道&#xff0c;那你肯定也遇到过这些烦心事&#xff1a;在亚马逊上挑个商品&#xff0c;想问问AI哪个型号更划算&#xff0c;得手动复制粘贴商品信息到另一个聊天窗口&#xff1b;用C…...

2026年全国优质化妆培训机构深度盘点

颜值经济持续升温背景下&#xff0c;2026年化妆行业迎来规范化、专业化发展新阶段&#xff0c;涵盖影视、时尚、婚庆等多个领域&#xff0c;市场对专业化妆人才的需求持续攀升。据相关行业数据显示&#xff0c;2026年美业职业培训市场预计保持11%以上增速&#xff0c;美业门店专…...

2026 年全球网络安全威胁态势与关键技术防御研究

摘要 本文基于 Security Affairs 2026 年第 576 期安全通讯披露的最新网络攻击事件与漏洞情报&#xff0c;系统分析 Linux 无文件远控、内核提权、AI 供应链投毒、钓鱼攻击工业化、关键信息基础设施入侵等新型威胁的技术机理、传播路径与危害特征。研究结合 Quasar Linux RAT、…...

从零手写CNN:理解卷积网络的生物学原理与工程逻辑

1. 项目概述&#xff1a;从人眼到机器之眼&#xff0c;一次真实的视觉理解之旅你有没有盯着一张照片发过呆&#xff1f;比如朋友刚发来的旅行照——蓝天、雪山、一只歪头的雪豹。你几乎是一瞬间就认出了“雪豹”&#xff0c;甚至能判断它“在看镜头”“毛很厚”“可能刚睡醒”。…...

现代Web应用特性管理:从概念到工程实践

1. 项目概述&#xff1a;一个面向现代Web开发的特性管理工具 如果你和我一样&#xff0c;长期在Web应用开发的一线摸爬滚打&#xff0c;那你一定对“特性开关”这个概念不陌生。简单来说&#xff0c;它就像你家里电灯的总闸&#xff0c;可以随时控制某个功能是“亮”还是“灭”…...

多模态AI处理利器:基于MCP协议的Stitch-Pro服务器架构解析

1. 项目概述&#xff1a;一个面向多模态内容处理的“缝合”利器 最近在折腾一个挺有意思的开源项目&#xff0c;叫 stitch-pro-mcp 。这个名字挺直白&#xff0c;“stitch”是缝合&#xff0c;“pro”是专业版&#xff0c;“mcp”则指向了“模型上下文协议”。简单来说&#…...

边缘计算大模型部署实战:从LLaMA量化到树莓派推理优化

1. 项目概述&#xff1a;一个为边缘计算优化的轻量级大语言模型最近在折腾边缘设备上的AI应用&#xff0c;发现一个挺有意思的项目——KuiperLLama。这名字听起来就很有“边缘”感&#xff0c;Kuiper&#xff08;柯伊伯带&#xff09;是太阳系边缘的一个区域&#xff0c;用它来…...

深入u-boot目录结构:以全志V3s的LicheePi Zero为例,理解每个文件夹的作用

深入解析u-boot目录结构&#xff1a;全志V3s平台下的LicheePi Zero实践指南 当你第一次打开u-boot源码仓库时&#xff0c;面对密密麻麻的目录结构可能会感到无从下手。作为嵌入式系统开发中至关重要的启动加载程序&#xff0c;u-boot的架构设计既体现了通用性又兼顾了平台特异…...

秋招编程面试,应届生必备的面试技巧,通过率直接翻倍

文章目录前言一、2026秋招编程面试新趋势&#xff1a;别再用老方法准备&#xff0c;踩坑就出局1.1 八股文不再是核心&#xff0c;底层理解才是硬通货1.2 代码手撕重思路轻结果&#xff0c;工程思维成加分项1.3 项目经历拒绝烂大街&#xff0c;真实落地细节把控是关键二、简历优…...

Go语言单例模式如何实现_Go语言单例模式教程【通俗】

sync.Once是最安全的单例初始化方式&#xff0c;天然解决并发首次调用竞态问题&#xff0c;只执行一次闭包&#xff1b;须作包级或结构体字段&#xff0c;避免局部变量失效&#xff1b;panic后会持续失败&#xff0c;需自行兜底。Go 里 sync.Once 是最安全的单例初始化方式直接…...