blob文件流前端显示pdf

首先请求需要修改
responseType: ‘blob’, 需要修改

请求头
{responseType: 'blob',url: url,method: 'get',}

三种方法:

1.直接处理,在新页面打开

const blob = new Blob([data],{
type:'application/pdf'
})
let url = window.URL.createObjectURL(blob)
window.open(url,'_blank')
问题在于父页面关闭或者刷新后,文件页面获取不到文件流,刷新显示空白页。

2.在新页面用iframe接

<iframe :src='xxxxxx'>
问题在于点击iframe中文件之后无法在iframe监听事件,ctrl+p 显示空白

3.使用pdf.js

到 mozilla.github.io/pdf.js/gett… 页面中找到下载位置,下载 PDF.js
在viewer.js 修改
注释下列代码   不然 可能会出现跨域错误,无法正常预览文件
if (origin !== viewerOrigin && protocol !== "blob:") {throw new Error("file origin does not match viewer's");
}随后在页面展示
let path = window.URL.createObjectURL(blob)
const fileUrl = '/pdfjs2/web/viewer.html'
// 生产环境下
if (process.env.NODE_ENV === 'production') {this.pdfurl = fileUrl + '?file=' + encodeURIComponent(path)
} else {
// 开发环境this.pdfurl = fileUrl + '?file=' + encodeURIComponent(path)
}修改清晰度    --注意清晰度越高,打印预览时 谷歌内核滚动条越卡
this._printResolution = 450//printResolution || 150
新版本的pdf.js viewer.js被改为mjs,上线时nginx需要修改
另外还有个bug 在一个页面打印预览时,同源的其他页面无法点击

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

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

相关文章

集合框架(Set Map List)

1.内存层面需要针对多个数据进行存储。此时,可以考虑的容器有数组、集合类 2.数组存储多个数据方面的特点 数组一旦初始化,其长度就是确定的。 数组中的多个元素是依次紧密排列的,有序的,可重复的。 (优点)数组一旦初始化完成,其元素的类型就是确定的 int[] arrnew int[10]; a…

腾讯云轻量服务器和云服务器CVM该怎么选?区别一览

腾讯云轻量服务器和云服务器CVM该怎么选&#xff1f;不差钱选云服务器CVM&#xff0c;追求性价比选择轻量应用服务器&#xff0c;轻量真优惠呀&#xff0c;活动 https://curl.qcloud.com/oRMoSucP 轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三…

Qt(二):使用udp发送与接收图片

使用Qt来通过UDP协议发送和接收图片可以分为几个步骤。以下是一个基本的指南&#xff1a; 发送图片准备图片数据&#xff1a;首先&#xff0c;你需要将图片转换为可以在网络上传输的数据格式。通常&#xff0c;这涉及到将图片转换为字节数组。设置UDP套接字&#xff1a;在Qt中…

Java 缓存中间件

Java 缓存中间件 关键词&#xff1a;Spring Cache、J2Cache、JetCache 一 、JSR 107 JSR107 中制订了 Java 缓存的规范。 因此&#xff0c;在很多缓存框架、缓存库中&#xff0c;其 API 都参考了 JSR 107 规范。 img Java Caching 定义了 5 个核心接口 CachingProvider - 定义…

合并区间(LeetCode 56)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路参考文献 1.问题描述 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输…

MetalLB:本地Kubernetes集群的LoadBalancer负载均衡利器

背景 在本地集群进行测试时&#xff0c;我们常常面临一个棘手的问题&#xff1a;Service Type不支持LoadBalancer&#xff0c;而我们只能选择使用NodePort作为替代。这种情况下&#xff0c;我们通常会配置Service为NodePort&#xff0c;并使用externalIPs将流量导入Kubernetes…

SpringBoot多线程与任务调度总结

一、前言 多线程与任务调度是java开发中必须掌握的技能&#xff0c;在springBoot的开发中&#xff0c;多线程和任务调度变得越来越简单。实现方式可以通过实现ApplicationRunner接口&#xff0c;重新run的方法实现多线程。任务调度则可以使用Scheduled注解 二、使用示例 Slf…

Go面试题学习

1.并发安全性 Go语言中的并发安全性是什么&#xff1f;如何确保并发安全性&#xff1f; 并发安全性是指在并发编程中&#xff0c;多个goroutine对共享资源的访问不会导致数据竞争和不确定的结果。 使用互斥锁&#xff08;Mutex&#xff09;&#xff1a;通过使用互斥锁来保护共…

