vue js 前端实现PDF文件下载的三种方式 解决vue下载pdf文件打开文件后空白
PDF 下载方法一这个方法是通过调用服务,服务端给前端返回pdf文件流(不是字节流)。在用blob下载。貌似所有方法都是文件流下载的吧。// 后端服务地址方法api(id).then(res => {let blob = new Blob([res]);let objectUrl = URL.createObjectURL(blob);let link = document.createEl
·
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>
更多推荐
已为社区贡献5条内容
所有评论(0)