刚好遇到需求，需要在手机端--展示一个电子收据，电子收据返回是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. pythoon_interview_redit

    easy/intermediate What are Python decorators and how would you use them?How would you setup many pro ...

  2. Python-socket发送文件并解决粘包问题

    服务器端要先根据客户端要下载的文件进行判断是否存在,还要根据文件大小来进行传送,最后还要比对文件的md5值来判断传送的文件是否正确,通过判断剩余字节来解决粘包问题 服务器端 # -*- coding: ...

  3. Load Runner 变量、参数的简单使用

    Action(){ 定义数组时一定要指明大小 变量定义一定要放在所以操作之前,放在脚本最前面     int num ;//定义数值变量 int numy[5];//定义整型数组 char *str1 ...

  4. [转]hadoop运行mapreduce作业无法连接0.0.0.0/0.0.0.0:10020

    14/04/04 17:15:12 INFO mapreduce.Job:  map 0% reduce 0% 14/04/04 17:19:42 INFO mapreduce.Job:  map 4 ...

  5. java之格式化输出

    参考http://how2j.cn/k/number-string/number-string-foramt/320.html#nowhere 格式化输出 如果不使用格式化输出,就需要进行字符串连接, ...

  6. Git error: unable to create file xxx: Filename too long

    一.问题描述 在使用 git 时,提示 error: unable to create file xxx: Filename too long error: unable to create file ...

  7. C#中的自动属性、隐式类型var、对象初始化器与集合初始化器、扩展方法

    1.自动属性(Auto-Implemented Properties) //以前的写法 .net2.0 private string _userName; public string UserName ...

  8. Yum本地源制作

    参考文档 环境准备 # cat /etc/os-release NAME="CentOS Linux" VERSION="7 (Core)" ID=" ...

  9. 【leetcode 114. 二叉树展开为链表】解题报告

    思路:递归,将左子树变成单链表形式,再将右子树变成单链表形式,最后将左子树单链表的末端连接到右子树单链表表头,将根节点的左孩子置空 void flatten(TreeNode* root) { if ...

  10. Unity MMORPG游戏优化经验分享

    https://mp.weixin.qq.com/s/thGF2WVUkIQYQDrz5DISxA 今天由Unity技术支持工程师高岩,根据实际的技术支持工作经验积累,分享如何对Unity MMORP ...