<!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. 前端CSS的基本素养

    前端开发的三驾马车——html.css.js,先谈谈CSS CSS 前期:解决布局.特效.兼容问题 中级:网站风格的制定.色调.模块.布局方式.交互方式.逻辑设计等 高级:模块命名.类的命名.文件的组 ...

  2. Python博文列表

    手把手|100行Python代码自动抢火车票!(包教包会):https://zhuanlan.zhihu.com/p/32928355 最全中华古诗词数据库, :https://github.com/ ...

  3. win10进入安全模式的方法

    https://jingyan.baidu.com/article/a3aad71ac5919bb1fa009667.html

  4. (STM32F4) Real-time Clock

    老實說Real-time Clok這項功能,我也只有在PC和手機上有見過,其他的應用產品上我也很少見到. 言歸正傳在STM32F4 RTC這項功能在IC內部就有內建,在早期的8051是如果要做RCT是 ...

  5. sqlalchemy orm数据类型验证方法比较

    1.在定义ORM模型时校验 sqlalchemy提供validates函数支持对字段的校验 from sqlalchemy.orm import validates class EmailAddres ...

  6. [FJOI2017]矩阵填数

    [Luogu3813] [LOJ2280] 写得很好的题解 \(1.\)离散化出每一块内部不互相影响的块 \(2.\)\(dp[i][j]\)为前 \(i\) 种重叠块其中有 \(j\) 这些状态的矩 ...

  7. LeetCode记录之26——Remove Duplicates from Sorted Array

    国外的表达思维跟咱们有很大差别,做这道题的时候很明显.简单说本题就是让你把有序数组中的重复项给换成正常有序的.比如 1 2 2 3换成 1 2 3 3,根本不需要考虑重复的怎么办,怎么删除重复项等等. ...

  8. PhpExcel中文帮助手册|PhpExcel使用方法 （ 后面有部分没有显示出来 可以编辑中看到！！）

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  9. SpringBoot 精简笔记

    0. Fundamental a. @SpringBootApplication //启动类 b. pom.xml //Maven基本依赖 <parent> <groupId> ...

  10. C++ GUI Qt4编程(03)-1.3layout

    1. 根据C++ GUI Qt4编程(第二版)整理2. 系统:centos7:  Qt版本:5.5.13. 程序:layout.cpp #include <QApplication> #i ...