刚好遇到需求,需要在手机端--展示一个电子收据,电子收据返回是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. 【转载】ruby 中数组函数示例(1)(转)

    函数名称 说明 示例 &      数组与,返回两数组的交集 [1,2] & [2,3] =>[2]   * 复制数组n次 [1,2]*2       => [1,2,1, ...

  2. qtp ie_hook

    今天要讲的内容是注册异类子控件授予强制HOOK,名字有点抽象,简单的说就是在一个QTP可识别的A类插件窗口对象中存在着B类插件的控件对象, 最常见的例子就是在应用程序中内嵌一个Browser对象子控件 ...

  3. (Python编程)Pickle对象

    Programming Python, 3rd Edition 翻译 最新版本见:http://wiki.woodpecker.org.cn/moin/PP3eD 19.4. Pickled Obje ...

  4. 面试题: mysql 数据库已看 sql安全性 索引 引擎 sql优化

    总结的一些MySQL数据库面试题 2016年06月16日 11:41:18 阅读数:4950 一.sql语句应该考虑哪些安全性? (1)防止sql注入,对特殊字符进行转义,过滤或者使用预编译的sql语 ...

  5. R语言中的字符处理

    R语言中的字符处理 (2011-07-10 22:29:48) 转载▼ 标签: r语言 字符处理 字符串 连接 分割 分类: R R的字符串处理能力还是很强大的,具体有base包的几个函数和strin ...

  6. 【maven setting.xml】

    <!--声明语句--> <?xml version="1.0" encoding="UTF-8"?> <settings xmln ...

  7. 开发一个android项目后的总结

    首先是自己在OneNote上面记录了一些流水: 个人感觉这一路开发下来,学到了一些知识,也碰到了许许多多的问题,也解决了一些问题.总体来看,有几点(个人观点,不支持任何讨论): 1.Java是很优秀的 ...

  8. Android APK反编译技巧全讲解

    导言:在我们安卓开发当中,我们不仅需要掌握基础的开发技能,也需要掌握软件的安全技能,这样才可以让我们的软件能够成为一款能够真正可以进行发布的软件,同时也可以让自己的核心技术不会被别人所盗取. 首先我们 ...

  9. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  10. javascript基础工具清单