html中前端页面预览pdf文档的6种方法

前端需要查看pdf文件的方法:

1. a链接查看。

这种方法就需要人为点击链接才会显示pdf文件内容,是显示还是下载就决定于浏览器的解释方法了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pdf预览</title>
</head>
<style></style>
<body>
    <a href="test.pdf">Download PDF</a>
</body>
</html>

2. 标签embed查看pdf。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pdf预览</title>
</head>
<style></style>
<body>
    <embed src="test.pdf" type="application/pdf" width=800 height=800>
</body>
</html>

3. 标签object查看pdf。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pdf预览</title>
</head>
<style></style>
<body>
    <object data="test.pdf" type="application/pdf" width=800 height=800>
    This browser does not support PDFs. Please download the PDF to view it: <a href="test.pdf">Download PDF</a>
    </object>
</body>
</html>

4. iframe标签查看pdf。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pdf预览</title>
</head>
<style></style>
<body>
    <iframe src="test.pdf" width=900 height=900>
    This browser does not support PDFs. Please download the PDF to view it: <a href="test.pdf">Download PDF</a>
    </iframe>
</body>
</html>

5. 插件jquery.media.js

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式 。“插件可以根据当前的脚本配置,自动将a标签替换成div,并生成object, embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容性方面非常出色。”所以这个插件的实现功能就是上面标签功能是一样的,那么在浏览器上面的显示也会是一样。

在使用时需要引入js文件, <script type="text/javascript"src="jquery.media.js"></script>

html端通过href来定位到需要打开的pdf文件。

<div><a class="media" href="pdf1.pdf"></a></div>

6. pdf.js框架

前面三种方法是基于标签,可能每个浏览器解释的效果不一样,那么pdf.js框架利用js语言,就可以兼容统一的显示pdf文件。如果文档不想下载的话,可以在view.html中将下载按钮隐藏或删除,而标签的下载按钮就无法取消。

官网或者github上下载pdf.js资源包,里面提供了一些使用demo

总结

前端需要查看pdf文件的方法总结。笔者以前在打开pdf文件时,有时候设计通过浏览器来打开的,也就是说浏览器本身是支持pdf文件格式,按照这个逻辑整理了一点资料来总结一下6种方法在前端编程查看服务器端的pdf文件

注:文章来源


   转载规则


《html中前端页面预览pdf文档的6种方法》 echo丶若梦 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
React中setState是同步还是异步的? React中setState是同步还是异步的?
React setState是同步还是异步的?class IndexPage extends React.Component { constructor(props) { super(props); this.state
2021-03-31
下一篇 
写一个柯里化 写一个柯里化
柯里化🍏柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果。如果要实现下面这个方法:add(1, 2)(3)(4)
  目录