Skip to content

肖文锋 / pdfPreview

Go to a project
Commit 9a6e0d65 by xiaowenfeng
Options

增加了拖拽、抓手，以及非默认缩放比例的显示

parent ee01a2b8
Inline Side-by-side
Showing with 106 additions and 84 deletions
src/App.vue
......@@ -49,12 +49,25 @@
disabled="disabled"
/>
<span id="numPages" class="toolbarLabel">/ {{ pageLength }}</span>
<button
id="draggrad"
:class="['toolbarButton', draggradActive ? 'draggradActive' : '']"
tabindex="12"
data-l10n-id="findbar"
@click="draggradHandle"
>
<span data-l10n-id="findbar_label">抓手</span>
</button>
</div>
<div id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button
id="zoomOut"
class="toolbarButton zoomOut"
:class="[
'toolbarButton',
'zoomOut',
this.pageSize <= 0.5 ? 'taoolbarCantUse' : ''
]"
title="Zoom Out"
tabindex="21"
data-l10n-id="zoom_out"
......@@ -65,7 +78,11 @@
<div class="splitToolbarButtonSeparator"></div>
<button
id="zoomIn"
class="toolbarButton zoomIn"
:class="[
'toolbarButton',
'zoomIn',
this.pageSize >= 4 ? 'taoolbarCantUse' : ''
]"
title="Zoom In"
tabindex="22"
data-l10n-id="zoom_in"
......@@ -88,69 +105,9 @@
:key="index"
:value="index"
:disabled="Object.keys(item)[0] === 'custom' ? true : false"
:hidden="Object.keys(item)[0] === 'custom' ? true : false"
v-show="Object.keys(item)[0] === 'custom' ? false : true"
>{{ item[Object.keys(item)[0]].page_scale_percent }}</option
>
<!-- <option
id="pageFitOption"
value="page-fit"
data-l10n-id="page_scale_fit"
>适合页面</option
>
<option
id="customScaleOption"
value="custom"
disabled="disabled"
hidden="true"
></option>
<option
value="0.5"
data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 50 }'
>50%</option
>
<option
value="0.75"
data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 75 }'
>75%</option
>
<option
value="1"
data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 100 }'
>100%</option
>
<option
value="1.25"
data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 125 }'
>125%</option
>
<option
value="1.5"
data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 150 }'
>150%</option
>
<option
value="2"
data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 200 }'
>200%</option
>
<option
value="3"
data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 300 }'
>300%</option
>
<option
value="4"
data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 400 }'
>400%</option
> -->
</select>
</span>
</div>
......@@ -158,7 +115,11 @@
</div>
</div>
<div id="page">
<div id="viewerContainer">
<div
id="viewerContainerBox"
@mousedown="drag($event)"
:style="{ cursor: draggradActive ? 'grab' : 'auto' }"
>
<div class="canvasWrapper"></div>
<div id="textLayerDiv" class="textLayer"></div>
</div>
......@@ -191,7 +152,8 @@ export default {
{ "3": { page_scale_percent: "300%", value: 3 } },
{ "4": { page_scale_percent: "400%", value: 4 } },
{ custom: { page_scale_percent: "", value: 1 } }
]
],
draggradActive: false
};
},
mounted() {
......@@ -231,7 +193,7 @@ export default {
$("#page").css("height", $("body").height() - $(".toolbar").height());
let pers = viewport.width / viewport.height;
let canvasWrapper = $(".canvasWrapper");
let viewerContainer = $("#viewerContainer");
let viewerContainer = $("#viewerContainerBox");
let textLayerDiv = $("#textLayerDiv");
let bodyHeight = $("#page").height() - this.borderSize * 2;
let pdfHeight = this.pageSize * bodyHeight;
......@@ -239,15 +201,24 @@ export default {
let bufferCanvas = document.createElement("canvas");
bufferCanvas.height = viewport.height;
bufferCanvas.width = viewport.width;
viewerContainer.css("border", this.borderSize + "px solid transparent");
viewerContainer.css("height", pdfHeight);
viewerContainer.css("width", pdfWidth);
canvasWrapper.css("height", pdfHeight);
canvasWrapper.css("width", pdfWidth);
$(bufferCanvas).css("height", pdfHeight);
$(bufferCanvas).css("width", pdfWidth);
textLayerDiv.css("height", pdfHeight);
textLayerDiv.css("width", pdfWidth);
viewerContainer.attr("style", "");
viewerContainer.css({
border: this.borderSize + "px solid transparent",
height: pdfHeight,
width: pdfWidth
});
canvasWrapper.css({
height: pdfHeight,
width: pdfWidth
});
$(bufferCanvas).css({
height: pdfHeight,
width: pdfWidth
});
textLayerDiv.css({
height: pdfHeight,
width: pdfWidth
});
return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight };
},
async renderCanvas(bufferCanvas, viewport, page) {
......@@ -287,23 +258,33 @@ export default {
textLayer.render();
},
zoomIn(pageSize) {
console.log("pageSize:", pageSize);
let currentSize = pageSize ? pageSize : this.pageSize + 0.05
let result = Number((this.pageSize + 0.05).toFixed(10));
let currentSize = pageSize ? pageSize : result;
if (currentSize > 4) {
return;
}
this.pageSize = pageSize ? pageSize : this.pageSize + 0.05;
this.pageSize = pageSize ? pageSize : result;
this.customPercent();
this.preview();
},
zoomOut(pageSize) {
console.log("pageSize:", pageSize);
let currentSize = pageSize ? pageSize : this.pageSize - 0.05
let result = Number((this.pageSize - 0.05).toFixed(10));
let currentSize = pageSize ? pageSize : result;
if (currentSize < 0.5) {
return;
}
this.pageSize = pageSize ? pageSize : this.pageSize - 0.05;
this.pageSize = pageSize ? pageSize : result;
this.customPercent();
this.preview();
},
customPercent() {
let index = this.zoomList.length - 1;
this.selected = index;
let item = this.zoomList[index];
let key = Object.keys(item)[0];
this.zoomList[index][key].page_scale_percent =
parseInt(this.pageSize * 100) + "%";
},
previous() {
if (this.pageIndex === 1) {
return;
......@@ -321,12 +302,48 @@ export default {
changeSelected(index) {
let item = this.zoomList[index];
let value = item[Object.keys(item)[0]].value;
console.log(item)
if (value > this.pageSize) {
this.zoomOut(value);
} else if (value < this.pageSize) {
this.zoomIn(value);
}
},
draggradHandle() {
this.draggradActive = !this.draggradActive;
},
drag(event) {
if (!this.draggradActive) {
return;
}
let target = event.currentTarget;
let x = $(target).offset().left;
let y = $(target).offset().top;
let e = event || window.event;
let left = e.pageX - x;
let top = e.pageY - y;
$(target).css({
position: "absolute",
left: x,
top: y,
cursor: "grab"
});
document.onmousemove = function(e) {
let x = e.pageX - left;
let y = e.pageY - top;
$(target).css({
left: x,
top: y
});
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue == false;
}
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
};
......@@ -341,14 +358,19 @@ export default {
}
#page {
width: 100%;
position: relative;
overflow: auto;
}
#viewerContainer {
#viewerContainerBox {
margin: auto;
position: relative;
}
.taoolbarCantUse {
opacity: 0.5;
}
.draggradActive {
background-color: rgba(255, 255, 255, 0.4) !important;
}
::-webkit-scrollbar {
display: none;
}
</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