前端实现pdf文件的在线预览与下载

最新推荐文章于 2024-05-12 13:20:26 发布

小青涩君

最新推荐文章于 2024-05-12 13:20:26 发布

阅读量2.6k

点赞数

原文链接：https://blog.csdn.net/qappleh/article/details/80250492?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162488740516780264039034%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162488740516780264039034&biz_id=0&utm_medium=

版权

前言

在项目中我们经常会出现各种各样的法律文件、免责说明等文件需要用户阅读，很多文件除了阅读外还要支持用户下载。为了快速开发，一些变动不大的文件，或者是项目中不想开发富文本的时候我们可以选择直接使用pdf文件的预览和下载。

< iframe >

所有浏览器都支持 < iframe > 标签，直接将src设置为指定的PDF文件就可以预览了。此外可以把需要的文本放置在 < iframe > 和之间，这样就可以应对无法理解 iframe 的浏览器，比如下面的代码可以提供一个PDF的下载链接：


<iframe src="/index.pdf" width="100%" height="100%">
 
This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
 
</iframe>

< embed >

< embed > 标签定义嵌入的内容，比如插件。在HTML5中这个标签有4个属性：

属性	值	描述
height	pixels	设置嵌入内容的高度。
width	pixels	设置嵌入内容的宽度。
type	type	定义嵌入内容的类型。
src	url	嵌入内容的 URL。

但是需要注意的是这个标签不能提供回退方案，与< iframe > < / iframe >
不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到。并且src的地址中文件最好带有格式后缀名，否则下载时无法确定正确的格式。用法如下

<embed src="/index.pdf" type="application/pdf" width="100%" height="100%">

使用此标签时如果想隐藏下载打印按钮，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .embedbox embed {
            -webkit-transform: translate(30px, -50px);
            transform: translate(30px, -50px);
            width: 900px;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="embedbox" style="width: 900px;height: 500px; overflow: hidden;">
        <embed src="pdf文件" type="">
    </div>
</body>

</html>

小青涩君

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端实现pdf文件的在线预览与下载

前言在项目中我们经常会出现各种各样的法律文件、免责说明等文件需要用户阅读，很多文件除了阅读外还要支持用户下载。为了快速开发，一些变动不大的文件，或者是项目中不想开发富文本的时候我们可以选择直接使用pdf文件的预览和下载。< iframe >所有浏览器都支持 < iframe > 标签，直接将src设置为指定的PDF文件就可以预览了。此外可以把需要的文本放置在 < iframe > 和之间，这样就可以应对无法理解 iframe 的浏览器，比如下面的代码可以.
复制链接

扫一扫