<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

    <h1>PDF.js 'Hello, world!' example</h1>

    <canvas id="the-canvas"></canvas>

</body>

<script>

    var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';

    // Loaded via <script> tag, create shortcut to access PDF.js exports.

    var pdfjsLib = window['pdfjs-dist/build/pdf'];

    // The workerSrc property shall be specified.

    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

    // Asynchronous download of PDF

    var loadingTask = pdfjsLib.getDocument(url);

    loadingTask.promise.then(function (pdf) {

        console.log('PDF loaded');

        // Fetch the first page

        var pageNumber = 1;

        pdf.getPage(pageNumber).then(function (page) {

            console.log('Page loaded');

            var scale = 1.5;

            var viewport = page.getViewport(scale);

            // Prepare canvas using PDF page dimensions

            var canvas = document.getElementById('the-canvas');

            var context = canvas.getContext('2d');

            canvas.height = viewport.height;

            canvas.width = viewport.width;

            // Render PDF page into canvas context

            var renderContext = {

                canvasContext: context,

                viewport: viewport

            };

            var renderTask = page.render(renderContext);

            renderTask.then(function () {

                console.log('Page rendered');

            });

        });

    }, function (reason) {

        // PDF loading error

        console.error(reason);

    });

</script>

</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. AForge.net 录像拍照功能实现 转

    AForge.net 使用之录像拍照功能实现 最近使用aforge.NET拍照录像功能实现 记录一下以便以后好学习,哈哈,直接上代码 连接摄像头设备,这里需要引入 AForge.Video; AFor ...

  2. JUC包下CyclicBarrier学习笔记

    CyclicBarrier,一个同步辅助类,在API中是这么介绍的: 它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这 ...

  3. ionic4 refresh组件位置变更：Ignored attempt to cancel a touchmove event with cancelable=false

    io3 中 refresh组件位置可不定: io4 中 须置顶,否则报错,此外complete方法的调用位置改为target属性 参考:https://github.com/ionic-team/io ...

  4. Nginx负载均衡详解

     upstream mysvr {  server 192.168.10.121:3333; server 192.168.10.122:3333; } server { .... location ...

  5. hdu 1231 最大连续和

    题意:给定一组数,求最大的连续和,且输出开始与结尾 #include<iostream> #include<cstdio> using namespace std; int s ...

  6. FFMpeg 版本错误

    错误情况: relocation error: /usr/local/lib/libavfilter.so.3: symbol sws_get_class, version LIBSWSCALE_2 ...

  7. 【网络】CCNA实验一：Vlan、Trunk

    要求: 1:不同楼层物理隔离,但逻辑相连 2:相同楼层物理相连,但逻辑隔离 3:主机可以动态获取IP地址 4:不同VLAN间可以进行通信 5:主机最终访问www.esafenet.com弹出" ...

  8. 《STL详解》读书笔记

    vector 向量容器v.insert(v.begin(), num);//增加v.erase(v.begin(), v.end()); //擦除v.erase(v.begin());reverse( ...

  9. follow Up — 20181101

    406. Minimum Size Subarray Sum public class Solution { /** * @param nums: an array of integers * @pa ...

  10. 剑指offer——面试题8：二叉树的下一个节点

    // 面试题8:二叉树的下一个结点 // 题目:给定一棵二叉树和其中的一个结点,如何找出中序遍历顺序的下一个结点? // 树中的结点除了有两个分别指向左右子结点的指针以外,还有一个指向父结点的指针. ...