PDFjs在线预览pdf，所有页全渲染的demo，使用时把这些文件的url换一下就好。
测试记得把live server打开才能看到。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>'Hello, world!' example</title>
<style>
canvas {
display: block;
margin: 0 auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<canvas v-for="i in pageTotal" :id="'the-canvas' + i" style="border: 1px solid black; direction: ltr;"></canvas>
</div>
<script src="./build/pdf.js"></script>
<script>
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
var vm = new Vue({
el: "#app",
data () {
return {
pageTotal: 0
}
},
methods: {
init() {
var url = './web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.GlobalWorkerOptions.workerSrc =
'./build/pdf.worker.js';
var loadingTask = pdfjsLib.getDocument(url);
let that = this
loadingTask.promise.then(function(pdf) {
that.pageTotal = pdf.numPages
console.log(that.pageTotal)
for (let i = 0;i < pdf.numPages; i ++) {
console.log(i)
pdf.getPage(i + 1).then(function(page) {
var scale = 1;
var viewport = page.getViewport({ scale: scale, });
var canvas = document.getElementById('the-canvas' + (i + 1));
if (canvas !== null && canvas.getContext('2d') !== null) {
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport,
};
page.render(renderContext);
}
});
}
})
}
},
mounted () {
this.init()
}
})
</script>
</body>
</html>