vue js 前端实现PDF文件下载的三种方式 解决vue下载pdf文件打开文件后空白

2024年6月6日 197次阅读 来源: 一只敲码的猫~

PDF 下载方法一

这个方法是通过调用服务，服务端给前端返回pdf文件流（不是字节流）。在用blob下载。貌似所有方法都是文件流下载的吧。

	// 后端服务地址方法
	api(id).then(res => { 
		let blob = new Blob([res]);
		let objectUrl = URL.createObjectURL(blob);
		let link = document.createElement('a');
		link.download = '我的pdf文件.pdf'
		link.href = objectUrl;
		link.click();
		link.remove();
	})

PDF 下载方法二

这个方面比较牛逼了，不知道那个大牛发明的，我只是搬运工，有个条件服务端返回值必须是文件流，请求方式必须是get。这个方法有个问题，就是下载的文件名不能自定义。这个下载方法能解决下载pdf文件打开文件后空白的问题。

	downPdf(id) { 
		const IFRAME = document.createElement("iframe");
		IFRAME.style.display = "none";
		IFRAME.style.height = 0;
		// src 就是请求服务地址自行修改。
		IFRAME.src = `http://192.168.xx.xxx:8080/api/getpdf?id=${ id}`;
		document.body.appendChild(IFRAME);
		setTimeout(() => { 
			IFRAME.remove();
		}, 60 * 1000);
	},

PDF 下载方法三

这种方法就是用浏览器里的下载方式啦。

<!-- PdfUrl是文件地址 例如：https://blog.csdn.net/files/我的pdf文件.pdf-->
<iframe width="100%" height="750px" :src="PdfUrl" ></iframe>
    原文作者：一只敲码的猫~
    原文地址: https://blog.csdn.net/qq_38946996/article/details/121424810
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