Skip to content

肖文锋 / pdfPreview

Go to a project
Commit e218e485 by xiaowenfeng
Options

增加了工具栏按钮

parent 2fa56d6c
Inline Side-by-side
Showing with 116 additions and 16 deletions
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<div id="toolbar"> <div id="toolbar">
<button @click="zoomin">+</button> <span>
<button class="toolbarButton zoomin" @click="zoomin"></button>
<button class="toolbarButton zoomout" @click="zoomout"></button>
</span>
<span>
<span class="pageNumber currentIndex">1</span>
<span class="pageNumber">/ 99</span>
</span>
<span>
<button class="toolbarButton pageUp"></button>
<button class="toolbarButton pageDown"></button>
</span>
</div> </div>
<div id="page"> <div id="page">
<div id="viewerContainer"> <div id="viewerContainer">
...@@ -42,11 +53,11 @@ export default { ...@@ -42,11 +53,11 @@ export default {
const devicePixelRatio = window.devicePixelRatio; const devicePixelRatio = window.devicePixelRatio;
const scale = this.pageSize * this.scale * devicePixelRatio; const scale = this.pageSize * this.scale * devicePixelRatio;
const viewport = page.getViewport({ scale: scale }); const viewport = page.getViewport({ scale: scale });
let { canvas, textLayerDiv, bodyHeight } = this.initPage( let { bufferCanvas, textLayerDiv, bodyHeight } = this.initPage(
page, page,
viewport viewport
); );
this.renderCanvas(canvas, viewport, page); this.renderCanvas(bufferCanvas, viewport, page);
page.getTextContent().then(res => { page.getTextContent().then(res => {
this.renderHtml( this.renderHtml(
textLayerDiv, textLayerDiv,
...@@ -65,6 +76,11 @@ export default { ...@@ -65,6 +76,11 @@ export default {
this.pageSize = this.pageSize + 0.05; this.pageSize = this.pageSize + 0.05;
this.preview(); this.preview();
}, },
zoomout() {
$("#textLayerDiv").html("");
this.pageSize = this.pageSize - 0.05;
this.preview();
},
initPage(page, viewport) { initPage(page, viewport) {
$("#page").css("height", $("body").height() - $("#toolbar").height()); $("#page").css("height", $("body").height() - $("#toolbar").height());
let pers = viewport.width / viewport.height; let pers = viewport.width / viewport.height;
...@@ -74,28 +90,44 @@ export default { ...@@ -74,28 +90,44 @@ export default {
let bodyHeight = $("#page").height() - this.borderSize * 2; let bodyHeight = $("#page").height() - this.borderSize * 2;
let pdfHeight = this.pageSize * bodyHeight; let pdfHeight = this.pageSize * bodyHeight;
let pdfWidth = this.pageSize * pers * bodyHeight; let pdfWidth = this.pageSize * pers * bodyHeight;
let canvas = document.createElement("canvas"); let bufferCanvas = document.createElement("canvas");
canvas.height = viewport.height; bufferCanvas.height = viewport.height;
canvas.width = viewport.width; bufferCanvas.width = viewport.width;
viewerContainer.css("border", this.borderSize + "px solid transparent"); viewerContainer.css("border", this.borderSize + "px solid transparent");
viewerContainer.css("height", pdfHeight); viewerContainer.css("height", pdfHeight);
viewerContainer.css("width", pdfWidth); viewerContainer.css("width", pdfWidth);
canvasWrapper.css("height", pdfHeight); canvasWrapper.css("height", pdfHeight);
canvasWrapper.css("width", pdfWidth); canvasWrapper.css("width", pdfWidth);
$(canvas).css("height", pdfHeight); $(bufferCanvas).css("height", pdfHeight);
$(canvas).css("width", pdfWidth); $(bufferCanvas).css("width", pdfWidth);
textLayerDiv.css("height", pdfHeight); textLayerDiv.css("height", pdfHeight);
textLayerDiv.css("width", pdfWidth); textLayerDiv.css("width", pdfWidth);
return { canvas, textLayerDiv: textLayerDiv[0], bodyHeight }; return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight };
}, },
renderCanvas(canvas, viewport, page) { renderCanvas(bufferCanvas, viewport, page) {
let context = canvas.getContext("2d"); let bufferContext = bufferCanvas.getContext("2d");
let renderContext = { let renderContext = {
canvasContext: context, canvasContext: bufferContext,
viewport: viewport viewport: viewport
}; };
page.render(renderContext); page.render(renderContext).then(() => {
$(".canvasWrapper").html(canvas); let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
context.height = bufferCanvas.height;
context.width = bufferCanvas.width;
context.drawImage(
bufferCanvas,
0,
0,
canvas.widgth,
canvas.height,
0,
0,
canvas.width,
canvas.height
);
$(".canvasWrapper").html(bufferCanvas);
});
}, },
renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, res) { renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, res) {
const textLayer = new TextLayerBuilder({ const textLayer = new TextLayerBuilder({
...@@ -114,6 +146,7 @@ export default { ...@@ -114,6 +146,7 @@ export default {
<style lang="scss"> <style lang="scss">
@import "../node_modules/pdfjs-dist/web/pdf_viewer.css"; @import "../node_modules/pdfjs-dist/web/pdf_viewer.css";
$toolbarHeigth: 32px;
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
...@@ -123,13 +156,20 @@ body { ...@@ -123,13 +156,20 @@ body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
button {
border: 0 none;
background: none;
outline: none;
width: 32px;
height: 25px;
}
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#page { #page {
width: 100%; width: 100%;
top: 32px; top: $toolbarHeigth;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
...@@ -139,13 +179,73 @@ body { ...@@ -139,13 +179,73 @@ body {
} }
#toolbar { #toolbar {
width: 100vw; width: 100vw;
height: 32px; height: $toolbarHeigth;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
text-align: center;
color: rgba(0, 0, 0, 0.8);
background-color: rgba(71, 71, 71, 1); background-color: rgba(71, 71, 71, 1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15), box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.1); 0 1px 1px rgba(0, 0, 0, 0.1);
span {
margin: 0 5px;
}
}
.toolbarButton {
line-height: $toolbarHeigth;
position: relative;
top: 50%;
transform: translateY(-50%);
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 1px;
text-align: center;
cursor: pointer;
&:hover {
border: 1px solid rgba(0, 0, 0, 0.3);
background: rgba(60, 60, 60, 0.8);
}
}
.pageNumber {
display: inline-block;
width: 40px;
color: #fff;
font-size: 12px;
text-align: center;
vertical-align: middle;
top: -3px;
position: relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.currentIndex {
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.09);
padding-right: 10px;
text-align: right;
margin: 0;
}
.toolbarButton::before {
position: absolute;
left: 0;
transform: scale(0.5);
display: inline-block;
}
.toolbarButton::before {
top: -7px;
}
.zoomin::before {
content: url("./assets/toolbarButton-zoomIn@2x.png");
}
.zoomout::before {
content: url("./assets/toolbarButton-zoomOut@2x.png");
}
.pageUp::before {
content: url("./assets/toolbarButton-pageUp@2x.png");
}
.pageDown::before {
content: url("./assets/toolbarButton-pageDown@2x.png");
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment