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

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

相关推荐
四季予你667 分钟前
vue2 和 vue3 的区别
前端·javascript·vue.js
炒毛豆18 分钟前
vue3+ant design vue实现可编辑表格弹出气泡弹出窗~
前端·javascript·vue.js
寰宇软件18 分钟前
vue组件注册
前端·javascript·vue.js
OEC小胖胖36 分钟前
js进阶-作用域是什么
开发语言·前端·javascript·ecmascript·web
东方翱翔1 小时前
HTML中的文字与分区标记
java·前端·html
海绵波波1071 小时前
Zotero使用(一)PDF文件导入不会自动识别
pdf
职场人参2 小时前
将多个pdf合并成一个文件?这几种合并方法很好用!
linux·前端·css
2401_856926932 小时前
图片转PDF技巧揭秘:四款高效工具推荐!
学习·pdf·图片转pdf·图片转pdf工具
小彭努力中2 小时前
20. gui调试3-下拉菜单、单选框
前端·3d·webgl
佩淇呢2 小时前
uniapp vue3 梯形选项卡组件
前端·vue.js·uni-app