当前位置：首页 > news >正文

在浏览器中直接打开PDF

news 2026/4/3 1:31:09

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…...

编程日记 2023/12/1 9:08:19

docker集群的详解以及超详细搭建

文章目录一、问题引入1. 多容器位于同一主机2. 多容器位于不同主机二、介绍三、特性四、概念1. 节点nodes2. 服务(service)和任务(task)3. 负载均衡五、docker网络1. overlay网络六、docker集群搭建1. 环境介绍2. 创建集群3. 集群网络4. 加入工作节点七、部署可视化界面po…...

编程日记 2023/12/1 9:06:15

4进制思路。。。。。。。。

猪猪 Hanke 特别喜欢吃烤鸡（本是同畜牲，相煎何太急！）Hanke 吃鸡很特别，为什么特别呢？因为他有 1010 种配料（芥末、孜然等），每种配料可以放 11 到 33 克，任意烤…...

编程日记 2023/12/1 9:05:14

解决ansible批量加入新IP涉及known_hosts报错的问题

我们把一批新的IP加入到ansible的hosts文件，比如/etc/ansible/hosts，往往会有这样的提示， 因为本机的~/.ssh/known_hosts文件中并有fingerprint key串，使用ssh连接目标主机时，一般会提示是否将key字符串加入到~/.ssh/…...

编程日记 2023/12/1 9:04:12

vuepress----1、快速开始

创建项目工程本文会帮助你从头搭建一个简单的 VuePress 文档。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。创建并进入一个新目录 mkdir vuepress-starter && cd vuepress-starter使用你喜欢的包管理器进行初始化 yarn init # npm i…...

编程日记 2023/12/1 9:03:11

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 答案及解析…...

编程日记 2023/12/1 9:02:10

软件测评中心▏软件集成测试和功能测试之间的区别和联系简析

软件集成测试是在软件开发周期的后期阶段进行的测试活动，旨在验证系统各个组件之间的接口和交互是否正常工作。而功能测试是一种验证软件系统是否按照需求规格说明书所规定的功能进行正确实现的测试。接下来，我们来分别探讨一下软件集成测试和功能测试有…...

编程日记 2023/12/1 9:01:09

Selenium/webdriver介绍以及工作原理

最近在看一些底层的东西。driver翻译过来是驱动，司机的意思。如果将webdriver比做成司机，竟然非常恰当。我们可以把WebDriver驱动浏览器类比成出租车司机开出租车。在开出租车时有三个角色： 乘客：他/她告诉出租车司机去哪里&…...

编程日记 2023/12/1 9:00:07

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&…...

编程日记 2023/12/1 8:59:06

在Rust中编写自动化测试

1.摘要 Rust中的测试函数是用来验证非测试代码是否是按照期望的方式运行的, 测试函数体通常需要执行三种操作:1.设置任何所需的数据或状态;2.运行需要测试的代码;3.断言其结果是我们所期望的。本篇文章主要探讨了Rust自动化测试的几种常见场景。 2.测试函数详解在Rust项目工…...

编程日记 2023/12/1 8:58:05

羊大师提问，为什么吃得越咸越容易出现健康问题？

羊大师提问，为什么吃得越咸越容易出现健康问题？ 在现代社会中，有一种追求咸味食物的趋势，许多人都钟爱于吃咸味食物。吃咸味食物往往容易导致健康问题，引发各种疾病。那么为什么吃的越咸越容易生病呢？ 今…...

编程日记 2023/12/1 8:57:04

linux ld 链接器学习笔记

ld链接器笔记 1. 首先编写一段汇编代码这里的汇编语法时 AT&T语法,是gcc原生支持的语法,底层使用 gas(gnu assembler) 完成汇编,相较于 Intel x86语法, AT&T 语法要更加古老,因此大多数人更加偏向于使用 Intel 的语法. nasm 编译器支持x86语法.自从2.10版本&#xf…...

编程日记 2023/12/1 8:55:02

先序遍历： 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;//遍历左…...

编程日记 2023/12/1 8:54:00

linux 内核软中断介绍

