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

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

相关推荐
sjd_积跬步至千里2 分钟前
CSS实现文字横向无限滚动效果
前端
维他AD钙3 分钟前
前端基础避坑:3 个实用知识点的简单用法
前端
journs4 分钟前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙5 分钟前
elpis项目DSL设计分享
前端
李李记6 分钟前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞6 分钟前
快速掌握 ProseMirror 的核心概念
前端
ygria10 分钟前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
玩泥巴的26 分钟前
.NET驾驭Word之力:理解Word对象模型核心 (Application, Document, Range)
word·二次开发·office·com互操作
墨渊君2 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu2 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端