pdf.js 利用HTML5技术显示pdf内容

Mozilla实验室最近在github上开源了一款js库pdf.js,用来读取PDF文件。

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

Using base64 encoded PDF

HTML页面内容

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script><h1>PDF.js 'Hello, base64!' example</h1><canvas id="the-canvas"></canvas>script src="//mozilla.github.io/pdf.js/build/pdf.js"></script><h1>PDF.js 'Hello, base64!' example</h1><canvas id="the-canvas"></canvas>

JavaScript代码

// atob() is used to convert base64 encoded PDF to binary-like data.
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
// Base64_encoding_and_decoding.)
var pdfData = atob('JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');// Disable workers to avoid yet another cross-origin issue (workers need
// the URL of the script to be loaded, and dynamically loading a cross-origin
// script does not work).
// PDFJS.disableWorker = true;// The workerSrc property shall be specified.
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';// Using DocumentInitParameters object to load binary data.
var loadingTask = PDFJS.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {console.log('PDF loaded');// Fetch the first pagevar 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 dimensionsvar canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas contextvar renderContext = {canvasContext: context,viewport: viewport};var renderTask = page.render(renderContext);renderTask.then(function () {console.log('Page rendered');});});
}, function (reason) {// PDF loading errorconsole.error(reason);
});
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
// Base64_encoding_and_decoding.)
var pdfData = atob('JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');// Disable workers to avoid yet another cross-origin issue (workers need
// the URL of the script to be loaded, and dynamically loading a cross-origin
// script does not work).
// PDFJS.disableWorker = true;// The workerSrc property shall be specified.
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';// Using DocumentInitParameters object to load binary data.
var loadingTask = PDFJS.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {console.log('PDF loaded');// Fetch the first pagevar 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 dimensionsvar canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas contextvar renderContext = {canvasContext: context,viewport: viewport};var renderTask = page.render(renderContext);renderTask.then(function () {console.log('Page rendered');});});
}, function (reason) {// PDF loading errorconsole.error(reason);
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286672.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET 对于构建系统应用的探索历程

这篇文章介绍和梳理一下截止到 2022 年的 .NET 向系统编程探索的历程。2003 年的 Singularity 项目试图让 Windows 的内核态与用户态应用完全建立在 .NET 托管世界上&#xff0c;并试验了一个支持编译到本机代码的类似 C# 的语言&#xff0c;并发布了很多相关的论文。后来 Sing…

Android之tint图片着色器

1、爆照 上面是原图,下面是点击效果。 2、介绍 设置着色模式用的。这个模式共有6种,分别为: multiply screen src_in(默认) src_over src_atop add android:tint 属性可以改变图片颜色 3 源代码 colors.xml <?xml version="1.0" encoding="utf-8&qu…

完美解决ArcGIS10.x栅格空间插值报错无法进行和导出插值栅格结果出错的问题

不少GISer,尤其是初学者,对栅格数据的操作,主要是栅格插值无法进行,或者是插值后的栅格结果无法导出,或者导出结果为空,或者是栅格格式无法转换,今天刘一哥GIS就帮您排忧解难吧。 其实,关于栅格(尤其是ESRI GRID格式)问题,我们只需要要记住两点,一般问题就可以迎刃…

关于 Oracle分页数据重复的问题

2019独角兽企业重金招聘Python工程师标准>>> 先说问题吧。最近在测试一个新的模块&#xff0c;发现列表数据的前三页数据竟然是一样的。第一反应是 pageNo 的问题&#xff0c;debug一看&#xff0c;pageNo是正确的&#xff0c;然后一层层debug下去&#xff0c;所有参…

10分钟做一个新闻问答web站点[iVX低代码实战]

一、创建首页 进入到iVX线上编辑器后&#xff0c;选择相对定位。 点击创建后进入到 IDE 之中&#xff1a; 我们在第一步中首先创建一个首页。点击左侧组件栏中的页面组件&#xff0c;创建一个页面&#xff1a; 接着重命名该页面为Home&#xff0c;在页面中创建一个行&#x…

iOS开发网络篇—网络编程基础

一、为什么要学习网络编程 1.简单说明 在移动互联网时代&#xff0c;移动应用的特征有&#xff1a; &#xff08;1&#xff09;几乎所有应用都需要用到网络&#xff0c;比如QQ、微博、网易新闻、优酷、百度地图 &#xff08;2&#xff09;只有通过网络跟外界进行数据交互、数据…

PDF.js开发笔记

PDF.js是一个由HTML5建立的PDF阅读器。依托开源社区驱动和Mozilla实验室的技术支持。目标是建立一个通用的&#xff0c;基于web的解析和渲染PDF文件的平台。https://github.com/ChineseDron/pdf.js# 是从Mozilla原版中fork出来的一个版本&#xff0c;原版的链接在这里https://g…

深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

本文将详细描述如何使用Three.js给3D对象添加贴图&#xff08;Texture Map&#xff0c;也译作纹理映射&#xff0c;“贴图”的翻译要更直观&#xff0c;而“纹理映射”更准确。&#xff09;。为了能够查看在线演示效果&#xff0c;你需要有一个兼容WebGL的现代浏览器&#xff0…

Android之glide加载圆形图片地址异常监听

1 问题 glide加载图片地址的时候&#xff0c;可能这个地址没有图片&#xff0c;那么我们需要对这种异常情况进行处理&#xff0c;当然我们也需要把这个图片进行圆形化 2 代码解决 Glide.with(mContext).load(iconPath).error(new ColorDrawable()).listener(new RequestListen…

在兰州吃牛肉面时亲眼目睹的一幕,我感动了

今天中午去吃占国牛肉面&#xff0c;人比较多&#xff0c;很热闹。旁边坐了一群身穿校服的小学生&#xff0c;身后坐着一位小学老师&#xff0c;当孩子们发现老师在后面的时候&#xff0c;都异口同声地叫老师过去跟他们一起吃&#xff0c;老师嘿的一笑&#xff0c;没同意&#…

如何跨 Namespace 同步 Secret 和 ConfigMap?

Secret 和 ConfigMap 资源对象是命名空间级别的。它们只能被同一命名空间中的 Pod 引用。所以有时候不得不手动为每个命名空间创建它们。但有很多场景&#xff0c;我们想让它们是全局的&#xff0c;至少可以是跨命名空间共享的 Secret 和 ConfigMap&#xff0c;例如这些场景&am…

OS X 10.11 安装Cocoapods

sudo gem install cocoapods报如下错误&#xff1a; ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/xcodeproj 解决的办法是&#xff1a;sudo gem install -n /usr/local/bin cocoapods gem影像改成&#xff1a;https://ruby.taobao.org/…

一文总结学习 Python 的 14 张思维导图

本文主要涵盖了 Python 编程的核心知识&#xff08;暂不包括标准库及第三方库&#xff0c;后续会发布相应专题的文章&#xff09;。 首先&#xff0c;按顺序依次展示了以下内容的一系列思维导图&#xff1a;基础知识&#xff0c;数据类型&#xff08;数字&#xff0c;字符串&am…

GEE学习笔记

掩膜 ​ 在遥感图像处理中&#xff0c;"掩膜"是指一种用于隐藏或保留图像特定部分的技术。掩膜通常是一个二进制图像&#xff0c;其中的像素值为0或1&#xff0c;分别表示遮蔽或保留。 ​ 在去除云的情境中&#xff0c;掩膜通常用于隐藏图像中被云覆盖的部分&#…

十一、飞机大战(IVX 快速开发教程)

十一、飞机大战 制作微信小游戏大致流程与微信小程序、Web类似&#xff0c;不同的在于是组件的使用。 文章目录十一、飞机大战11.1.1 完成游戏角色制作11.1.2 完成物理世界添加11.1.3 完成子弹对象反重力运动11.1.4 使用对象组创建子弹11.1.5 子弹优化11.1.6 设置敌机11.1.7 优…

中国版LinkedIn呼之欲出

迄今为止&#xff0c;发展势头强劲的Facebook仍未上市&#xff0c;而美国职业社交网站LinkedIn 却率先登录纽约证券交易所&#xff0c;股价在第一天的交易中飙升&#xff0c;从45美元的发行价上涨了一倍&#xff0c;然后超过100美元&#xff0c;最终以94.25美元收盘。 LinkedIn…

Android之实现RecyclerView拖拽效果和固定部分元素不进行交换位置(包含源代码下载地址)

1、效果爆照 启动的效果 拖动过程中的效果 拖动后的效果 2、需求和问题 需求:RecyclerView实现拖拽效果,但是部分固定位置不能进行拖拽也不能在拖拽的过程中交换顺序

各主流浏览器内核介绍

所谓的“浏览器内核”无非指的是一个浏览器最核心的部分——“Rendering Engine”&#xff0c;直译这个词汇叫做“渲染引擎”&#xff0c;不过我们也常称其为“排版引擎”、“解释引擎”。这个引擎的作用是帮助浏览器来渲染网页的内容&#xff0c;将页面内 容和排版代码转换为用…

测绘地理信息标准(国家、行业、地方)大全来了:测绘地理信息标准化服务平台

测绘地理信息标准化服务平台&#xff0c;这里有你需要的所有标准&#xff0c;赶快来围观吧&#xff01;

WPF效果第一百八十七篇之再玩ListBox

大周末的接着上一篇又玩了ListBox,这不又来再次去玩耍ListBox;毕竟是我的最爱,没办法就喜欢玩耍他;闲话也不多扯了,直接看最终效果:2、ItemsPanel还是老样子:<ItemsPanelTemplate x:Key"CommonItemsPanelTemplate"><WrapPanel Orientation"Horizontal&…