普通a标签下载

这是非异步下载，后端注意不要写@ResponseBody
在获取pdf文件流的时候会默认使用浏览器打开。a标签无法解决。

const a = document.createElement('a');
var href= "/template/"+format+"/"+this.templateInfoForm.templateName;
a.setAttribute('href', href);
// 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
var filename = this.templateInfoForm.templateName + "." + format
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 在内存中移除URL 对象
window.URL.revokeObjectURL(herf);

搭配FileSaver的axios异步下载

亲测可以解决pdf下载文件流会先预览的问题。

需要先安装组件：npm install file-saver --save
在当前vue中import组件：import FileSave from 'file-saver'
使用saveAs()方法保存blob文件流，避免预览

var filename = this.templateInfoForm.templateName + "." + format
var url = "/template/"+format+"/"+this.templateInfoForm.templateName;
//异步申请文件流
this.$http.get(url, {headers:{"Content-Type" : "application/octet-stream", },responseType: "blob"}
).then((res) => {var file = new Blob([res.data], { type: 'application/'+format });//直接下载而不预览saveAs(file, filename);
});

搭配FileSaver的原生异步下载

亲测可以解决pdf下载文件流会先预览的问题。

需要先安装组件：npm install file-saver --save
在当前vue中import组件：import FileSave from 'file-saver'
使用saveAs()方法保存blob文件流，避免预览

//访问后端的文件链接
var url = "/template/"+format+"/"+this.templateInfoForm.templateName;
//你要保存的文件名
var filename = this.templateInfoForm.templateName + "." + format
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
//配置请求头
oReq.responseType = "blob";
//对响应对象进行配置
oReq.onload = function() {//对响应头进行配置var file = new Blob([oReq.response], { type: 'application/'+format});//把文件流直接保存到本地，可以避免用浏览器打开（比如pdf）saveAs(file, filename);
};
oReq.send();

后端写入文件流参考

//下载模板的pdf版本
@GetMapping("/template/pdf/{templateName}")
@ResponseBody
public void getPdf(@PathVariable("templateName") String templateName, HttpServletResponse response) {String filePath = templateLocation.getLocation() + templateName + "\\" + templateName + ".pdf";BufferedInputStream bis = null;BufferedOutputStream bos = null;try {bis = new BufferedInputStream(new FileInputStream(filePath));bos = new BufferedOutputStream(response.getOutputStream());byte[] buffer = new byte[1024];int length;while ((length = bis.read(buffer)) != -1) {bos.write(buffer, 0, length);}bis.close();bos.close();}catch (Exception e) {e.printStackTrace();}
}

【下载】前端JS下载文件的三种方法。FileSaver解决了PDF下载会先预览的问题。相关推荐

python下载的库要放到哪里-Python下载url并保存文件的三种方法
本节主要内容: 学习python下载Url并保存文件的方法. Python中通常是使用Http利用urllib或urllib2模块来下载url中的内容. 当然也可以利用ftplib从ftp站点下载文件 ...
android写入文件方法,Android 追加写入文件的三种方法
一.使用FileOutputStream 使用FileOutputStream,在构造FileOutputStream时,把第二个参数设为true public static void method1 ...
python如何实现下载文件_python实现下载文件的三种方法
python实现下载文件的三种方法 Python开发中时长遇到要下载文件的情况,最常用的方法就是通过Http利用urllib或者urllib2模块. 当然你也可以利用ftplib从ftp站点下载文件. ...
python下载方法-python实现下载文件的三种方法_python
本篇文章主要介绍了python实现下载文件的三种方法,最常用的方法就是通过Http利用urllib或者urllib2模块还有requests,有兴趣的可以了解一下. Python开发中时长遇到要下载文 ...
python下载的文件放在哪里的-python实现下载文件的三种方法
Python开发中时长遇到要下载文件的情况,最常用的方法就是通过Http利用urllib或者urllib2模块. 当然你也可以利用ftplib从ftp站点下载文件.此外Python还提供了另外一种方法 ...
python 下载文件-python实现下载文件的三种方法_python
本篇文章主要介绍了python实现下载文件的三种方法,最常用的方法就是通过Http利用urllib或者urllib2模块还有requests,有兴趣的可以了解一下. Python开发中时长遇到要下载文 ...
Powershell下载文件的三种方法
Powershell下载文件的三种方法 Invork-WebRequest WebClient对象 BitsTransfer模块 layout: post title: Powershell下载文件的 ...
php远程读取几行文件,PHP读取远程文件的三种方法
PHP读取远程文件的三种方法 (2008-08-01 14:29:55) 标签: php 下载远程文件 it HP读取远程文件的几种方法,做采集的第一步就是读取远程文件- 1.file_get_con ...
eps文件删除了能恢复吗？恢复误删eps文件的三种方法
eps文件格式专为矢量图像和图形而设计.虽然没有被广泛使用,但它仍然受到各种插画家和平面设计师的钟爱.eps文件十分适合创建徽标和商标设计,主要应用见于广告牌.海报和横幅.可是在使用设备过程中,难免会 ...
php数组如何写入txt文件中_php将数组写入到文件的三种方法
php的数组十分强大,有些数据不存入数据库直接写到文件上,用的时候直接从文件中读取,本文章向大家介绍php将数组写入到文件的三种方法. 第一:serialize方法使用 serialize 将数组序 ...

【下载】前端JS下载文件的三种方法。FileSaver解决了PDF下载会先预览的问题。

文章目录

普通a标签下载

搭配FileSaver的axios异步下载

搭配FileSaver的原生异步下载

后端写入文件流参考

【下载】前端JS下载文件的三种方法。FileSaver解决了PDF下载会先预览的问题。相关推荐

最新文章

热门文章