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

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

相关推荐
运筹vivo@2 分钟前
BUUCTF: [SUCTF 2019]EasySQL
前端·web安全·php
holeer2 分钟前
14步入门Vue|cn.vuejs.org教程学习笔记
前端·javascript·vue.js·笔记·前端框架·教程·入门
是席木木啊1 小时前
RuoYi-Vue-Plus UI前端页面布局调整
前端·vue.js·ui
Web极客码3 小时前
WordPress 6.8有哪些新特性
前端·javascript·html
UXbot8 小时前
UI设计工具推荐合集
前端·人工智能·ui
敲敲了个代码9 小时前
如何优化批量图片上传?队列机制+分片处理+断点续传三连击!(附源码)
前端·javascript·学习·职场和发展·node.js
@AfeiyuO9 小时前
Vue 引入全局样式scss
前端·vue·scss
光影少年9 小时前
flex布局和grid布局区别,实现两边固定布局中间自适应
前端·css3·web·ai编程
全栈测试笔记9 小时前
异步函数与异步生成器
linux·服务器·前端·数据库·python
EndingCoder10 小时前
配置 tsconfig.json:高级选项
linux·前端·ubuntu·typescript·json