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

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

相关推荐
Dragon Wu12 小时前
Web前端 认证token的安全存储策略
前端·javascript·安全·react.js·前端框架
橙露12 小时前
各类 Shell 优劣势深度解析与实战选型指南
前端·chrome
广州华水科技12 小时前
单北斗GNSS在变形监测中的应用与发展探讨
前端
克里斯蒂亚诺更新12 小时前
vue2 单文件组件加入浏览器的title和ico的方法
前端·javascript·html
芝芝葡萄12 小时前
VsCode中使用Codex
前端·ide·vscode·编辑器·ai编程
wangmengxxw13 小时前
SpringAI-mcp-入门案例
java·服务器·前端·大模型·springai·mcp
觉醒大王13 小时前
简单说说参考文献引用
java·前端·数据库·学习·自然语言处理·学习方法·迁移学习
开开心心就好13 小时前
免费抽奖工具支持批量导入+自定义主题
linux·运维·服务器·macos·pdf·phpstorm·1024程序员节
weixin_4492900113 小时前
EverMemOS 访问外部(deepinfra)API接口
java·服务器·前端
鱼毓屿御13 小时前
Tailwind CSS配置进阶
前端·css