pdfを使用する.js PDFファイルを画像に転送
8545 ワード
pdf ， ， pdf.js
。
1.pdfを理解する.js
PDF.js HTML5 JavaScript , html pdf 。
2.コアファイルの導入
pdf.js ， pdf.js pdf.worker.js，， API ，
<script src="pdf.js" type="text/javascript">script>テストコード:
<html>
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
.lightbox{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 7;
opacity: 0.3;
display: block;
background-color: rgb(0, 0, 0);
}
.pop{
position: absolute;
left: 50%;
width: 894px;
margin-left: -447px;
z-index: 9;
}
style>
<script src="pdf.js" type="text/javascript">script>
<script type="text/javascript">
function showPdf() {
var container = document.getElementById("container");
container.style.display = "block";
var url = 'p1.pdf';
PDFJS.workerSrc = 'pdf.worker.js';
PDFJS.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);
});
});
}
script>
head>
<body>
<h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()"> pdf a>h1>
<div id="container" style="display: none;">
<div class="lightbox">div>
<div id="pop" class="pop">
<canvas id="the-canvas">canvas>
div>
div>
body>
html>ダウンロード先:http://mozilla.github.io/pdf.js/