通过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、浏览器下载文件:

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

相关推荐
鹏程十八少3 分钟前
Android 一套代码适配车机/手机横竖屏?看我如何用搞定小米、比亚迪、蔚来、理想、多品牌架构设计
android·前端·面试
持续升级打怪中8 分钟前
从前端到大模型:我的AI转型之路与实战思考
前端·人工智能
2501_930707788 分钟前
使用C#代码重新排列 PDF 页面
开发语言·pdf·c#
LYFlied9 分钟前
【性能优化】图片渲染性能优化全流程方案详解
前端·性能优化
『六哥』11 分钟前
零基础搭建完成完整的前后端分离项目的准备工作
前端·后端·项目开发
沛沛老爹14 分钟前
Web开发者实战AI Agent:基于Dify实现OpenAI Deep Research智能体
前端·人工智能·gpt·agent·rag·web转型
冬奇Lab15 分钟前
【Cursor进阶实战·01】Figma设计稿一键还原:Cursor + MCP让前端开发提速10倍
android·前端·后端·个人开发·figma
JarvanMo19 分钟前
用 Flutter、SwiftUI 和 Compose 写同一个界面:一份真实开发者的实测报告
前端
可以吧可以吧19 分钟前
前端vue jenkins打包资源增加阿里云oss+cdn加速
前端·vue.js·jenkins
hashiqimiya26 分钟前
vue项目的选择星级样式和axios依赖调用
前端·javascript·vue.js