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

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

相关推荐
Zsnoin能3 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房3 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
摆烂为不摆烂8 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue778 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑38 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~1 小时前
重学前端003 --- CSS 颜色
前端·css
慧一居士1 小时前
CSS和CSS3区别对比
前端·css3
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
中微子1 小时前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪1 小时前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构