HTML 特殊元素:展示PDF、展示JSON 数据


<pre> 标签 (preformatted text)

<pre> 标签用来表示预格式化的文本内容

在页面数据展示时,后端返回了一段未经处理的JSON 数据,将这段数据在页面正常展示,让可读性更高。

{/"project": {/ "title": "Sample Project XYZ",/ "status": "active",/ "startDate": "2023-06-15T00:00:00Z"/}}

我们可以通过使用正则表达式、通过JSON.parse()方法将其转换为JSON对象、使用js 逐行处理等等方式来处理,不过有一个更简单的方式, HTML 提供了一个标签可以直接处理这种格式的数据。

<pre> 这个标签的作用是告诉浏览器保留其内部文本的所有空白字符(包括空格、制表符和换行符),并且文本通常会以等宽字体展示,确保文本内容按照原始源代码的格式呈现给用户。

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Code Sample Using <pre> Tag</title>
</head>
<body><pre>{/"project": {/ "title": "Sample Project XYZ",/ "status": "active",/ "startDate": "2023-06-15T00:00:00Z"/} </pre>
</body>
</html>

处理完成后,在页面的展示

{
2  "project": {
3    "title": "Sample Project XYZ",
4    "status": "active",
5    "startDate": "2023-06-15T00:00:00Z"
6  }
7}

PDF格式文件展示

在HTML中处理PDF格式文件,通常可以使用以下标签来嵌入或预览PDF:

  1. <embed> 标签
    <embed src="example.pdf" type="application/pdf" width="500px" height="600px">

embed 标签用于嵌入外部应用程序内容,包括PDF文件。设置 src 属性为PDF文件的URL,并指定 type 为 “application/pdf” 以确保浏览器正确识别和处理文件。

  1. <object> 标签
    <object data="example.pdf" type="application/pdf" width="500px" height="600px"><!-- 如果用户的浏览器不支持内嵌PDF,则显示备用内容 --><p>您的浏览器不支持内嵌PDF文档,请<a href="example.pdf">点击此处下载PDF文件</a>.</p></object>

object 标签也能够嵌入多种类型的外部资源,包括PDF。当浏览器支持内嵌PDF时会直接显示,否则可以提供一个备选方案。

  1. <iframe> 标签
    <iframe src="example.pdf" width="500px" height="600px"></iframe>

iframe 标签可用于在网页内部加载另一个文档,也可以用来展示PDF文件。不过不是所有浏览器都原生支持用iframe嵌入PDF文件。

对于现代浏览器而言,它们大多内置了PDF阅读器功能,可以直接在浏览器窗口内打开和查看PDF文件。但并不是所有浏览器都能完美支持,尤其是较老版本的浏览器可能需要用户安装插件或者直接下载PDF才能查看。

另外,若要实现更高级的在线PDF预览功能(如页面导航、搜索等),可以采用第三方JavaScript库,例如Mozilla的PDF.js,它可以将PDF渲染为HTML5 canvas元素,从而实现在各种浏览器中一致且强大的PDF阅读体验。

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

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

相关文章

TSP问题消除子环

个人感觉看这一个就够了&#xff01;&#xff01;&#xff01; 优化│TSP中两种不同消除子环路的方法及callback实现&#xff08;Python调用Gurobi求解&#xff09; 刘兴禄运筹学修炼日记&#xff1a;TSP中两种不同消除子环路的方法及callback实现&#xff08;Python调用Guro…

sentry-cli - error: Failed to load .sentryclirc file from project path

Xcode 15.2 warning sentry-cli - error: Failed to load .sentryclirc file from project path (/Users/zhuhongwei/Desktop/pandabill/.sentryclirc)推荐一下刚上线的 App 熊猫小账本&#xff0c;里面有用到这篇博客讲的内容 熊猫小账本 一个简洁的记账 App&#xff0c;用于…

1、鸿蒙学习-为应用/服务进行签名

针对应用/服务的签名&#xff0c;DevEco Studio为开发者提供了自动签名方案&#xff0c;帮助开发者高效进行调试。也可选择手动方式对应用/服务进行签名&#xff0c;如果使用了需要ACL的权限&#xff0c;需采用手动方式进行签名。 自动签名 说明 使用自动签名前&#xff0c;请…

AI智能报表助手

AI智能报表助手 目标&#xff1a;通过对话一句话智能引导出报表 NL2SQL 自然语言转换为sql 数据集 ATIS&GeoQuery数据集&#xff1a;ATIS数据集来源于机票订阅系统&#xff0c;与美国的地理相关&#xff0c;包含880条问题及对应的SQL语句&#xff0c;属于单一领域但上…

C++ 【深基3.习8】三角形分类

文章目录 一、题目描述【深基3.习8】三角形分类题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 样例 #3样例输入 #3样例输出 #3 样例 #4样例输入 #4样例输出 #4 提示 二、参考代码 一、题目描述 【深基3.习8】三角形分类 题目描述 给…

闭包机制的底层实现原理

说明:此次分享不涉及ES6的let,const,块级作用域,这些其实都是对本次分享内容的扩展。 闭包的重要性 JS的内功心法,闭包是JavaScript中非常重要的核心概念,关系着JS里很多核心的机制,理解了它,很多问题都会迎刃而解,不理解闭包用JS永远像隔着一层窗户纸。 前端发展日新…

【MySQL】学习和总结使用列子查询查询员工工资信息

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-5odctDvQ0AHJJc1C {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

中国(京津冀)太阳能光伏推进大会暨展览会

中国(京津冀)太阳能光伏推进大会暨展览会是一个旨在促进太阳能光伏产业的发展的重要活动。该活动旨在加大对太阳能光伏的投资和支持&#xff0c;推动太阳能光伏技术的创新和应用&#xff0c;促进太阳能光伏产业的规模化发展。 此次大会暨展览会将为太阳能光伏行业相关企业提供一…

LeetCode刷题记录——day2

https://leetcode.cn/problems/product-of-array-except-self/description/?envTypestudy-plan-v2&envIdtop-interview-150 问题在于不使用除法并且空间复杂度为O(1)&#xff0c;当第一次从头开始遍历时由于不知道后续数组元素是什么&#xff0c;所以无法得到答案&#xf…

Python 枚举(Python Enumerations)

Python 枚举&#xff08;Enumerations&#xff09;是一种用于创建命名的常量集合的方法。它提供了一种更好地组织代码、增加可读性和可维护性的方式&#xff0c;特别是在需要表示一组相关常量时。 Python 的枚举是通过 enum 模块实现的&#xff0c;它在 Python 3.4 版本之后成…

【Linux】Linux基本开发工具(yum) (vi/vim)的使用

本文章内容&#xff1a; 学习yum工具&#xff0c;进行软件安装掌握vim编辑器使用 Linux 软件包管理器 yum 什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序.但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成…

es 聚合操作(一)

前言 Elasticsearch除搜索以外&#xff0c;提供了针对ES 数据进行统计分析的功能。聚合(aggregations)可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 衣服品牌的受欢迎程度这些衣服的平均价格、最高价格、最低价格这些衣服的每天、每月销量如何 使用…

产品推荐 | 基于Xilinx Zynq UltraScale+打造的仙女座 Andromeda FPGA核心板

1、产品概述 仙女座Andromeda XZU65片上系统&#xff08;SoC&#xff09;核心板通过结合高端Xilinx Zynq UltraScale™ MPSoC系列芯片和高速DDR4 ECC SDRAM、eMMC flash、双QSPI flash、双Gigabit Ethernet PHY、USB 3.0形成了一个完整的、功能强大的嵌入式处理系统。得益于大…

Rhino与Revit API之间的转换

你好&#xff0c;我是九哥~ 最近发现Rhino.Inside.Revit的API手册更新了&#xff0c;终于可以开心的写RIR代码了&#xff0c;小伙伴快去试试吧&#xff0c;地址如下&#xff1a; https://www.rhino3d.com/inside/revit/1.0/reference/rir-api 今天我们先来聊聊 Rhino 与 Rev…

ARM:汇编点灯

.text .global _start _start: 使能GPIOE和GPIOF的外设时钟 LDR R0,0x50000A28 指定寄存器地址 LDR R1,[R0] 将寄存器原来的数值读取出来&#xff0c;保存到R1中 ORR R1,R1,#(0x3<<4) 将第3/4位设置为1 STR R1,[R0] 将修改后的数值写回设置LED1亮 设置PE10为输出…

Python实战:机器学习算法

本文将详细介绍Python中常用的机器学习算法&#xff0c;包括线性回归、逻辑回归、决策树、随机森林、支持向量机等。 一、引言 机器学习是人工智能的一个重要分支&#xff0c;它使计算机能够从数据中学习并做出决策。Python作为一门流行的编程语言&#xff0c;拥有丰富的机器…

蓝桥杯2023年-阶乘的和(数学推理,C++)

题目描述 给定 n 个数 Ai&#xff0c;问能满足 m! 为∑ni1(Ai!) 的因数的最大的 m 是多少。其中 m! 表示 m 的阶乘&#xff0c;即 1 2 3 m。 思路 我们发现m最大为所有A中的最小值&#xff0c;但是如果有Ai1个Ai相同&#xff0c;则他们可以合并为Ai1&#xff0c; 即…

华为ensp中rip动态路由协议原理及配置命令(详解)

CSDN 成就一亿技术人&#xff01; 作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; CSDN 成就一亿技术人&#xff01; ————前言————— RIP&#xff08;Routing Information Protocol&#xff0c;路由信息协议&#xff09;是一种距离矢…

hive sql实现查找商品表名称中包含敏感词的商品

背景 用户上传的商品表一般会包含商品名称&#xff0c;由于这些商品名称是用户自己起的&#xff0c;里面可能包含了敏感词&#xff0c;需要通过sql找出来哪些商品的商品名称包含了敏感词汇 hive sql实现查找商品表名称中包含敏感词的商品 实现思路&#xff1a; 1.商品表和敏…