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

示例:

js 复制代码
<!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> 标签
Html 复制代码
    <embed src="example.pdf" type="application/pdf" width="500px" height="600px">

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

  1. <object> 标签
Html 复制代码
    <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> 标签
Html 复制代码
    <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阅读体验。

相关推荐
懒大王95272 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
Yolo@~8 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
ZKY_2413 小时前
【工具】Json在线解析工具
unity·json
DarkBule_13 小时前
零基础驯服GitHub Pages
css·学习·html·github·html5·web
海峰教授13 小时前
扫描仪+文档pdf编辑器+pdf格式转换器
pdf
Li_na_na0113 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
背太阳的牧羊人14 小时前
使用 PyMuPDF(fitz)库打开 PDF 文件,并且是从内存中的字节流(BytesIO)读取 PDF 内容
数据库·pdf·文件处理·pymupdf·fitz
灯火不休ᝰ14 小时前
前端处理pdf文件流,展示pdf
前端·pdf
前端Hardy15 小时前
HTML&CSS:超好看的轮播图,你绝对用得上(建议收藏)
javascript·css·html
前端Hardy15 小时前
HTML&CSS:必学!手把手教你实现动态天气图标
javascript·css·html