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

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

相关推荐
芳草萋萋鹦鹉洲哦24 分钟前
【tauri+pixijs】关于unicode/ascII/GB2312
前端·tauri·pixijs
木易 士心31 分钟前
th-table 中 基于双字段计算的表格列展示方案
前端·javascript·angular.js
E_ICEBLUE1 小时前
三步完成 Markdown 到 Word/PDF 的转换:Python 教程
python·pdf·word·markdown·格式转换
fakaifa1 小时前
【全开源】智慧共享农场源码独立版+uniapp前端
前端·uni-app·智慧农场·源码下载·智慧农场小程序·智慧共享农场
toooooop81 小时前
uniapp多个页面监听?全局监听uni.$emit/$on
前端·javascript·uni-app
骨子里的偏爱1 小时前
【案例】uniapp实现内部信息与外部的html网页双向通信的完整的过程,附加完整的代码部分
前端·uni-app·html
爱泡脚的鸡腿2 小时前
uni-app D4 实战(小兔鲜)
前端·vue.js·架构
星火飞码iFlyCode2 小时前
iFlyCode+SpecKit应用:照片等比智能压缩功能实现
前端·javascript
广白2 小时前
钉钉小程序直传文件到 阿里云OSS
前端·vue.js·uni-app
zyfts3 小时前
🔥告别 20 分钟等待!NestJS 生产级消息队列 BullMQ 实践指南
前端·后端