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

78 篇文章 2 订阅
40 篇文章 1 订阅

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>
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue实现PDF文件下载非常简单,只需要通过Vue的axios库向后端发送请求获取二进制PDF文件的数据流,然后将其转换为Blob对象,并使用URL.createObjectURL()将其转换为可下载的URL,接着再使用a标签的download属性实现下载即可。 具体实现如下: 1.安装axios库 npm install axios --save 2.在Vue组件中引入axios和FileSaver库 import axios from 'axios'; import FileSaver from 'file-saver'; 3.在Vue组件方法中实现PDF文件下载 downloadFile() { axios.get('http://localhost:8080/api/download/pdf', { responseType: 'arraybuffer' }) .then(response => { const blob = new Blob([response.data], { type: 'application/pdf' }); const fileName = 'test.pdf'; FileSaver.saveAs(blob, fileName); }) .catch(error => { console.error('Error downloading PDF file', error); }); } 4.在后端实现返回二进制PDF文件的接口 @RequestMapping(value = "/download/pdf", method = RequestMethod.GET) @ResponseBody public ResponseEntity<byte[]> downloadPDF() throws IOException { File file = new File("test.pdf"); byte[] bytes = FileUtils.readFileToByteArray(file); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); headers.setContentDispositionFormData("attachment", "test.pdf"); headers.setContentLength(bytes.length); return new ResponseEntity<byte[]>(bytes, headers, HttpStatus.OK); } 以上是Vue实现PDF文件下载的简单示例,可以通过修改接口地址和文件名来适应不同的场景。同时,需要注意的是该方法需要在前端启动了服务器的情况下才能正常使用。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值