【js】记录预览pdf文件

接口调用拿到pdf的文件流,用blob处理这个文件流拿到url,使用window.open跳转新的窗口进行预览

api({
	dataType: 'blob',
}).then(res =>{
	if(res.code === 0){
	   this.previewPDF(
	     res,
	     'application/pdf;charset=utf-8',
	     'pdf文件名'
	   )
	 }
})

previewPDF (res, type, fname) {
    try {
      if(!res|| !res.data || !res.headers) {
        throw new Error("Invalid response")
      }
      const fileType = res.headers['content-type'] || type
      console.log(res.headers['content-type'])  
      const blob = new Blob([res.data], {type: fileType})
      console.log(blob)  
      const urlObject = URL.createObjectURL(blob)
      console.log(urlObject ) 
      window.open(urlObject, '_blank');
    }catch(err) {
      throw new Error("预览失败")
    }
}

接口返回的数据
在这里插入图片描述
打印res.headers['content-type']
在这里插入图片描述
响应头
在这里插入图片描述
请求头
在这里插入图片描述

打印blob
在这里插入图片描述
打印urlObject
在这里插入图片描述
文件预览
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/944582.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue3 +Element-Plus el-select下拉菜单样式(局部生效)

下拉框代码 <el-selectclass"buttons-switch-group select-hub":teleported"false"style"width: 120px"v-model"queryParam.type"placeholder"请选择"size"mini"change"loadData"><el-option…

手机h5加桌面图标

手机h5应用1&#xff0c;网址浏览器添加到桌面&#xff0c;修改图标 关键代码 <!-- 手机h5加桌面图标 --> <!-- 安卓平台 chrome --> <link relapple-touch-icon-precomposed href<% BASE_URL %>logonew.png> <meta name"mobile-web-app-capab…

从家谱的层级结构 - 组合模式(Composite Pattern)

组合模式&#xff08;Composite Pattern&#xff09; 组合模式&#xff08;Composite Pattern&#xff09;组合模式概述组合模式涉及的角色talk is cheap&#xff0c; show you my code总结 组合模式&#xff08;Composite Pattern&#xff09; 组合模式&#xff08;Composite…

JavaEE 3大组件 Listener Servlet Filter

1. Listener不熟悉 2. Servlet Servlet: Server Applet&#xff0c;翻译为运行在服务端的Java小程序&#xff0c;是sun公司提供一套规范( 接口 )&#xff0c;用来定义我们的代码怎么写才能被tomcat识别。 本质&#xff1a;接口&#xff0c;一个类想要被tomcat正确识别&…

Debian-linux运维-docker安装和配置

腾讯云搭建docker官方文档&#xff1a;https://cloud.tencent.com/document/product/213/46000 阿里云安装Docker官方文档&#xff1a;https://help.aliyun.com/zh/ecs/use-cases/install-and-use-docker-on-a-linux-ecs-instance 天翼云常见docker源配置指导&#xff1a;htt…

探索PyTorch:从入门到实践的demo全解析

探索PyTorch:从入门到实践的demo全解析 一、环境搭建:PyTorch的基石(一)选择你的“利器”:安装方式解析(二)步步为营:详细安装步骤指南二、基础入门demo:点亮第一盏灯(一)张量操作:深度学习的“积木”(二)自动求导:模型学习的“幕后英雄”三、数据处理demo:喂饱…

vulnhub靶机billu_b0x精讲

靶机下载 https://www.vulnhub.com/entry/billu-b0x,188/ 信息收集 扫描存活主机 nmap -sP 192.168.73.0/24 192.168.73.141为目标主机&#xff0c;对其进行进一步信息收集 端口扫描 nmap --min-rate10000 -p- 192.168.73.141 目标只开放了22和80端口 针对端口进行TCP探…

碰一碰发视频矩阵系统源码搭建,支持OEM

一、引言 随着短视频的火爆发展&#xff0c;碰一碰发视频的矩阵系统逐渐受到关注。这种系统能够实现用户通过碰一碰设备&#xff08;如 NFC 标签&#xff09;快速触发视频的发布&#xff0c;在营销推广、互动体验等领域有着广泛的应用前景。本文将详细介绍碰一碰发视频矩阵系统…

使用Kubernetes部署MySQL+WordPress

目录 前提条件 部署MySQL和WordPress 编写yaml文件 应用yaml文件 存在问题及解决方案 创建PV(持久化卷) 创建一个PVC(持久化卷声明) 部署添加PVC 查看PV对应的主机存储 删除资源 查看资源 删除deployment和service 查看主机数据 删除PVC和PV 删除主机数据 前提条…

