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

前言

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

前端实现pdf文件的在线预览与下载相关推荐

前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
使用pdf.js实现pdf文件的在线预览（有码源）
博客更新地址啦-,欢迎访问:https://jerryyuanj.github.io/ 最近做移动项目(H5)时遇到一个需求,就是在线预览pdf文件.其实本来使用window.open()就可以实现了 ...
vue2.0移动端使用vue-pdf插件实现PDF文件流在线预览
如果遇到电子签章不显示问题,滑到最下方 npm install --save vue-pdf@4.2.0 npm install pdfjs-dist@2.5.207 如果后台返回的文件流为图片 - ...
php 存PDF文件及其在线预览功能
正值奥运时期,一觉醒来有种想用PHP打印PDF来记录各国金牌的想法,即使中国队那么不争气我也忍了. 今天使用的类叫FPDF,FPDF这个PHP Class允许你采用纯PHP(更确切地说就是不需要使用P ...
【aspose】 word/excel转pdf，实现在线预览文件功能
项目场景: 需求描述:上传附件后,可实现在线预览,这里就会存在一个问题,很多附件的类型是没法在线预览的,点击就会下载.除pdf/jpg/jpeg等,于是技术方案定,将word/excel等类型的文件转 ...
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
前端ppt\word等等文件实现在线预览功能
前端ppt\word等等文件实现在线预览功能方法1:https://view.xdocin.com/view?src=你的文档地址 10天免费方法2:https://view.officeapps ...
加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
vue 在线预览、下载word、pdf文件
vue 在线预览.下载word.pdf文件最近项目用vue-cli3要实现word和pdf文档的在线预览和下载,在网上看到各位大佬们各种办法,发现踩坑无数,还是没弄出来,最后发现还是是自己想复杂了 ...

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

< iframe >

< embed >

前端实现pdf文件的在线预览与下载相关推荐

最新文章

热门文章