刚好遇到需求,需要在手机端--展示一个电子收据,电子收据返回是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. stm32之内部功能

    本文将提到以下内容: 位带操作 中断 printf重定向 随机数发生器RNG AD/DA DMA 高性能计算能力 加密 ART加速 一.位带操作 在学习51单片机的时候就使用过位操作,通过关键字sbi ...

  2. python 基础 列表 增删改查

    names = ["aaron", "alex", "james", "meihengfan"]names2 = [1, ...

  3. 【总结整理】javascript进阶学习(慕课网)

    数组 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 二维数组 二维数组 一维数组,我们看成一组盒子,每个盒子只能放一个内容. 一维数组的表示: ...

  4. 生物数据库介绍——NCBI

    NCBI(National Center for Biotechnology Information,美国国家生物技术信息中心)除了维护GenBank核酸序列数据库外,还提供数据分析和检索资源.NCB ...

  5. 1.3 DVWA亲测sql注入漏洞

    LOW等级   我们先输入1 我们加上一个单引号,页面报错 我们看一下源代码: <?php if( isset( $_REQUEST[ 'Submit' ] ) ) { // Get input ...

  6. Python版的数据库查询构造器、ORM及动态迁移数据表。

    Orator Orator提供一个简单和方便的数据库数据处理库. 它的灵感来源于PHP的Laravel框架,借助其思想实现了python版的查询构造器和ORM. 这是完整的文档:http://orat ...

  7. 数据库路由中间件MyCat - 源代码篇(16)

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 5. 路由模块 真正取得RouteResultset的步骤:AbstractRouteStrategy的ro ...

  8. Syslog+Fluentd+InfluxDB日志收集系统搭建

    环境配置 节点 配置 类型 操作系统 Sched 2G 2CPU 50GB ens3=>192.168.200.11 KVM虚拟机 CentOS 7 Nova 4G 2CPU 50GB ens3 ...

  9. cinder 服务启动与请求流程源码分析

    文章以ocata版本进行分析 cinder   api 的创建和启动,和 nova   api 类似,都是通过在 api-paste.ini 中定义 app ,然后将 app 加载之后,启动 wsgi ...

  10. PHP 各个版本的区别

    查看详细内容