1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.     <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
  13.  
  14.     <h1>PDF.js 'Hello, world!' example</h1>
  15.  
  16.     <canvas id="the-canvas"></canvas>
  17. </body>
  18. <script>
  19.     var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';
  20.  
  21.     // Loaded via <script> tag, create shortcut to access PDF.js exports.
  22.     var pdfjsLib = window['pdfjs-dist/build/pdf'];
  23.     // The workerSrc property shall be specified.
  24.     pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
  25.  
  26.     // Asynchronous download of PDF
  27.     var loadingTask = pdfjsLib.getDocument(url);
  28.     loadingTask.promise.then(function (pdf) {
  29.         console.log('PDF loaded');
  30.  
  31.         // Fetch the first page
  32.         var pageNumber = 1;
  33.         pdf.getPage(pageNumber).then(function (page) {
  34.             console.log('Page loaded');
  35.  
  36.             var scale = 1.5;
  37.             var viewport = page.getViewport(scale);
  38.  
  39.             // Prepare canvas using PDF page dimensions
  40.             var canvas = document.getElementById('the-canvas');
  41.             var context = canvas.getContext('2d');
  42.             canvas.height = viewport.height;
  43.             canvas.width = viewport.width;
  44.  
  45.             // Render PDF page into canvas context
  46.             var renderContext = {
  47.                 canvasContext: context,
  48.                 viewport: viewport
  49.             };
  50.             var renderTask = page.render(renderContext);
  51.             renderTask.then(function () {
  52.                 console.log('Page rendered');
  53.             });
  54.         });
  55.     }, function (reason) {
  56.         // PDF loading error
  57.         console.error(reason);
  58.     });
  59. </script>
  60.  
  61. </html>

　　官网的demo是个html实现的pdf页面http://mozilla.github.io/pdf.js/web/viewer.html  也可以学习参考

　　参考http://mozilla.github.io/pdf.js/

pdf转为html查看pdf.js的更多相关文章

  1. Java 将PDF 转为Word、图片、SVG、XPS、Html、PDF/A

    本文将介绍通过Java编程来实现PDF文档转换的方法.包括: 1. PDF转为Word 2. PDF转为图片 3. PDF转为Html 4. PDF转为SVG 4.1 将PDF每一页转为单个的SVG ...

  2. 浏览器在线查看pdf文件 pdf.js的使用教程

    谷歌浏览器可以直接在线查看pdf,而IE内核浏览器无法在线查看,默认是下载. 这里用到的是pdf.js,不仅支持IE内核浏览器,而且兼容手机查看pdf 官网地址:http://mozilla.gith ...

  3. javaWeb项目中如何实现在线查看pdf文件

    最近有需求要实现在网页直接查看pdf,word,excel文件.但是实际当中并没有很好的开源插件供我们使用,确实有一些付费的插件不错,也很好用,但是对于我来说都不适合. 现在只是单纯的找到了围魏救赵的 ...

  4. C# 将PDF转为SVG的3种情况

    PDF格式的文档广泛用于各种办公场所,在工作中难免会有将PDF文档转换为其他文档格式的需要.在本篇文档中,将介绍PDF转为SVG的方法.根据不同的转换需求,这里分三种情况进行讲述,即转PDF所有页为S ...

  5. JAVA实现在线查看PDF和office文档

    一个项目中要做一个在线预览附件(和百度文库差不多)的小功能点,楼主在开发过程中踩了很多坑的同时也总结了一些方法,仅供广大猿友参考,那么要实现这个小功能,目前主要是有如下3种可行的实现方式,下面先说实现 ...

  6. 【转载】Chrome 0day漏洞：不要用Chrome查看pdf文件

    英文原文地址:https://blog.edgespot.io/2019/02/edgespot-detects-pdf-zero-day-samples.html 中文原文地址:https://ww ...

  7. PDF预览之PDFObject.js总结

    get from:PDF预览之PDFObject.js总结   PDFObject.js - 将PDF嵌入到一个div内,而不是占据整个页面(要求浏览器支持显示PDF,不支持,可配置PDF.js来实现 ...

  8. Office Web App2013 在线查看PDF文件

    经常会有客户问,在SharePoint中,如何在浏览器中查看与编辑文档,通常给出的解决方案是集成Office Web App. 而在实际应用过程中,客户通常会要求实现PDF文件在线查看,对于PDF文件 ...

  9. C# 将PDF转为线性化PDF

    线性化PDF文件是PDF文件的一种特殊格式,可以通过Internet更快地进行查看.线性化的PDF,在页面数量很多的情况下,更能突出表现出快速浏览的优势.下面是通过后端.NET程序实现将PDF文件转为 ...

随机推荐

  1. Python3之pickle模块

    用于序列化的两个模块 json:用于字符串和Python数据类型间进行转换 pickle: 用于python特有的类型和python的数据类型间进行转换 json提供四个功能:dumps,dump,l ...

  2. gitlab 服务器的搭建与使用全过程（二）

    <gitlab操作手册 1.0 > 此手册适用于 Mac 计算机 第一步:根据从管理员得到的用户名和初始密码登陆并修改密码.新密码不得少于8个字符 第二步:在自己的电脑上创建密钥,并提交提 ...

  3. Query on a tree II 倍增LCA

    You are given a tree (an undirected acyclic connected graph) with N nodes, and edges numbered 1, 2, ...

  4. C# 获取类中属性注释值

    转 http://bbs.csdn.net/topics/350019800 PropertyInfo[] peroperties = typeof(TEST).GetProperties(Bindi ...

  5. 黑马学习CSS之CSS模块化规范全部组成 CSS属性列表

  6. js事件处理程序return false ,preventDefault,returnValue

    面试题目中,经常会被问到如何阻止默认行为. 以下是<javascript权威指南>书中的内容,详情可以去看书. 能够取消事件默认操作的方法有三种 1.属性注册的事件处理程序的返回值fals ...

  7. window 7/8/10 安装nginx

    1.百度 nginx   找到    http://nginx.org/   官网 2.找到一个nginx 版本  如 最新版本 2018-12-25  nginx-1.15.8 mainline v ...

  8. DDOS压力测试

    分布式拒绝服务(DDoS:Distributed Denial of Service)攻击指借助于客户/服务器技术,将多个计算机联合起来作为攻击平台,对一个或多个目标发动DDoS攻击,从而成倍地提高拒 ...

  9. POJ - 1222 / POJ - 3279 枚举第一行

    说好的高斯消元法呢,暴搜都能0ms 这种翻转就是枚举第一行控制变量下面行就全都确定了 代码参考挑战程序设计例题 #include<iostream> #include<algorit ...

  10. 轻量级ORM框架：Dapper中的一些复杂操作和inner join应该注意的坑

    上一篇博文中我们快速的介绍了dapper的一些基本CURD操作,也是我们manipulate db不可或缺的最小单元,这一篇我们介绍下相对复杂 一点的操作,源码分析暂时就不在这里介绍了. 一:tabl ...