1.直接pdf打開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=4.0,user-scalable=yes" />
<title>查看雲合同</title>
<style type="text/css">
canvas {
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
<script src="/static/v1.1/js/pdf/pdf.js"></script>
<script type="text/javascript">
//創建 canavs
function createPage() {
var div = document.createElement("canvas");
document.body.appendChild(div);
return div;
}
function renderPage(num,pdf) {
pdf.getPage(num).then(function(page) {
var viewport = page.getViewport(5.0);
var canvas = createPage();
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
var pdfDoc = null;
//獲取 PDF URL
// var url = location.search.substring(1);
var url = "{$contract_url}";
//var pdfData = atob(url);
// var url = window.location.origin+'/static/v1.1/js/pdf/1911141539053686.pdf';
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = window.location.origin+'/static/v1.1/js/pdf/pdf.worker.js';
// Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url);
//var loadingTask = pdfjsLib.getDocument({data:pdfData});
loadingTask.promise.then(function(pdf) {
// console.log('PDF loaded');
pdfDoc = pdf;
for (var i = 1; i <= pdfDoc.numPages; i++) {
renderPage(i,pdf)
}
// Fetch the first page
// var pageNumber = 1;
// pdf.getPage(pageNumber).then(function(page) {
// console.log('Page loaded');
//
// var scale = 1.5;
// var viewport = page.getViewport(2.0);
//
// // Prepare canvas using PDF page dimensions
// var canvas = createPage();
// var context = canvas.getContext('2d');
// canvas.height = viewport.height;
// canvas.width = viewport.width;
//
// // Render PDF page into canvas context
// var renderContext = {
// canvasContext: context,
// viewport: viewport
// };
// var renderTask = page.render(renderContext);
}, function(reason) {
// PDF loading error
// console.error(reason);
});
</script>
</body>
</html>
2.把pdf轉化爲base64打開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=4.0,user-scalable=yes" />
<title>查看雲合同</title>
<style type="text/css">
canvas {
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
<script src="/static/v1.1/js/pdf/pdf.js"></script>
<script type="text/javascript">
//創建 canavs
function createPage() {
var div = document.createElement("canvas");
document.body.appendChild(div);
return div;
}
function renderPage(num,pdf) {
pdf.getPage(num).then(function(page) {
var viewport = page.getViewport(5.0);
var canvas = createPage();
var ctx = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
var pdfDoc = null;
//獲取 PDF URL
// var url = location.search.substring(1);
var url = "{$contract_url}";
var pdfData = atob(url);
// var url = window.location.origin+'/static/v1.1/js/pdf/1911141539053686.pdf';
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = window.location.origin+'/static/v1.1/js/pdf/pdf.worker.js';
// Asynchronous download of PDF
// var loadingTask = pdfjsLib.getDocument(url);
var loadingTask = pdfjsLib.getDocument({data:pdfData});
loadingTask.promise.then(function(pdf) {
// console.log('PDF loaded');
pdfDoc = pdf;
for (var i = 1; i <= pdfDoc.numPages; i++) {
renderPage(i,pdf)
}
// Fetch the first page
// var pageNumber = 1;
// pdf.getPage(pageNumber).then(function(page) {
// console.log('Page loaded');
//
// var scale = 1.5;
// var viewport = page.getViewport(2.0);
//
// // Prepare canvas using PDF page dimensions
// var canvas = createPage();
// var context = canvas.getContext('2d');
// canvas.height = viewport.height;
// canvas.width = viewport.width;
//
// // Render PDF page into canvas context
// var renderContext = {
// canvasContext: context,
// viewport: viewport
// };
// var renderTask = page.render(renderContext);
}, function(reason) {
// PDF loading error
// console.error(reason);
});
</script>
</body>
</html>
查看官網
http://mozilla.github.io/pdf.js/examples/
