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

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

相关推荐
weixin_4624462319 小时前
用 Python 自动生成双面打印英语单词闪卡(Flashcards)PDF
python·pdf·记忆卡
码上出彩19 小时前
H5+CSS3响应式设计实战:基于Flex布局的适配方案
前端·css·css3
你说爱像云 要自在漂浮才美丽19 小时前
【HTML5与CSS3】
前端·css3·html5
倪枫20 小时前
CSS3——文本样式(字体样式和文本布局)
前端·css·css3
AC赳赳老秦20 小时前
Notion+DeepSeek:搭建个人工作看板与自动化任务管理规则
前端·javascript·人工智能·自动化·prometheus·notion·deepseek
木斯佳20 小时前
周末杂谈:Chrome CSS 2025-声明式Web的革命之年
前端·css·chrome
Dragon Wu20 小时前
React Native KeyChain完整封装
前端·javascript·react native·react.js·前端框架
晚霞的不甘20 小时前
Flutter for OpenHarmony 布局探秘:从理论到实战构建交互式组件讲解应用
开发语言·前端·flutter·正则表达式·前端框架·firefox·鸿蒙
运筹vivo@20 小时前
BUUCTF: [极客大挑战 2019]BabySQL
前端·web安全·php·ctf
Beginner x_u1 天前
前端八股文 Vue下
前端·vue.js·状态模式