刚好遇到需求,需要在手机端--展示一个电子收据,电子收据返回是PDF格式的,所以需要在前端上面去做PDF预览。

在学习过程中,了解到一种很简单,不需要任何插件的方法做PDF预览,但是这方法有局限性.

代码如下:

<object data="../assets/09.pdf" type="application/pdf" width="100%" height="100%">
<iframe src="../assets/09.pdf" width="100%" height="100%" style="border: none;">
 
This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
 
</iframe>
 
</object>
直接在HTML,中嵌入上诉代码,在支持PDF格式的浏览器中就可以直接查看了。
局限性:低版本IE,不能直接查看,  手机端这样使用的话,iOS可以直接预览PDF,但是安卓手机回提示下载,不能直接预览。
 
那么我们就要使用第二种方法。
 
引入PDF.js文件进行展示, 遇到一个很不错的写pdf.js如何使用的文章,我 就不写了 ,直接附上地址吧
https://blog.csdn.net/li_cheng_liang/article/details/75332938
 
 
 

JS展示预览PDF。的更多相关文章

  1. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  2. pc或者微信上用pdf.js在线预览pdf和word

    最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...

  3. [pdf.js]预览pdf时,中文名称乱码的问题

    在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" chars ...

  4. 前端使用pdf.js预览pdf文件

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

  5. 用pdf.js实现在移动端在线预览pdf文件

    用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo ...

  6. 前端使用pdf.js预览pdf文件,超级简单

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

  7. vue文件流转换成pdf预览(pdf.js+iframe)

    参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/     支持获取文件流到客户端 ...

  8. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

  9. WEB在线预览PDF

    这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...

随机推荐

  1. springMVC绑定json参数之二(2.1)

    二.springmvc 接收不同格式的json字符串 1.首先扫盲几个知识点: 这个绑定json参数讲的都是用@RequestBody标签,所以前台必须传json字符串,不能是json对象,但是如果不 ...

  2. css菜鸟学习之block,inline和inline-block概念和区别

    block,inline和inline-block概念和区别   总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...

  3. HTML DOM clearTimeout() 方法

    转自:http://www.w3school.com.cn/jsref/met_win_cleartimeout.asp 定义和用法 clearTimeout() 方法可取消由 setTimeout( ...

  4. MySQL的变量--系统变量、状态变量

    MySQL的变量分为以下两种:1)系统变量:配置MySQL服务器的运行环境,可以用show variables查看2)状态变量:监控MySQL服务器的运行状态,可以用show status查看 一.系 ...

  5. java单链表反转

    今天做leetcode,遇到了单链表反转.研究了半天还搞的不是太懂,先做个笔记吧 参考:http://blog.csdn.net/guyuealian/article/details/51119499 ...

  6. 在Eclipse里面配置Struts2

    下面介绍在Eclipse里面配置Struts2 下载Struts2的压缩包 我下载的是2.3.32版本 解压之后如图所示 apps目录:Struts2的范例 docs目录:Struts2的文档 lib ...

  7. 简单的html兼容(参考js和css的常规写法)

    参考往常css/js的浏览器选择加载 <!--[if lte IE 8]> <link rel="stylesheet" href="IEBrower. ...

  8. Windows form UI skinEngine的使用方法

    1.安装SkinEngine(这里安装的是3.4.7) 链接: https://pan.baidu.com/s/1-kZ5KgYclshWc17jbuke5w 提取码: bp7n 复制这段内容后打开百 ...

  9. HBase高可用原理与实践

    前言 前段时间有套线上HBase出了点小问题,导致该套HBase集群服务停止了2个小时,从而造成使用该套HBase作为数据存储的应用也出现了服务异常.在排查问题之余,我们不禁也在思考,以后再出现类似的 ...

  10. 洛谷P3138 [USACO16FEB]负载平衡Load Balancing_Silver

    P3138 [USACO16FEB]负载平衡Load Balancing_Silver 题目描述 Farmer John's NN cows are each standing at distinct ...