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

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

相关推荐
JIngJaneIL35 分钟前
助农惠农服务平台|助农服务系统|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·助农惠农服务平台
云外天ノ☼40 分钟前
待办事项全栈实现:Vue3 + Node.js (Koa) + MySQL深度整合,构建生产级任务管理系统的技术实践
前端·数据库·vue.js·mysql·vue3·koa·jwt认证
一位搞嵌入式的 genius44 分钟前
前端实战开发(三):Vue+Pinia中三大核心问题解决方案!!!
前端·javascript·vue.js·前端实战
塞纳河畔的歌44 分钟前
保姆级教程 | 麒麟系统安装Edge浏览器
前端·edge
多睡觉觉1 小时前
数据字典:从"猜谜游戏"到"优雅编程"的奇幻之旅
前端
嗝屁小孩纸1 小时前
开发集成热门小游戏(vue+js)
前端·javascript·vue.js
赛博切图仔1 小时前
深入理解 package.json:前端项目的 “身份证“
前端·javascript
UIUV1 小时前
JavaScript 学习笔记:深入理解 map() 方法与面向对象特性
前端·javascript·代码规范
太平洋月光1 小时前
MJML邮件如何随宽度变化动态切换有几列📮
前端·css
AAA不会前端开发1 小时前
TypeScript核心类型系统完全指南
前端·typescript