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

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

相关推荐
被考核重击2 分钟前
浏览器原理
前端·笔记·学习
网络研究院7 分钟前
Firefox 146 为 Windows 用户引入了加密本地备份功能
前端·windows·firefox
Mr.Jessy10 分钟前
JavaScript高级:深入对象与内置构造函数
开发语言·前端·javascript·ecmascript
幸运小圣35 分钟前
深入理解ref、reactive【Vue3工程级指南】
前端·javascript·vue.js
用户479492835691537 分钟前
面试官最爱挖的坑:用户 Token 到底该存哪?
前端·javascript·面试
Irene199141 分钟前
Web前端开发中的垃圾回收详解
前端
Heo1 小时前
Vue3.4中diff算法核心梳理
前端·javascript·面试
惜.己1 小时前
前端笔记(二)
前端·笔记
O***p6041 小时前
前端的“复杂性红线”:如何在超大型应用时代构建可持续演进的前端架构?
前端·架构
腾讯TNTWeb前端团队1 小时前
hel+发布了,一起体验原生跨端js模块联邦
前端