在介绍软中断之前，先来介绍一个概念：中断下半部： 为了避免处理复杂的中断嵌套，中断处理程序是在关闭中断的情况下执行的。可是，如果关闭中断的时间太长，可能导致中断请求丢失。例如周期时钟每隔 10 毫秒发送…...

编程日记 2023/12/1 8:51:56

软考：2024年软考高级：软件工程

软考：2024年软考高级: 提示：系列被面试官问的问题，我自己当时不会，所以下来自己复盘一下，认真学习和总结，以应对未来更多的可能性关于互联网大厂的笔试面试，都是需要细心准备的 （1…...

编程日记 2023/12/1 8:50:54

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…...

编程日记 2023/12/1 8:49:53

python 生成器的作用

1. 生成器参考： https://www.cainiaojc.com/python/python-generator.html 1.1. 什么是生成器？ 在 python 中，一边循环一边计算的机制，称为生成器：generator. 1.2. 生成器有什么优点？ 1、节约内存。p…...

编程日记 2023/12/1 8:48:52

第十五届蓝桥杯（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 源代码 …...

编程日记 2023/12/1 8:47:49

图解系列--HTTPS，认证

确保 Web 安全的HTTPS 1.HTTP 的缺点 1.1.通信使用明文可能会被窃听加密处理防止被窃听加密的对象可以有这么几个。 (1).通信的加密 HTTP 协议中没有加密机制，但可以通过和 SSL（Secure Socket Layer，安全套接层）或TLS&#xff…...

编程日记 2023/12/1 8:45:43

element plus中表格的合计属性和例子

在 element plus 表格中，您可以使用 summary-method 属性来指定一个函数，计算表格中列的合计或平均值等。该函数应该返回一个对象，其中包含每个列的合计值。例如，如果您的表格数据是这样的： [{ name: John, age: 20, …...

编程日记 2023/12/1 8:43:40

解锁B站评论区成分检测器核心价值：从入门到精通的实战指南

解锁B站评论区成分检测器核心价值：从入门到精通的实战指南【免费下载链接】bilibili-comment-checker B站评论区自动标注成分，支持动态和关注识别以及手动输入 UID 识别项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-comment-checker …...

编程新知 2026/4/3 1:26:43

2026知识付费SaaS避坑指南：数据安全与系统稳定性实测，创客匠人为何值得托付？

在知识付费行业，大多数选型对比只关注“前台功能”：能不能卖课、能不能直播、有没有拼团。但真正决定生意生死的，往往是看不见的“底层能力”——数据是否安全？系统是否稳定？学员资产能否真正归你所有？过去…...

编程新知 2026/4/3 0:16:11

解决Python文件路径超长问题：Windows系统下的终极指南

解决Python文件路径超长问题：Windows系统下的终极指南在Windows平台上开发Python应用时，文件路径长度限制是个令人头疼的"历史遗留问题"。记得第一次接手一个大型Python项目时，我花了整整两天时间才搞明白为什么某些文件总是无法读…...

编程新知 2026/4/2 23:06:56

2026年最好的AI创业机会，就藏在你压根看不上的角落里

还在焦虑AI会替代你？抢你饭碗？你根本不知道，现在有一群人，正在用AI给自己“印钞票”他们不是搞什么ChatGPT插件，也不是训练大模型，他们就盯着那些看着不起眼，甚至你压根看不上的小事。利用这些小…...

编程新知 2026/4/2 23:04:54

【大数据】离线数仓核心组件：Hive 架构解析与进阶操作指南

Hive 是基于 Hadoop 的数据仓库工具，主要用于解决海量结构化日志的数据统计问题。它提供了一套类 SQL 的查询语言 HiveQL，通过将 SQL 语句转换为运行在 Hadoop 集群上的 MapReduce 或 Spark 任务，大幅降低了大数据分析的工程门槛。目录一、…...

编程新知 2026/4/2 22:58:52

2026届毕业生推荐的十大降重复率助手实际效果

Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 人工智能技术于学术写作领域的运用愈发广泛，其助力论文撰写的本领已获实证&#…...

编程新知 2026/4/2 22:44:17