使⽤PDF.js渲染canvas实现预览pdf的效果⽰例⼀、PDF.js的下载
建议下载稳定版本，如下图所⽰：
下载完成后将压缩包解压放在项⽬下，按照正常引⼊⽅式引⼊即可。
⼆、使⽤PDF.js
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
_this.pdfDoc = pdf
_derPage(1)
})
},
renderPage (num) {
this.pageRendering = true
let _this = this
Page(num).then(function (page) {
var viewport = Viewport(_this.scale)
let canvas = ElementById('the-canvas')
canvas.height = viewport.height
canvas.width = viewport.width
// Render PDF page into canvas context
var renderContext = {
canvasContext: Context('2d'),
viewport: viewport
}
var renderTask = der(renderContext)
// Wait for rendering to finish
renderTask.promise.then(function () {
_this.pageRendering = false
if (_this.pageNumPending !== null) {
/
/ New page rendering is pending
_this.pageNumPending = null
}
})
})
},
queueRenderPage (num) {
if (this.pageRendering) {
this.pageNumPending = num
} else {
}
},
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';
var scale = 1;
var viewport = Viewport(scale);
var canvas = ElementById('the-canvas');
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
});
});
需要注意的是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';
var scale = 1;
var viewport = Viewport(scale);
var canvas = ElementById('the-canvas01');
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
});
var scale = 1;
var viewport = Viewport(scale);
var canvas = ElementById('the-canvas02');
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
});
var scale = 1;
var viewport = Viewport(scale);
var canvas = ElementById('the-canvas03');
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
});
});
可想⽽知，这种⽅法对于页⾯较少的pdfHIA⽐较合适，但是若是页数很多或者是不知道pdf的页数的情况，这种⽅法显然不适合了，由此推荐⽅法⼆。⽅法⼆：只需要定义好在需要渲染的位置，再根据pdf的页数去动态渲染canvas。
html
< div id="canvas"></ div>
js
//PDF转成图⽚
var url = her_filePath;
pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';
//创建
function createPdfContainer(id, className) {
var pdfContainer = ElementById('canvas');
var canvasNew = ateElement('canvas');
$("canvas").on("click",function() {
var url = her_filePath;
window.open(url);
})
canvasNew.id = id;
canvasNew.className = className;
pdfContainer.appendChild(canvasNew);
};
//渲染pdf
//建议给定pdf宽度
function renderPDF(pdf, i, id) {
var scale = 0.62;
var viewport = Viewport(scale);
//
// 准备⽤于渲染的 canvas 元素
//
var canvas = ElementById(id);
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = document.documentElement.clientWidth;
/
/
// 将 PDF 页⾯渲染到 canvas 上下⽂中
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
});
};
//创建和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) {
//⽤ 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 s
tructure”}
这个意思是说⽆效的PDF格式的结构，其实就是代码中渲染pdf时的结构出现错误导致的，我是因为直接对pdf的页数：pdf.numPages循环，再去
渲染在canvas导致出错。错误代码如下：
for(const i in pdf.numPages){
var scale = 1;
var viewport = Viewport(scale);
var id = i > 9 ? 'the-canvas' + i : 'the-canvas0' + i;
var canvas = ElementById(id);
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
});
}
此时将id打印才明⽩所有id都为 the-canvas15，出现这个错误主要还是js功底不够扎实导致......所以不能这样简单的循环渲染，正确的解决
⽅法请看上⾯的讲解
由此关于PDF.js的使⽤总结就到这了，有什么问题请留⾔撒~~
到此这篇关于使⽤PDF.js渲染canvas实现预览pdf的效果⽰例的⽂章就介绍到这了，更多相关PDF.js渲染canvas内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！
发表评论