微软发布安卓版Copilot,可免费使用GPT-4、DALL-E 3

12月27日&#xff0c;微软的Copilot助手&#xff0c;可在谷歌应用商店下载。目前&#xff0c;只有安卓版&#xff0c;ios还无法使用。 Copilot是一款类ChatGPT助手支持中文&#xff0c;可生成文本/代码/图片、分析图片、总结内容等&#xff0c;二者的功能几乎没太大差别。 值…

【小程序】如何获取特定页面的小程序码

一、进入到小程序管理后台&#xff0c;进入后点击上方的“工具”》“生成小程序码” 小程序管理后台 二、进入开发者工具&#xff0c;打开对应的小程序项目&#xff0c;复制底部小程序特定页面的路径 三、粘贴到对应位置的文本框&#xff0c;点击确定即可

Starling-LM-7B与GPT-4:开源AI的新纪录

引言 在人工智能的前沿领域&#xff0c;Starling-LM-7B的出现标志着开源大型语言模型&#xff08;LLM&#xff09;的一大突破。与GPT-4的近距离竞争不仅展示了Starling-LM-7B的技术实力&#xff0c;也突显了开源社区在推动AI发展方面的重要作用。 模型特点 Starling-LM-7B&a…

django之drf框架(排序、过滤、分页、异常处理)

排序 排序的快速使用 1.必须是继承GenericAPIView及其子类才能是用排序 导入OrderingFilter类&#xff0c;from rest_framework.filters import OrderingFilter 2.在类中配置类属性 filter_backends[OrderingFilter] 3.类中写属性 ordering_fields [price,id] # 必须是表的…

某后台管理系统加密参数逆向分析

前言 在我们日常的渗透中经常会遇到开局一个登录框的情况&#xff0c;弱口令爆破当然是我们的首选。但是有的网站会对账号密码等登录信息进行加密处理&#xff0c;这一步不由得阻碍了很多人的脚步。前端的加解密是比较常见的&#xff0c;无论是 web 后台还是小程序&#xff0c…

k8s之部署kubeadm

master 20.0.0.71&#xff08;4核8G&#xff09; docker、kubelet、kubectl、kubeadm、flannel node1 20.0.0.73&#xff08;最少2核4G&#xff09; docker、kubelet、kubectl、kubeadm、flannel node2 20.0.0.74&#xff08;最少2核4G&#xff09; docker、kubelet、kube…

检查Excel内容是否符合规范

代码一&#xff1a; package com.ly.cloud.config;import com.alibaba.excel.context.AnalysisContext; import com.alibaba.excel.event.AnalysisEventListener; import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; import org.apache.poi.ss.f…

【MySQL库的操作】

1.库的操作 1.1 创建数据库 语法&#xff1a; create databases [IF NOT EXISTS] 数据库名;注意&#xff1a; [] 是可选项 1.2 创建数据库案例 创建名为 db1 的数据库 create databases db1;说明&#xff1a;当我们创建数据库没有指定字符集和校验规则时&#xff0c;系统…

docker compose 部署 grafana + loki + vector 监控kafka消息

Centos7 随笔记录记录 docker compose 统一管理 granfana loki vector 监控kafka 信息。 当然如果仅仅是想通过 Grafana 监控kafka&#xff0c;推荐使用 Grafana Prometheus 通过JMX监控kafka 目录 1. 目录结构 2. 前提已安装Docker-Compose 3. docker-compose 自定义服…

Go 泛型之泛型约束

Go 泛型之泛型约束 文章目录 Go 泛型之泛型约束一、引入二、最宽松的约束&#xff1a;any三、支持比较操作的内置约束&#xff1a;comparable四、自定义约束五、类型集合&#xff08;type set&#xff09;六、简化版的约束形式七、约束的类型推断八、小结 一、引入 虽然泛型是…

Keras多分类鸢尾花DEMO

完整的一个小demo&#xff1a; pandas1.2.4 numpy1.19.2 python3.9.2 import numpy as np import pandas as pd import matplotlib.pyplot as plt from pandas import DataFrame from scipy.io import loadmat from sklearn.model_selection import train_test_split impor…

【MYSQL】MYSQL 的学习教程(十)之 InnoDB 锁

数据库为什么需要加锁呢&#xff1f; 如果有多个并发请求存取数据&#xff0c;在数据就可能会产生多个事务同时操作同一行数据。如果并发操作不加控制&#xff0c;不加锁的话&#xff0c;就可能写入了不正确的数据&#xff0c;或者导致读取了不正确的数据&#xff0c;破坏了数…