Python笔记(6)-文件及IO操作

文件的基本操作 python操作文件的步骤&#xff1a; 1、打开文件&#xff1a; 变量名open(filename,mode,encoding) 2、操作文件&#xff1a; 变量名.read() 变量名.writer(s) 3、关闭文件&#xff1a; 变量名.close() def my_write():#1、&#xff08;创建&#xff09;…

windows系统下使用cd命令切换到D盘的方法

windows系统下使用cd命令切换到D盘的方法 系统环境配置 win10系统原装C盘后期自己安装的硬盘D盘 python3.8安装在D盘中 问题说明 winR打开终端&#xff0c;使用 cd d:命令&#xff0c;无法将当前目录切换到D盘 解决方法 方法一&#xff1a;使用下面这条命令 cd /d d:运…

iOS 苹果开发者账号: 查看和添加设备UUID 及设备数量

参考链接&#xff1a;苹果开发者账号下添加新设备UUID - 简书 如果要添加新设备到 Profiles 证书里&#xff1a; 1.登录开发者中心 Sign In - Apple 2.找到证书设置&#xff1a; Certificate&#xff0c;Identifiers&Profiles > Profiles > 选择对应证书 edit &g…

香橙派5Plus启动报错bug: spinlock bad magic on cpu#6, systemd-udevd/443

一、问题 如图&#xff1a; 接上调试串口&#xff0c;每次启动都会报错。不过使用过程中没有发现有什么影响。 百度查阅&#xff0c;有一位博主提到&#xff0c;但是没有细说解决方案&#xff1a; spinlock变量没有初始化_spinlock bad magic on-CSDN博客https://blog.csdn.n…

小程序配置文件 —— 13 全局配置 - window配置

全局配置 - window配置 这里讲解根目录 app.json 中的 window 字段&#xff0c;window 字段用于设置小程序的状态栏、导航条、标题、窗口背景色&#xff1b; 状态栏&#xff1a;顶部位置&#xff0c;有网络信号、时间信息、电池信息等&#xff1b;导航条&#xff1a;有一个当…

UI页面布局分析(4)- 贵族 特权分页列表

引言 在现在移动应用中&#xff0c;展示用户特权的UI设计不仅是吸引用户的关键手段&#xff0c;更是提升产品体验的重要部分。特别是在直播场景中&#xff0c;贵族特权作为一种高价值用户身份的象征&#xff0c;通常需要通过精致的页面和流程的交互来突出其重要性和独特性。 …

Spring Boot教程之三十九: 使用 Maven 将 Spring Boot 应用程序 Docker 化

如何使用 Maven 将 Spring Boot 应用程序 Docker 化&#xff1f; Docker是一个开源容器化工具&#xff0c;用于在隔离环境中构建、运行和管理应用程序。它方便开发人员捆绑其软件、库和配置文件。Docker 有助于将一个容器与另一个容器隔离。在本文中&#xff0c;为了将Spring B…

【208】车辆管理系统

--基于SSM车辆管理系统 主要功能: 个人中心 员工管理 用户管理 基础数据管理 车辆管理 保养登记管理 事故登记管理 维修登记管理 违章登记管理 开发技术栈: 开发语言 : Java 开发软件 : Eclipse/MyEclipse/IDEA JDK版本 : JDK8 开发框架 : SSM 服务器 : Tomcat8/…

Linux系统编程——线程

目录 一、前言 二、线程 1、线程的理解 三、线程相关的接口 1、线程的创建 2、线程的等待 3、实验 四、总结 1、线程优点 2、线程缺点 3、线程异常 4、Linux下的进程与线程对比 一、前言 之前的文章中我们已经对进程相关的概念做了认识&#xff0c;从创建进程、子进…

从百度云网盘下载数据到矩池云网盘或者服务器内

本教程教大家如何快速将百度云网盘数据集或者模型代码文件下载到矩池云网盘或者服务器硬盘上。 本教程使用到了一个开源工具 BaiduPCS-Go&#xff0c;官方地址 &#xff1a; https://github.com/qjfoidnh/BaiduPCS-Go 这个工具可以实现“仿 Linux shell 文件处理命令的百度网…

手机租赁平台开发全攻略打造高效便捷的租赁服务系统

内容概要 手机租赁平台开发&#xff0c;简单说就是让用户能轻松租赁各类手机的高效系统。这一平台不仅帮助那些想要临时使用高端手机的人们节省了不少资金&#xff0c;还为商家开辟了新的收入渠道。随着智能手机的普及&#xff0c;很多人并不需要长期拥有一部手机&#xff0c;…