在浏览器中直接打开PDF
1 使用iframe标签
<iframe src="./test.pdf" height="900px;" width="800px"></iframe>如果PDF是base64参考如下
<iframe id="pdfView" width="100%" height="100%" allow="fullscreen" type="application/x-google-chrome-pdf" frameborder="0" src="data:application/pdf;base64,">
</iframe>2 使用 object 标签
<object data="./test.pdf" type="application/pdf" width="100%" height="100%" ></object>如果PDF是base64参考如下
<object id="pdfView" width="100%" height="100%" type="application/pdf" data="data:application/pdf;base64,">
</object>3 使用embed标签
<embed id="pdfView" src="all.pdf#toolbar=1" type="application/pdf" width="100%" height="100%" />这种我进行了测试如果是base64的好像不行
这几种方式都可以通过在src属性之后添加参数控制PDF预览的显示效果
例如：
<embed id="pdfView" src="all.pdf#toolbar=1&navpanes=1&view=FitH&page=2" type="application/pdf" width="100%" height="100%" />toolbar=1 显示工具栏；toolbar=0,不显示工具栏
navpanes=1显示左侧导航；navpanes=0,不显示左侧导航
view=FitH 适配宽度，view=FitV适配高度
page=2 默认显示第2页
前端展示 PDF 预览的几种方法
相关文章：
在浏览器中直接打开PDF
1 使用iframe标签 <iframe src"./test.pdf" height"900px;" width"800px"></iframe> 如果PDF是base64参考如下 <iframe id"pdfView" width"100%" height"100%" allow"fullscreen" typ…...
docker集群的详解以及超详细搭建
文章目录 一、问题引入1. 多容器位于同一主机2. 多容器位于不同主机 二、介绍三、特性四、概念1. 节点nodes2. 服务(service)和任务(task)3. 负载均衡 五、docker网络1. overlay网络 六、docker集群搭建1. 环境介绍2. 创建集群3. 集群网络4. 加入工作节点 七、部署可视化界面po…...
4进制思路。。。。。。。。
猪猪 Hanke 特别喜欢吃烤鸡（本是同畜牲，相煎何太急！）Hanke 吃鸡很特别，为什么特别呢？因为他有 1010 种配料（芥末、孜然等），每种配料可以放 11 到 33 克，任意烤…...
解决ansible批量加入新IP涉及known_hosts报错的问题
我们把一批新的IP加入到ansible的hosts文件，比如/etc/ansible/hosts，往往会有这样的提示， 因为本机的~/.ssh/known_hosts文件中并有fingerprint key串，使用ssh连接目标主机时，一般会提示是否将key字符串加入到~/.ssh/…...
vuepress----1、快速开始
创建项目工程 本文会帮助你从头搭建一个简单的 VuePress 文档。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。 创建并进入一个新目录 mkdir vuepress-starter && cd vuepress-starter使用你喜欢的包管理器进行初始化 yarn init # npm i…...
C++ -- 每日选择题 -- Day2
第一题 1. 下面代码中sizeof(A)结果为（） #pragma pack(2) class A {int i;union U{char str[13];int i;}u;void func() {};typedef char* cp;enum{red,green,blue}color; }; A：20 B：21 C：22 D：24 答案及解析…...
软件测评中心▏软件集成测试和功能测试之间的区别和联系简析
软件集成测试是在软件开发周期的后期阶段进行的测试活动，旨在验证系统各个组件之间的接口和交互是否正常工作。而功能测试是一种验证软件系统是否按照需求规格说明书所规定的功能进行正确实现的测试。接下来，我们来分别探讨一下软件集成测试和功能测试有…...
Selenium/webdriver介绍以及工作原理
最近在看一些底层的东西。driver翻译过来是驱动，司机的意思。如果将webdriver比做成司机，竟然非常恰当。 我们可以把WebDriver驱动浏览器类比成出租车司机开出租车。在开出租车时有三个角色： 乘客：他/她告诉出租车司机去哪里&…...
HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效
实例：九宫格图片鼠标移入移出方向感知特效 技术栈：HTML+CSS+JS 效果： 源码： 【HTML】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport&…...
在Rust中编写自动化测试
1.摘要 Rust中的测试函数是用来验证非测试代码是否是按照期望的方式运行的, 测试函数体通常需要执行三种操作:1.设置任何所需的数据或状态;2.运行需要测试的代码;3.断言其结果是我们所期望的。本篇文章主要探讨了Rust自动化测试的几种常见场景。 2.测试函数详解 在Rust项目工…...
羊大师提问，为什么吃得越咸越容易出现健康问题？
羊大师提问，为什么吃得越咸越容易出现健康问题？ 在现代社会中，有一种追求咸味食物的趋势，许多人都钟爱于吃咸味食物。吃咸味食物往往容易导致健康问题，引发各种疾病。那么为什么吃的越咸越容易生病呢？ 今…...
linux ld 链接器学习笔记
ld链接器笔记 1. 首先编写一段汇编代码 这里的汇编语法时 AT&T语法,是gcc原生支持的语法,底层使用 gas(gnu assembler) 完成汇编,相较于 Intel x86语法, AT&T 语法要更加古老,因此大多数人更加偏向于使用 Intel 的语法. nasm 编译器支持x86语法.自从2.10版本…...
栈模拟先序后序中序遍历（非递归遍历）
先序遍历： vector<int> preorderTraversal(TreeNode* u) {stack<TreeNode*>stk;vector<int>res;if(unullptr) return res;while(stk.size()||u){if(u){res.push_back(u->val);//遍历当前结点stk.push(u);//记录当前递归层uu->left;//遍历左…...
linux 内核软中断介绍
在介绍软中断之前，先来介绍一个概念：中断下半部： 为了避免处理复杂的中断嵌套，中断处理程序是在关闭中断的情况下执行的。可是，如果关闭中断的时间太长，可能导致中断请求丢失。例如周期时钟每隔 10 毫秒发送…...
软考：2024年软考高级：软件工程
软考：2024年软考高级: 提示：系列被面试官问的问题，我自己当时不会，所以下来自己复盘一下，认真学习和总结，以应对未来更多的可能性 关于互联网大厂的笔试面试，都是需要细心准备的 （1…...
Kubernetes（K8s）_15_CNI
Kubernetes（K8s）_15_CNI CNI网络模型UnderlayMAC VLANIP VLANDirect Route OverlayVXLAN CNI插件FlannelCalico CNI配置内置实现 CNI CNI(Container Network Interface): 实现容器网络连接的规范 Kubernetes将网络通信可分为: Pod内容器、Pod、Pod与Se…...
python 生成器的作用
1. 生成器 参考： https://www.cainiaojc.com/python/python-generator.html 1.1. 什么是生成器？ 在 python 中，一边循环一边计算的机制，称为生成器：generator. 1.2. 生成器有什么优点？ 1、节约内存。p…...
第十五届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组（详细分析解答）
目录 1.相不相等 1.1 题目要求 1.2 题目分析 1.3 源代码 2.三行情书 2.1 题目要求 2.2 题目分析 2.3 源代码 3.电影院在线订票 3.1 题目要求 3.2 题目分析 3.3 源代码 4.老虎坤（不然违规发不出来） 4.1 题目要求 4.2 题目分析 4.3 源代码 …...
图解系列--HTTPS，认证
确保 Web 安全的HTTPS 1.HTTP 的缺点 1.1.通信使用明文可能会被窃听 加密处理防止被窃听 加密的对象可以有这么几个。 (1).通信的加密 HTTP 协议中没有加密机制，但可以通过和 SSL（Secure Socket Layer，安全套接层）或TLSÿ…...
element plus中表格的合计属性和例子
在 element plus 表格中，您可以使用 summary-method 属性来指定一个函数，计算表格中列的合计或平均值等。该函数应该返回一个对象，其中包含每个列的合计值。例如，如果您的表格数据是这样的： [{ name: John, age: 20, …...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中，return 语句的使用是另一个关键概念，它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别：不同层级的事件处理 方…...
深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中，我们训练出的神经网络往往非常庞大（比如像 ResNet、YOLOv8、Vision Transformer），虽然精度很高，但“太重”了，运行起来很慢，占用内存大，不适合部署到手机、摄…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么？它的作用是什么？ Spring框架的核心容器是IoC（控制反转）容器。它的主要作用是管理对…...
数据结构：递归的种类（Types of Recursion）
目录 尾递归（Tail Recursion） 什么是 Loop（循环）？ 复杂度分析 头递归（Head Recursion） 树形递归（Tree Recursion） 线性递归（Linear Recursion）…...