今天我們來(lái)述說有關(guān)于:“怎么使用PDF.js渲染canvas預(yù)覽pdf?”這個(gè)問題的相關(guān)解決方法,這也是我們現(xiàn)在比較常見的一個(gè)問題,希望對(duì)大家有所幫助!
一、PDF.js的下載
從官網(wǎng)直接下載即可,地址:http://mozilla.github.io/pdf.js/getting_started/#download
建議下載穩(wěn)定版本,如下圖所示:
下載完成后將壓縮包解壓放在項(xiàng)目下,按照正常引入方式引入即可。
二、使用PDF.js
1.vue使用
第一步安裝:
npm install --save pdfjs-dist
第二步引入:
import PDFJS from 'pdfjs-dist'
第三步就是在頁(yè)面使用即可,下面演示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)使用
第一步正常下載后解壓放入項(xiàng)目中;
第二步在項(xiàng)目的頁(yè)面引入即可,項(xiàng)目結(jié)構(gòu)如下圖:
由于是公司項(xiàng)目,我將項(xiàng)目名遮住,大家自行取名即可,我在此處將PDF.js放入了js目錄下,大家也可以直接放在項(xiàng)目的根目錄下。
引入如下代碼:
<script type='text/javascript' src='js/PDF.js/build/pdf.js'></script>
第三步即可在js中使用。
① 引入單頁(yè)的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會(huì)報(bào)錯(cuò):PDFJS is notdefined。有博客說在其之前加上PDFJS.disableWorker = true;會(huì)避免出錯(cuò),但我嘗試了錯(cuò)誤依然存在。使用pdfjsLib.workerSrc不會(huì)出錯(cuò)?。?!
②引入多頁(yè)的pdf:
方法一:在html中設(shè)置好pdf頁(yè)數(shù)對(duì)應(yīng)的canvas,然后使用js一頁(yè)一頁(yè)的去渲染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);
});
});
可想而知,這種方法對(duì)于頁(yè)面較少的pdfHIA比較合適,但是若是頁(yè)數(shù)很多或者是不知道pdf的頁(yè)數(shù)的情況,這種方法顯然不適合了,由此推薦方法二。
方法二:只需要定義好在需要渲染的位置,再根據(jù)pdf的頁(yè)數(shù)去動(dòng)態(tài)渲染canvas。
html:
< div id="canvas"></ div>
js:
//PDF轉(zhuǎn)成圖片
var url = sessionStorage.other_filePath;
pdfjsLib.workerSrc = 'PDF.js/build/pdf.worker.js';
//創(chuàng)建
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);
//
// 準(zhǔn)備用于渲染的 canvas 元素
//
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = document.documentElement.clientWidth;
//
// 將 PDF 頁(yè)面渲染到 canvas 上下文中
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
};
//創(chuàng)建和pdf頁(yè)數(shù)等同的canvas數(shù)
function createSeriesCanvas(num, template) {
var id = '';
for (var j = 1; j <= num; j++) {
id = template + j;
createPdfContainer(id, 'pdfClass');
}
}
//讀取pdf文件,并加載到頁(yè)面中
function loadPDF(fileURL) {
pdfjsLib.getDocument(fileURL).then(function (pdf) {
//用 promise 獲取頁(yè)面
var id = '';
var idTemplate = 'cw-pdf-';
var pageNum = pdf.numPages;
//根據(jù)頁(yè)碼創(chuàng)建畫布
createSeriesCanvas(pageNum, idTemplate);
//將pdf渲染到畫布上去
for (var i = 1; i <= pageNum; i++) {
id = idTemplate + i;
renderPDF(pdf, i, id);
}
});
}
loadPDF(url)
三、報(bào)錯(cuò)
1.Uncaught TypeError: Cannot read property ‘getContext’ of null
這個(gè)錯(cuò)誤是因?yàn)樵趆tml中需要先寫好<canvas>標(biāo)簽,定義好id,不能使用div或其他標(biāo)簽。
在html中:
<canvas id="my-canvas"></canvas>
2.Uncaught (in promise) UnknownErrorException {name: “UnknownErrorException”, message: “Failed to fetch”, details: “UnknownErrorException: Failed to fetch”}
這個(gè)意思是未能捕獲未知錯(cuò)誤。我在此處出錯(cuò)的原因主要是后臺(tái)給的pdf路徑有問題導(dǎo)致的,換一個(gè)正確的即可~~
3.Uncaught (in promise) InvalidPDFException {name: “InvalidPDFException”, message: “Invalid PDF structure”}
這個(gè)意思是說無(wú)效的PDF格式的結(jié)構(gòu),其實(shí)就是代碼中渲染pdf時(shí)的結(jié)構(gòu)出現(xiàn)錯(cuò)誤導(dǎo)致的,我是因?yàn)橹苯訉?duì)pdf的頁(yè)數(shù):pdf.numPages循環(huán),再去
渲染在canvas導(dǎo)致出錯(cuò)。錯(cuò)誤代碼如下:
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);
});
}
此時(shí)將id打印才明白所有id都為 the-canvas15,出現(xiàn)這個(gè)錯(cuò)誤主要還是js功底不夠扎實(shí)導(dǎo)致......所以不能這樣簡(jiǎn)單的循環(huán)渲染,正確的解決
方法請(qǐng)看上面的講解?。?!
由此關(guān)于PDF.js的使用總結(jié)就到這了,有什么問題請(qǐng)留言撒~~
那么我們這篇有關(guān)于:“怎么使用PDF.js渲染canvas預(yù)覽pdf?”這個(gè)問題的解決方法和文章內(nèi)容分享就到這里了,更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool進(jìn)行學(xué)習(xí)和了解!