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

    第一种一对一 person和card,card的id即作为主键,又作为外键  // 各村对方的一个对象 public class Person { private Integer id; privat ...

  2. <%@ include file=""%>与<jsp:include page=""/>两种方式的作用

    一.前言 身为一名coder有太多太多的知识点要去学,太多太多的东西要去记.往往一些小细节也就难免疏忽,但悲催的是多数困恼你的bug就是因为这些微不足道的知识点.我们又不是机器人,怎么可能什么都记得了 ...

  3. Struts2学习第三课 Struts2详解

    接着上次的课程 这次我们看struts.xml 修改如下:这里是加上命名空间,默认的是不加,我们手动加上时就要在访问时加上命名空间. <?xml version="1.0" ...

  4. ps&CPU

    #include <pthread.h> void f();int main() {        f();        return 0;} void f() {        int ...

  5. C# 关于跨线程访问控件问题

    跨线程访问控件问题的原因是:控件都是在主线程中创建的,而系统默认控件的修改权归其创建线程所有.在子线程中如果需要直接修改控件的内容,需要使用委托机制将控件的修改操作交给主线程处理.因此,当没有使用委托 ...

  6. java线程基础知识----线程基础知识

    不知道从什么时候开始,学习知识变成了一个短期记忆的过程,总是容易忘记自己当初学懂的知识(fuck!),不知道是自己没有经常使用还是当初理解的不够深入.今天准备再对java的线程进行一下系统的学习,希望 ...

  7. MongoDB--副本集基本信息【面试必备】

    副本集的概念 副本集是一组服务器,其中有一个是主服务器(primary),用于处理客户端请求:还有多个备份服务器(secondary),用于保存主服务器的数据副本.如果主服务器崩溃了,备份服务器会自动 ...

  8. (PHP)redis List（列表）操作

    /** * * List操作 * 列表操作 * 可理解为数组操作 * 插入.删除数据按照一定规律排列的 * 元素可重复 * 适用于队列 * */ //在列表头部插入一个值one,当列表不存在时自动创建 ...

  9. hdu1695(莫比乌斯反演模板)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1695 题意: 对于 a, b, c, d, k . 有 x 属于 [a, b],  y 属于 [c, ...

  10. bzoj1934: [Shoi2007]Vote 善意的投票（最小割）

    传送门 考虑源点为同意,汇点为反对,那么只要源点向同意的连边,不同意的向汇点连边,求个最小割就是答案 然后考虑朋友之间怎么办,我们令朋友之间连双向边.这样不管怎么割都能对应一种选择情况.那么还是求一个 ...