问题: 后端返回文件流,前端使用axios下载或者在线预览

下载文件流

import axios from 'axios'

// 设置响应类型为blob
axios.get('/api/app/xxx/downloadExcel', { responseType: 'blob' }).then(resp => {
let temp = document.createElement('a') // 创建a标签
temp.download = 'excel.xls'// 设置下载名称 // 创建blob对象,在javascript中blob代表一个二进制流对象,不可修改
const blob = new Blob([resp.data], {
// 类型从响应头中获取
type: resp.headers["content-type"]
});
// 创建对象url,并赋值给a标签
let URL = window.URL || window.webkitURL;
temp.href = URL.createObjectURL(blob); // 手动触发点击事件
temp.click()
})

提示:document.createElement()方法创建的标签,不挂载到document树中,会自动销毁。不用担心内存问题。

在线预览pdf

import axios from 'axios'

axios('/api/app/xxx/pdf', { responseType: 'blob' }).then(res => {
const blob = new Blob([res.data], { type: res.headers["content-type"] });
var URL = window.URL || window.webkitURL;
let href = URL.createObjectURL(blob); // 方法一:使用浏览器自带
window.open(href) // 方法二:使用pdf.js(将pdf.js下载至项目pdf文件夹)
this.pdfUrl = `/pdf/web/viewer.html?file=${encodeURIComponent(href)}` })

后端工具类

package com.tons.utils;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.net.URLEncoder; public class ResponseFileUtils {
public static void responseFile(HttpServletResponse resp, File file) throws IOException {
responseFile(resp, file, false);
} public static void responseFile(HttpServletResponse resp, File file, boolean pdfDownload) throws IOException {
// 错误处理
if (!file.exists()) throw new RuntimeException(file.getAbsolutePath() + " 文件不存在"); // 判断是否pdf
int a = file.getName().toLowerCase().lastIndexOf('.');
int b = file.getName().toLowerCase().indexOf("pdf");
if (a < b && !pdfDownload) {
// 允许浏览器预览
resp.setHeader("content-type", "application/pdf;chartset=UTF-8");
resp.setHeader("Content-Disposition", "fileName=" + URLEncoder.encode(file.getName(), "utf-8"));
} else {
resp.setHeader("content-type", "application/octet-stream");
// attachment 告知浏览器,这个文件流应该是下载的
resp.setHeader("Content-Disposition", "attachment;fileName=" + URLEncoder.encode(file.getName(), "utf-8"));
} // 读取文件,响应给浏览器
ServletOutputStream out = resp.getOutputStream();
FileInputStream in = new FileInputStream(file);
int size = 0;
byte[] data = new byte[1024];
while (true) {
int n = in.read(data, 0, data.length);
if (n <= 0) break;
size += n;
out.write(data, 0, n);
}
resp.setContentLength(size); // 返回大小
in .close();
out.close();
}
}

axios 下载文件流或者预览在线pdf的更多相关文章

  1. JS通过使用PDFJS实现基于文件流的预览功能

    需求: 使用JS实现PDF文件预览功能 备选方案: 使用ViewerJS,官网  http://viewerjs.org/ 使用PDFJS,官网  https://mozilla.github.io/ ...

  2. Office在线预览及PDF在线预览的实现方式史上最全大集合

    Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPD ...

  3. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  4. 解决vue、js 下载图片浏览器默认预览而不是下载

    在网页上,如果我们下载的地址对应的是一个jpg文件,txt文件等,点击链接时,浏览器默认的是打开这些文件而不是下载,那么如何才能实现默认下载呢? 后端解决 这就是Content-Disposition ...

  5. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  6. vue element之axios下载文件(后端Python)

    axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuff ...

  7. [java]文件上传下载删除与图片预览

    图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...

  8. java原装代码完成pdf在线预览和pdf打印及下载

    这是我在工作中,遇到这样需求,完成需求后,总结的成果,就当做是工作笔记,以免日后忘记,当然,能帮助到别人是最好的啦! 下面进入正题: 前提准备: 1. 项目中至少需要引入的jar包,注意版本: a)  ...

  9. python爬虫处理在线预览的pdf文档

    引言 最近在爬一个网站,然后爬到详情页的时候发现,目标内容是用pdf在线预览的 比如如下网站: https://camelot-py.readthedocs.io/en/master/_static/ ...

  10. windows 下 php 实现在线预览附件(pdf)

    (写的有点啰嗦,具体的实现方法只是粗体和代码就够了) 给市场部门用dede做个cms,需要附件在线查看.公司有个系统(就叫develop_cms吧)是已经实现的,本以为很容易,不过是下一个插件然后把附 ...

随机推荐

  1. Linux 下使用Docker 安装 LNMP环境 超详细

    首先在阿里云购买了一台服务器 选择了华南-深圳地区 操作系统选用了 CentOS8.0 64位 1. 初始化账号密码 登陆xshell,开始装Docker 一.安装docker 1.Docker 要求 ...

  2. Win10系统安装U盘,安装纯净版Win10的通用教程

    安装前准备:1.准备8G或8G以上U盘(32G以内).2.制作U盘会格式化U盘,U盘内的重要文件也要事先备份好.操作步骤:1.打开微软下载WIN10网址:(如果网址无法打开,可以下载解压运行附件内的工 ...

  3. 【机器学习】李宏毅——Explainable ML(可解释性的机器学习)

    在前面的学习之中,我们已经学习了很多的模型,它能够针对特定的任务,接受我们的输入并产生目标的输出.但我们并不满足于此,我们甚至希望机器告诉我们,它是如何得到这个答案的,而这就是可解释的机器学习. Wh ...

  4. Codeforces Hello 2023 CF 1779 A~F 题解

    点我看题 A. Hall of Fame 先把不用操作就合法的情况判掉.然后发现交换LL,RR,RL都是没用的,只有交换LR是有用的,这样可以照亮相邻的两个位置.所以我们就是要找到一个位置i,满足\( ...

  5. Hadoop详解(05) – MapReduce

    Hadoop详解(05) – MapReduce MapReduce概述 定义 MapReduce是一个分布式运算程序的编程框架,是用户 "基于Hadoop的数据分析应用" 开发的 ...

  6. CentOS7.6搭建Hadoop2.7.2运行环境-三节点集群模式

    一 环境准备 1.    准备机器 2.    修改静态IP 3.    修改主机名 4.    关闭防火墙 5.    创建普通用户hadoop 添加hadoop用户 [root@hadoop102 ...

  7. 使用java代码调用rabbitmq接口进行新增编辑mq用户、虚拟机vhost、动态创建交换机exchange、队列queue以及设置权限,绑定vhost与exchange等操作

    使用java代码操作rabbitmq时,首先需要一个有创建用户等权限的管理员账号,需要在rabbitmq的后台管理页面手动创建这个账号,系统推荐的这几个tag可以让账号有rabbitmq后台管理页面的 ...

  8. ArcGIS工具 - 批量合并数据库

    在ArcGIS数据建库和入库过程中,经常需要将数据结构相同.数据内容不同的多个数据库文件进行合并,使用工具臬中复制.合并.追加都可以达到一定的效果,但都不能直接支持数据库的操作.当合并成百上千个数据库 ...

  9. BBS项目 未完待续

    项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 创建项目配置 环境配置 TEMPLATES = [ { 'BACKEND': 'django.template. ...

  10. [cocos2d-x]关于Action

    Action的分类 第一种:FiniteTimeAction类:有限时间的动作类 第二种:Follow类:节点跟随另一种节点的类 第三种:Speed类:节点执行速度类 第一种有限时间的动作类又分为瞬时 ...