1. <script type="text/javascript" src="build/pdf.min.js"></script>
  2. <script type="text/javascript">
  3. PDFJS.workerSrc = 'build/pdf.worker.min.js';
  4. </script>
  5. <script type="text/javascript">
  6. $.fn.showPDF = function(pdfUrl, opt){
  7. var options = $.extend({
  8. scale: 1,
  9. pageNum: 1
  10. }, opt || {});
  11.  
  12. this.each(function(){
  13. var pdfDoc,
  14. canvas = document.createElement('canvas'),
  15. ctx = canvas.getContext('2d');
  16. $(this).append(canvas);
  17.  
  18. function renderPage(num) {
  19. pdfDoc.getPage(num).then(function (page) {
  20. var viewport;
  21. if( typeof(options.width) == 'number' ){
  22. viewport = page.getViewport(1);
  23. options.scale = options.width / viewport.width;
  24. }
  25. viewport = page.getViewport(options.scale);
  26. canvas.height = viewport.height;
  27. canvas.width = viewport.width;
  28. var renderContext = {
  29. canvasContext: ctx,
  30. viewport: viewport
  31. };
  32. page.render(renderContext).promise.then(function () {
  33. if( $.isFunction(options.afterShow) ){
  34. options.afterShow();
  35. }
  36. });
  37. });
  38. }
  39.  
  40. if( $.isFunction(options.beforeShow) ){
  41. options.beforeShow();
  42. }
  43.  
  44. PDFJS.getDocument(pdfUrl).then(function (doc){
  45. pdfDoc = doc;
  46. renderPage(options.pageNum);
  47. });
  48. });
  49. }
  50.  
  51. $(function(){
  52. $('.pdfView').showPDF('1.pdf', {width: $(window).width()});
  53. });
  54. </script>

  

PDF.js https://mozilla.github.io/pdf.js/

使用pdf.js显示pdf文件的更多相关文章

  1. pdf.js 预览文件中文内容丢失

    问题: 在.netcore中使用pdf.js,pdf中有部分中文无法显示 在浏览器控制台发现有报错 发现在pdf.view.js中url路径异常,没有指向cmaps文件,于是调整了正确的相对路径 再次 ...

  2. pdf.js显示合同签名问题

    需求 pdf页面显示在ios11以下的环境,合同的签名印章或签字会显示不出 解决方案(初步处理参考下文引用,这里是后续具体做法) 现在通过使用pdf.js插件,参考下文,引入自己的代码 我把gener ...

  3. 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误

    首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...

  4. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

  5. 基于VUE利用pdf.js实现文件流形式的pdf显示

    首先推荐大家看一下这个demo vue-pdf.js-demo,这里面包含固定本地地址,远程pdf地址,通过打开文件的方式打开pdf 这儿我们着重介绍一下通过文件流的形式打开pdf.(所谓文件流,就是 ...

  6. 使用 pdf.js 在网页中加载 pdf 文件

    在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子商务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...

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

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

  8. base64编码后的pdf文件前端页面展示--pdf.js的应用

    最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...

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

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

随机推荐

  1. 小白月赛22 F: 累乘数字

    F:累乘数字 考察点: 思维,高精度 坑点 : 模拟就 OK 析题得侃: 如果你思维比较灵敏:直接输出这个数+ d 个 "00"就行了 当然,我还没有那么灵敏,只能用大数来搞了 关 ...

  2. 深入浅出Mybatis系列六-objectFactory、plugins、mappers简介与配置

    注:本文转载自南轲梦 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 上篇文章<深入浅出Mybatis系列(五)---TypeHandler简介及配 ...

  3. 《深入理解java虚拟机》读书笔记六——第七章

    第七章 虚拟机类加载机制 1.类加载的时机 虚拟机的类加载机制: 虚拟机把描述类的数据从class文件中加载到内存,并对数据进行校验.转换解析和初始化,最终形成了可以被虚拟机直接使用的Java类型,这 ...

  4. 牛客网——剑指offer(跳台阶以及变态跳台阶_java实现)

    首先说一个剪枝的概念: 剪枝出现在递归和类递归程序里,因为递归操作用图来表示就是一棵树,树有很多分叉,如果不作处理,就有很多重复分叉,会降低效率,如果能把这些分叉先行记录下来,就可以大大提升效率——这 ...

  5. clone()与clone(true)的用法

    clone() 方法生成被选元素的副本,包含子节点.文本和属性. 使用 clone(true) 方法在clone()的基础上还包括克隆元素的事件处理器.

  6. C++——动态内存分配1

    9.动态内存分配  new 类型名T(初值列表) 其功能是在程序执行期间申请用于存放T类型对象的内存空间,并依初值列表赋以初值,结果值:成功则T类型的指针,指向新分配的内存:失败则为0(null).若 ...

  7. Oracle - 拼接多个字段 - wm_concat()函数

    Oracle wm_concat()函数oracle wm_concat(column)函数使我们经常会使用到的,下面就教您如何使用oraclewm_concat(column)函数实现字段合并如:s ...

  8. JUC之CountDownLatch和CyclicBarrier的区别 (转)

    CountDownLatch和CyclicBarrier的功能看起来很相似,不易区分,有一种谜之的神秘.本文将通过通俗的例子并结合代码讲解两者的使用方法和区别. CountDownLatch和Cycl ...

  9. CSS 自适应导航菜单

    文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...

  10. AcWing 1022. 宠物小精灵之收服 二维费用背包

    #include<iostream> using namespace std ; ; int f[N][N]; int V1,V2,n; int main() { cin>>V ...