通过XMLHttpRequest和window.open在浏览器中打开文件流pdf以及下载pdf

1、浏览器预览pdf:

首先通过接口获取文件流数据

下发是源码

var xhr = new XMLHttpRequest();

xhr.open("GET", 'http://www.baidut.com/downloadFile');

xhr.responseType = "blob";

xhr.onload = function(){

if(this.status == 200){

var blob = new Blob([this.response],{type: 'applocation/pdf;chartset=UTF-8'});

var url = window.URL.createObjectURL(blob);

window.open(url, "_blank");

}

};

xhr.send();

当然我这里使用的是原生的,如果可以的也可以使用axios、ajax都是可以的,反正都是通过接口获取文件流进而通过blob不同的类型转换用于浏览器的展示;blob的type有很多,还有图片image/png等等

2、浏览器下载文件:

浏览器下载文件和预览差不多

相关推荐
Highcharts.js1 分钟前
技术组合分析:Highcharts 的数据集成能力解析
java·前端·金融·echarts·saas·bi·highcharts
在下有个宝贝3 分钟前
GIS前端开发之路——Openlayers为地图添加自定义标注(四)
前端
a1117765 分钟前
RIPPLE 流体交互(html 开源)
前端·javascript·html
薛定猫AI10 分钟前
【深度解析】Qwen 3.6 Max Preview:面向智能体编码、视觉推理与 Three.js 前端生成的能力拆解
开发语言·前端·javascript
HashTang17 分钟前
我的开源项目帮独立开发者和 OPC 省掉的,不只是刷信息的时间
前端·ai编程·aiops
掘金者阿豪20 分钟前
Spring Data JPA 接入金仓数据库:少写代码,多干活
前端·后端
Moment24 分钟前
AI 时代,为什么全栈项目越来越离不开 Monorepo 和 TypeScript
前端·javascript·后端
shaoFan138 分钟前
关于java 调用阿里千问大模型,流式返回,并返回给前端
java·前端·状态模式
❆VE❆1 小时前
React基础篇(三):项目中 React 基础核心知识点实战
前端·javascript·react.js·前端框架
Momo__1 小时前
contenteditable 深度剖析:让网页元素「活」起来
前端·html