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 @@ ...@@ -49,12 +49,25 @@
disabled="disabled" disabled="disabled"
/> />
<span id="numPages" class="toolbarLabel">/ {{ pageLength }}</span> <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>
<div id="toolbarViewerMiddle"> <div id="toolbarViewerMiddle">
<div class="splitToolbarButton"> <div class="splitToolbarButton">
<button <button
id="zoomOut" id="zoomOut"
class="toolbarButton zoomOut" :class="[
'toolbarButton',
'zoomOut',
this.pageSize <= 0.5 ? 'taoolbarCantUse' : ''
]"
title="Zoom Out" title="Zoom Out"
tabindex="21" tabindex="21"
data-l10n-id="zoom_out" data-l10n-id="zoom_out"
...@@ -65,7 +78,11 @@ ...@@ -65,7 +78,11 @@
<div class="splitToolbarButtonSeparator"></div> <div class="splitToolbarButtonSeparator"></div>
<button <button
id="zoomIn" id="zoomIn"
class="toolbarButton zoomIn" :class="[
'toolbarButton',
'zoomIn',
this.pageSize >= 4 ? 'taoolbarCantUse' : ''
]"
title="Zoom In" title="Zoom In"
tabindex="22" tabindex="22"
data-l10n-id="zoom_in" data-l10n-id="zoom_in"
...@@ -88,69 +105,9 @@ ...@@ -88,69 +105,9 @@
:key="index" :key="index"
:value="index" :value="index"
:disabled="Object.keys(item)[0] === 'custom' ? true : false" :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 >{{ 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> </select>
</span> </span>
</div> </div>
...@@ -158,7 +115,11 @@ ...@@ -158,7 +115,11 @@
</div> </div>
</div> </div>
<div id="page"> <div id="page">
<div id="viewerContainer"> <div
id="viewerContainerBox"
@mousedown="drag($event)"
:style="{ cursor: draggradActive ? 'grab' : 'auto' }"
>
<div class="canvasWrapper"></div> <div class="canvasWrapper"></div>
<div id="textLayerDiv" class="textLayer"></div> <div id="textLayerDiv" class="textLayer"></div>
</div> </div>
...@@ -191,7 +152,8 @@ export default { ...@@ -191,7 +152,8 @@ export default {
{ "3": { page_scale_percent: "300%", value: 3 } }, { "3": { page_scale_percent: "300%", value: 3 } },
{ "4": { page_scale_percent: "400%", value: 4 } }, { "4": { page_scale_percent: "400%", value: 4 } },
{ custom: { page_scale_percent: "", value: 1 } } { custom: { page_scale_percent: "", value: 1 } }
] ],
draggradActive: false
}; };
}, },
mounted() { mounted() {
...@@ -231,7 +193,7 @@ export default { ...@@ -231,7 +193,7 @@ export default {
$("#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;
let canvasWrapper = $(".canvasWrapper"); let canvasWrapper = $(".canvasWrapper");
let viewerContainer = $("#viewerContainer"); let viewerContainer = $("#viewerContainerBox");
let textLayerDiv = $("#textLayerDiv"); let textLayerDiv = $("#textLayerDiv");
let bodyHeight = $("#page").height() - this.borderSize * 2; let bodyHeight = $("#page").height() - this.borderSize * 2;
let pdfHeight = this.pageSize * bodyHeight; let pdfHeight = this.pageSize * bodyHeight;
...@@ -239,15 +201,24 @@ export default { ...@@ -239,15 +201,24 @@ export default {
let bufferCanvas = document.createElement("canvas"); let bufferCanvas = document.createElement("canvas");
bufferCanvas.height = viewport.height; bufferCanvas.height = viewport.height;
bufferCanvas.width = viewport.width; bufferCanvas.width = viewport.width;
viewerContainer.css("border", this.borderSize + "px solid transparent"); viewerContainer.attr("style", "");
viewerContainer.css("height", pdfHeight); viewerContainer.css({
viewerContainer.css("width", pdfWidth); border: this.borderSize + "px solid transparent",
canvasWrapper.css("height", pdfHeight); height: pdfHeight,
canvasWrapper.css("width", pdfWidth); width: pdfWidth
$(bufferCanvas).css("height", pdfHeight); });
$(bufferCanvas).css("width", pdfWidth); canvasWrapper.css({
textLayerDiv.css("height", pdfHeight); height: pdfHeight,
textLayerDiv.css("width", pdfWidth); width: pdfWidth
});
$(bufferCanvas).css({
height: pdfHeight,
width: pdfWidth
});
textLayerDiv.css({
height: pdfHeight,
width: pdfWidth
});
return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight }; return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight };
}, },
async renderCanvas(bufferCanvas, viewport, page) { async renderCanvas(bufferCanvas, viewport, page) {
...@@ -287,23 +258,33 @@ export default { ...@@ -287,23 +258,33 @@ export default {
textLayer.render(); textLayer.render();
}, },
zoomIn(pageSize) { zoomIn(pageSize) {
console.log("pageSize:", pageSize); let result = Number((this.pageSize + 0.05).toFixed(10));
let currentSize = pageSize ? pageSize : this.pageSize + 0.05 let currentSize = pageSize ? pageSize : result;
if (currentSize > 4) { if (currentSize > 4) {
return; return;
} }
this.pageSize = pageSize ? pageSize : this.pageSize + 0.05; this.pageSize = pageSize ? pageSize : result;
this.customPercent();
this.preview(); this.preview();
}, },
zoomOut(pageSize) { zoomOut(pageSize) {
console.log("pageSize:", pageSize); let result = Number((this.pageSize - 0.05).toFixed(10));
let currentSize = pageSize ? pageSize : this.pageSize - 0.05 let currentSize = pageSize ? pageSize : result;
if (currentSize < 0.5) { if (currentSize < 0.5) {
return; return;
} }
this.pageSize = pageSize ? pageSize : this.pageSize - 0.05; this.pageSize = pageSize ? pageSize : result;
this.customPercent();
this.preview(); 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() { previous() {
if (this.pageIndex === 1) { if (this.pageIndex === 1) {
return; return;
...@@ -321,12 +302,48 @@ export default { ...@@ -321,12 +302,48 @@ export default {
changeSelected(index) { changeSelected(index) {
let item = this.zoomList[index]; let item = this.zoomList[index];
let value = item[Object.keys(item)[0]].value; let value = item[Object.keys(item)[0]].value;
console.log(item)
if (value > this.pageSize) { if (value > this.pageSize) {
this.zoomOut(value); this.zoomOut(value);
} else if (value < this.pageSize) { } else if (value < this.pageSize) {
this.zoomIn(value); 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 { ...@@ -341,14 +358,19 @@ export default {
} }
#page { #page {
width: 100%; width: 100%;
position: relative;
overflow: auto; overflow: auto;
} }
#viewerContainer { #viewerContainerBox {
margin: auto; margin: auto;
position: relative; position: relative;
} }
.taoolbarCantUse { .taoolbarCantUse {
opacity: 0.5; opacity: 0.5;
} }
.draggradActive {
background-color: rgba(255, 255, 255, 0.4) !important;
}
::-webkit-scrollbar {
display: none;
}
</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