<!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. SDUT OJ 顺序表应用5：有序顺序表归并

    顺序表应用5:有序顺序表归并 Time Limit: 100 ms Memory Limit: 880 KiB Submit Statistic Discuss Problem Description ...

  2. [HNOI2006]公路修建问题 BZOJ1196 Kruskal

    题目描述 输入输出格式 输入格式: 在实际评测时,将只会有m-1行公路 输出格式: 输入输出样例 输入样例#1: 复制 4 2 5 1 2 6 5 1 3 3 1 2 3 9 4 2 4 6 1 输出 ...

  3. js 事件的阶段

    事件有三个阶段: 1.事件捕获阶段 :从外向内 2.事件目标阶段 :最开始选择的那个 3.事件冒泡阶段 : 从里向外   为元素绑定事件 addEventListener("没有on的事件类 ...

  4. 分布式id生成方法

    系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,也常常为这个问题而纠结.生成ID的方法有很多,适应不同的场景.需求以及性能要求.所以有些比较复杂的系统会有多个ID生成的策略.下面就介绍一些常见 ...

  5. Qt 学习之路 2（45）：模型

    Home / Qt 学习之路 2 / Qt 学习之路 2(45):模型 Qt 学习之路 2(45):模型  豆子  2013年2月26日  Qt 学习之路 2  23条评论 在前面两章的基础之上,我们 ...

  6. Convert DataTable to List<T> where Class of List is Dynamic

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  7. git 下载 安装

    1.下载Git,官网地址:https://git-scm.com/,进入官网首页 在右下方的显示器中找到最新的版本下载,点击下载,跳转到下载页面 下载完成 2.安装Git 双击刚刚下载完成的安装文件, ...

  8. wepsocket 了解一下

    WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实现了浏览器与服务器全双工(full-duplex ...

  9. 112th LeetCode Weekly Contest Minimum Increment to Make Array Unique

    Given an array of integers A, a move consists of choosing any A[i], and incrementing it by 1. Return ...

  10. 一种简单快速的模板解析方法，活用with javascript版

    //一种简单快速的模板解析方法,活用with var parseTpl = function( str, data ) { var tmpl = 'var __p=[];' + 'with(obj|| ...