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

最编程 2024-06-26 22:53:25

...

重点解决PDF传递到响应体中的时候会被浏览器自动打开的问题

普通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();
    }
}

上一篇：下载文件的 15 种方法

下一篇：通过网页实现多种文件下载方式