<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
</head>
<body>
<canvas id="pdfCanvas"></canvas>
<script>
pdfjsLib.getDocument('1.pdf').promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
var canvas = document.getElementById('pdfCanvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
</script>
</body>
</html>
上面这种方法适配度高,兼容性强。
如果不想用这种方法, 采用<embed>
或 <iframe>
标签可以实现一样的效果。