从官网直接下载即可,地址:http://mozilla.github.io/pdf.js/getting_started/#download
建议下载稳定版本,如下图所示:
下载完成后将压缩包解压放在项目下,按照正常引入方式引入即可。
1.vue使用
第一步安装:
npm install --save pdfjs-dist
第二步引入:
import PDFJS from 'pdfjs-dist'
第三步就是在页面使用即可,下面演示export default中的代码:
export default {
data () {
return {
pdfDoc: null,
pageNum: 1,
pageRendering: false,
pageNumPending: null,
scale: 0.9
}
},
methods: {
showPDF (url) {
let _this = this
PDFJS.getDocument(url).then(function (pdf) {
_this.pdfDoc = pdf
_this.renderPage(1)
})
},
renderPage (num) {
this.pageRendering = true
let _this = this
this.pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport(_this.scale)
let canvas = document.getElementById('the-canvas')
canvas.height = viewport.height
canvas.width = viewport.width
// Render PDF page into canvas context
var renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
}
var renderTask = page.render(renderContext)
// Wait for rendering to finish
renderTask.promise.then(function () {
_this.pageRendering = false
if (_this.pageNumPending !== null) {
// New page rendering is pending
this.renderPage(_this.pageNumPending)
_this.pageNumPending = null
}
})
})
},
queueRenderPage (num) {
if (this.pageRendering) {
this.pageNumPending = num
} else {
this.renderPage(num)
}
},
onPrevPage () {
if (this.pageNum <= 1) {
return
}
this.pageNum--
this.queueRenderPage(this.pageNum)
},
onNextPage () {
if (this.pageNum >= this.pdfDoc.numPages) {
return
}
this.pageNum++
this.queueRenderPage(this.pageNum)
}
}
}
2.HTML(5)使用
第一步正常下载后解压放入项目中;
第二步在项目的页面引入即可,项目结构如下图:
由于是公司项目,我将项目名遮住,大家自行取名即可,我在此处将PDF.js放入了js目录下,大家也可以直接放在项目的根目录下。
引入如下代码:
<script type='text/javascript' src='js/PDF.js/build/pdf.js'></script>
第三步即可在js中使用。
① 引入单页的pdf:
var url = sessionStorage.sencondExperience_filePath;
pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';
pdfjsLib.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
需要注意的是pdfjsLib.workerSrc中,如果换成是PDFJS.workerSrc会报错:PDFJS is notdefined。有博客说在其之前加上PDFJS.disableWorker = true;会避免出错,但我尝试了错误依然存在。使用pdfjsLib.workerSrc不会出错!!!
②引入多页的pdf:
方法一:在html中设置好pdf页数对应的canvas,然后使用js一页一页的去渲染canvas。
html:
<canvas id="the-canvas01"></canvas>
<canvas id="the-canvas02"></canvas>
<canvas id="the-canvas03"></canvas>
js:
var url = sessionStorage.third_filePath;
pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';
pdfjsLib.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas01');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
pdf.getPage(2).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas02');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
pdf.getPage(3).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas03');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
可想而知,这种方法对于页面较少的pdfHIA比较合适,但是若是页数很多或者是不知道pdf的页数的情况,这种方法显然不适合了,由此推荐方法二。
方法二:只需要定义好在需要渲染的位置,再根据pdf的页数去动态渲染canvas。
html
< div id="canvas"></ div>
js
//PDF转成图片
var url = sessionStorage.other_filePath;
pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';
//创建
function createPdfContainer(id, className) {
var pdfContainer = document.getElementById('canvas');
var canvasNew = document.createElement('canvas');
$("canvas").on("click",function() {
var url = sessionStorage.other_filePath;
window.open(url);
})
canvasNew.id = id;
canvasNew.className = className;
pdfContainer.appendChild(canvasNew);
};
//渲染pdf
//建议给定pdf宽度
function renderPDF(pdf, i, id) {
pdf.getPage(i).then(function (page) {
var scale = 0.62;
var viewport = page.getViewport(scale);
//
// 准备用于渲染的 canvas 元素
//
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = document.documentElement.clientWidth;
//
// 将 PDF 页面渲染到 canvas 上下文中
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
};
//创建和pdf页数等同的canvas数
function createSeriesCanvas(num, template) {
var id = '';
for (var j = 1; j <= num; j++) {
id = template + j;
createPdfContainer(id, 'pdfClass');
}
}
//读取pdf文件,并加载到页面中
function loadPDF(fileURL) {
pdfjsLib.getDocument(fileURL).then(function (pdf) {
//用 promise 获取页面
var id = '';
var idTemplate = 'cw-pdf-';
var pageNum = pdf.numPages;
//根据页码创建画布
createSeriesCanvas(pageNum, idTemplate);
//将pdf渲染到画布上去
for (var i = 1; i <= pageNum; i++) {
id = idTemplate + i;
renderPDF(pdf, i, id);
}
});
}
loadPDF(url)
1.Uncaught TypeError: Cannot read property ‘getContext’ of null
这个错误是因为在html中需要先写好<canvas>标签,定义好id,不能使用div或其他标签。
在html中:
<canvas id="my-canvas"></canvas>
2.Uncaught (in promise) UnknownErrorException {name: “UnknownErrorException”, message: “Failed to fetch”, details: “UnknownErrorException: Failed to fetch”}
这个意思是未能捕获未知错误。我在此处出错的原因主要是后台给的pdf路径有问题导致的,换一个正确的即可~~
3.Uncaught (in promise) InvalidPDFException {name: “InvalidPDFException”, message: “Invalid PDF structure”}
这个意思是说无效的PDF格式的结构,其实就是代码中渲染pdf时的结构出现错误导致的,我是因为直接对pdf的页数:pdf.numPages循环,再去
渲染在canvas导致出错。错误代码如下:
for(const i in pdf.numPages){
pdf.getPage(i).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var id = i > 9 ? 'the-canvas' + i : 'the-canvas0' + i;
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
}
此时将id打印才明白所有id都为 the-canvas15,出现这个错误主要还是js功底不够扎实导致......所以不能这样简单的循环渲染,正确的解决
方法请看上面的讲解!!!
由此关于PDF.js的使用总结就到这了,有什么问题请留言撒~~
文章浏览阅读3k次,点赞51次,收藏41次。熟悉这些机器人的常见格式,对于创建和操作机器人是至关重要的_sdf和urdf
文章浏览阅读745次。一、软件工程中的设计数据设计或类设计将类模型转化为设计类的实现以及软件实现所要求的数据结构。体系结构设计定义了软件的主要结构化元素之间的关系、可满足系统需求的体系结构风格和模式以及影响体系结构实现方式的约束。接口设计描述了软件和协作系统之间、软件和使用人员之间如何通信。构件级设计将软件体系结构的结构化元素变换为对软件的过程性描述。二、软件质量指导原则和属性软件质量指导原则..._设计概念功能独立
文章浏览阅读6.8k次,点赞10次,收藏65次。文章目录一、打开软件1.1 打开kettle1.2 打开SQL Server1.3 打开navicat1.3.1 navicat连接sqlserver准备sql server数据表(dept)准备sql server数据表(emp)1.3.2 navicat连接mysql1.4 可能出现的bug问题Error connecting to database: (using class org.gjt.mm.mysql.Driver)Error connecting to database: (using c._kettle任务调度
文章浏览阅读1.4w次,点赞5次,收藏19次。http://www.gad.qq.com/article/detail/32503以代码托管平台起家的 GitHub 网站,已然成为全球程序员工作和生活中不可或缺的一份子。从优秀的企业,到优秀的程序员,都将自己最优秀的代码作品存放在这片开源净土里,供彼此学习交流。GitHub Trending 栏目甚至已经成为 IT 从业人员的新闻日报,每日必读。既然 GitHu_github与gitpod的插件
文章浏览阅读1.1k次。根据VCD文件的type,PTPX支持instantaneous peak power analysis和cycle_accurate peakpower analysis。Time-Based Power Analysis支持的VCD type 由于Gate_level和zero_delay的VCD不支持event propa..._ptpx time
文章浏览阅读79次。VisualSVN安装教程、、、-----------------------------------参考网址:https://www.visualsvn.com/server/download/安装参考网址:http://www.jb51.net/article/71815.htm----------------------------------------------..._安装visualsvn
文章浏览阅读645次。程序员使用的语言有鄙视链吗?有人说有,有人说没有。一个美团员工发帖说,筛选简历时用go语言的基本不看。短短一句话,把对go语言的鄙视体现得淋漓尽致,难道go语言真的不如其他语言?和他一..._go语言的鄙视链
文章浏览阅读5.3k次。在本文中,我将解释如何将ink与Unity项目集成,以及如何使用ink API与我们的小说网站源码系统进行交互。在我们开始之前,请确保您有一个包含一些对话和选择的墨水文件。您可能想下载并使用我准备的示例故事。这实际上是来自Guilt Free的简化场景,通过分享这一点,我想向您展示一个真实的视觉小说系统源码示例和实际代码的技术。完整源码:xsymz.icu项目设置继续在 Unity 中创建一个新的 2D 项目。然后添加您可以在此处找到的墨水插件。在ink插件文件夹(Plugins/Ink)里会有一_小说网站源码
文章浏览阅读531次。参考API Design Guidelineshttps://swift.org/documentation/api-design-guidelines/swift-style-guidehttps://github.com/raywenderlich/swift-style-guide项目命名规范一、工程文件夹、文件目录结构【业务模块】1、文件夹采用下划线命名,名字全部小写下划线间隔,如module_login2、文件、类、结构体、枚举、协议采用大驼峰命名,每个单词首字母大写,如 MyCu_swift 正则判断文件类型
文章浏览阅读2.2w次。1、return命令会使得一个函数返回.return命令会返回一个单一的数字参数, 而这个数字参数在调用这个函数的脚本中是可见的.如果没有指定返回参数,return在默认情况下会返回上一次命令的返回代码。2、了解一个概念:return value ﹗我们在 shell 下跑的每一个 command 或 function ,在结束的时候都会传回父行程一个值,称为 return value 。在 shell command line 中可用 $? 这个变量得到最"新"的一个 return value_shell return
文章浏览阅读834次。本系列文章主要写我在阅读Linux内核过程中,关注的比较难以理解但又设计巧妙的代码片段(不关注OS的各个模块的设计思想,此部分我准备写在“深入理解Linux Kernel”系列文章中),一来通过内核代码复习一下C语言及汇编语言的语法,二来学习内核开发大牛们书写代码的风格及思路。理解了上面之后,再来看看第二个BUILD_BUG_ON_NULL(e)宏,与第一个类似,-------------------------------------完--------------------------------_build_bug_on_zero
文章浏览阅读678次。//调用单片机头文件#define uchar unsigned char //无符号字符型 宏定义 变量范围0~255#define uint unsigned int //无符号整型 宏定义 变量范围0~65535#include "eeprom52.h"#include "nongli.h"bit flag_2..._基于单片机的自动打铃控制系统设计提纲