【js】记录预览pdf文件

news2025/5/15 10:33:00

接口调用拿到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
在这里插入图片描述
文件预览
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3中的自定义指令与合成API

Vue3中的自定义指令与合成API 一、什么是自定义指令? 自定义指令是 Vue.js 中一项强大特性,它允许我们直接操作 DOM。自定义指令有两个主要用途:作为组件的辅助性工具或者操作 DOM。在 Vue.js 2.x 中,自定义指令的基本定义方式是通…

Java的list中状态属性相同返回true的实现方案

文章目录 项目背景方案一、for循环实现实现思路 方案二、stream实现实现思路 项目背景 在项目中会遇到list中多个状态判断,状态值相等时,总体返回为true。 方案一、for循环实现 实现思路 遍历list,当出现不一致时,直接跳出循环…

新服务器ubuntu系统相关操作

1、查看驱动:驱动版本535.216.01能够支持cuda12.2,下面直接使用默认安装的cuda。 2、赋予用户管理员权限。 首先有超级用户(root)权限来编辑 /etc/sudoers 文件,visudo 是一个命令,用于安全地编辑 /etc/sudoers 文件。运行: sudo visudo 在 visudo 编辑器中,找到类似…

项目报 OutOfMemoryError 、GC overhead limit exceeded 问题排查以及解决思路实战

项目报 OutOfMemoryError、GC overhead limit exceeded 问题排查以及解决思路实战 前言: 问题现象描述: 1,生产环境有个定时任务,没有初始化告警数据【告警数据量为1000多个】 2,其他定时任务执行正常 3,查…

sql字段值转字段

表alertlabel中记录变字段 如何用alertlabel表得到下面数据 实现的sql语句 select a.AlertID, (select Value from alertlabel where AlertIDa.AlertID and Labelhost) as host, (select Value from alertlabel where AlertIDa.AlertID and Labeljob) as job from (select …

前后端分离(前后端交互步骤)

1.设计数据库 /*Navicat Premium Data Transfer ​Source Server : localhost_3306Source Server Type : MySQLSource Server Version : 80037 (8.0.37)Source Host : localhost:3306Source Schema : studymysql ​Target Server Type : MySQL…

从零开始学AI,完成AI 企业知识库的AI问答搭建

1:本地安装一个ollama玩下,ollama下载模型默认路径为C盘,但该盘空间不足。 解决方案:添加系统环境变量OLLAMA_MODELS,设置其值为新的路径。 2:安装完成后,访问http://127.0.0.1:11434/ 查看服务…

Redis6为什么引入了多线程?

大家好,我是锋哥。今天分享关于【Redis6为什么引入了多线程?】面试题。希望对大家有帮助; Redis6为什么引入了多线程? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 6 引入了多线程的主要目的是提高性能&#…

C# OpenCV机器视觉:产品计数

在一个阳光灿烂得有点 “嚣张” 的早晨,阿强正在实验室里和他那些宝贝仪器们 “眉来眼去”,捣鼓他的最新宝贝项目。突然,实验室的门被 “砰” 地一声撞开,他的好朋友小王像个没头苍蝇似的冲了进来,脸上的焦虑都快溢出来…

若依定时任务

表结构 目录 quartz框架 SysJobServiceImpl实现类 使用切点,在构造器执行的时候执行定时任务的构建(这个类是交给IOC容器的,所以这个时间点就是项目启动的时候)SysJobServiceImpl实现类的init方法创建任务 /*** 创建定时任务*/public static void createScheduleJob(Scheduler …

LeetCode - Google 校招100题 第5天 双指针(Two Pointers) (11题)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/144742777 LeetCode 合计最常见的 112 题: 校招100题 第1天 链表(List) (19题)校招100题 第2天 树(Tree) (21题)校招100题 第3天 动态规划(DP) (20题)

(icml2024)SLAattention,基于原文时序模型进行改进

#代码: https://github.com/xinghaochen/SLAB #论文:https://arxiv.org/pdf/2405.11582 相关工作 1. 高效Transformer架构 背景: Transformer从最初的自然语言处理扩展到计算机视觉领域(例如ViT),但由于…

每日小题打卡

目录 幂次方 手机键盘 简单排序 校庆 性感素数 幂次方 题目描述 对任意正整数 N,计算 X^Nmod233333 的值。 输入格式 共一行,两个整数 X 和 N。 输出格式 共一行,一个整数,表示 X^Nmod233333 的值。 数据范围 1≤…

【Spring】 Bean 注入 HttpServletRequest 能保证线程安全的原理

文章目录 前言1. 图示2. 源码坐标后记 前言 今天看了一段老业务代码,HttpServletRequest 被注入后直接用于业务逻辑。 好奇Spring是如何解决线程安全问题。 Controller public class TestController {ResourceHttpServletRequest request;ResponseBodyGetMapping(…

iOS Masonry对包体积的影响

01 Masonry介绍 Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁。Masonry简化了NSLayoutConstraint的使用方式,让我们可以以链式的方式为我们的控件指定约束。 常用接口声明与实现: 使用方式…

C 实现植物大战僵尸(二)

C 实现植物大战僵尸(二) 前文链接,C 实现植物大战僵尸(一) 五 制作启动菜单 启动菜单函数 void startUI() {IMAGE imageBg, imgMenu1, imgMenu2;loadimage(&imageBg, "res/menu.png");loadimage(&am…

sqlserver镜像设置

本案例是双机热备,只设置主体服务器(主)和镜像服务器(从),不设置见证服务器 设置镜像前先检查是否启用了 主从服务器数据库的 TCP/IP协议 和 RemoteDAC (1)打开SQL Server配置管理器…

springboot503基于Sringboot+Vue个人驾校预约管理系统(论文+源码)_kaic

摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装个人驾校预约管理系统软件来发挥其高效地信息处理的作用&am…

游戏引擎学习第61天

回顾并计划接下来的事情 我们现在的目标是通过创建一个占位符版本的游戏来展示我们所做的工作。这个版本的游戏包含了许多基本要素,目的是快速构建一些东西,进行测试,并观察代码结构的形成。这些代码的实施是为了理解系统如何工作&#xff0…

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

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