Skip to content

肖文锋 / pdfPreview

Go to a project
Commit ee01a2b8 by xiaowenfeng
Options

增加了缩放的边界

parent a907a715
Inline Side-by-side
Showing with 43 additions and 46 deletions
src/App.vue
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
title="Zoom Out" title="Zoom Out"
tabindex="21" tabindex="21"
data-l10n-id="zoom_out" data-l10n-id="zoom_out"
@click="zoomOut" @click="zoomOut(null)"
> >
<span data-l10n-id="zoom_out_label">放大</span> <span data-l10n-id="zoom_out_label">放大</span>
</button> </button>
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
title="Zoom In" title="Zoom In"
tabindex="22" tabindex="22"
data-l10n-id="zoom_in" data-l10n-id="zoom_in"
@click="zoomIn" @click="zoomIn(null)"
> >
<span data-l10n-id="zoom_in_label">缩小</span> <span data-l10n-id="zoom_in_label">缩小</span>
</button> </button>
...@@ -84,97 +84,73 @@ ...@@ -84,97 +84,73 @@
@change="changeSelected(selected)" @change="changeSelected(selected)"
> >
<option <option
id="pageAutoOption" v-for="(item, index) in zoomList"
title="" :key="index"
value="auto" :value="index"
selected="selected" :disabled="Object.keys(item)[0] === 'custom' ? true : false"
data-l10n-id="page_scale_auto" :hidden="Object.keys(item)[0] === 'custom' ? true : false"
>自动缩放</option >{{ item[Object.keys(item)[0]].page_scale_percent }}</option
> >
<option <!-- <option
id="pageActualOption"
title=""
value="page-actual"
data-l10n-id="page_scale_actual"
>实际大小</option
>
<option
id="pageFitOption" id="pageFitOption"
title=""
value="page-fit" value="page-fit"
data-l10n-id="page_scale_fit" data-l10n-id="page_scale_fit"
>适合页面</option >适合页面</option
> >
<option <option
id="pageWidthOption"
title=""
value="page-width"
data-l10n-id="page_scale_width"
>适合页宽</option
>
<option
id="customScaleOption" id="customScaleOption"
title=""
value="custom" value="custom"
disabled="disabled" disabled="disabled"
hidden="true" hidden="true"
></option> ></option>
<option <option
title=""
value="0.5" value="0.5"
data-l10n-id="page_scale_percent" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 50 }' data-l10n-args='{ "scale": 50 }'
>50%</option >50%</option
> >
<option <option
title=""
value="0.75" value="0.75"
data-l10n-id="page_scale_percent" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 75 }' data-l10n-args='{ "scale": 75 }'
>75%</option >75%</option
> >
<option <option
title=""
value="1" value="1"
data-l10n-id="page_scale_percent" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 100 }' data-l10n-args='{ "scale": 100 }'
>100%</option >100%</option
> >
<option <option
title=""
value="1.25" value="1.25"
data-l10n-id="page_scale_percent" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 125 }' data-l10n-args='{ "scale": 125 }'
>125%</option >125%</option
> >
<option <option
title=""
value="1.5" value="1.5"
data-l10n-id="page_scale_percent" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 150 }' data-l10n-args='{ "scale": 150 }'
>150%</option >150%</option
> >
<option <option
title=""
value="2" value="2"
data-l10n-id="page_scale_percent" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 200 }' data-l10n-args='{ "scale": 200 }'
>200%</option >200%</option
> >
<option <option
title=""
value="3" value="3"
data-l10n-id="page_scale_percent" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 300 }' data-l10n-args='{ "scale": 300 }'
>300%</option >300%</option
> >
<option <option
title=""
value="4" value="4"
data-l10n-id="page_scale_percent" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 400 }' data-l10n-args='{ "scale": 400 }'
>400%</option >400%</option
> > -->
</select> </select>
</span> </span>
</div> </div>
...@@ -202,8 +178,20 @@ export default { ...@@ -202,8 +178,20 @@ export default {
scale: 2, // 缩放比例 scale: 2, // 缩放比例
borderSize: 9, // viewerContainer容器border大小 borderSize: 9, // viewerContainer容器border大小
pageSize: 1, pageSize: 1,
selected: "0.5", selected: 2,
pdf: null pdf: null,
zoomList: [
{ "0.5": { page_scale_percent: "50%", value: 0.5 } },
{ "0.75": { page_scale_percent: "75%", value: 0.75 } },
{ "1": { page_scale_percent: "100%", value: 1 } },
{ "1.25": { page_scale_percent: "125%", value: 1.25 } },
{ "1.5": { page_scale_percent: "150%", value: 1.5 } },
{ "1.75": { page_scale_percent: "175%", value: 1.75 } },
{ "2": { page_scale_percent: "200%", value: 2 } },
{ "3": { page_scale_percent: "300%", value: 3 } },
{ "4": { page_scale_percent: "400%", value: 4 } },
{ custom: { page_scale_percent: "", value: 1 } }
]
}; };
}, },
mounted() { mounted() {
...@@ -230,9 +218,6 @@ export default { ...@@ -230,9 +218,6 @@ export default {
); );
this.renderCanvas(bufferCanvas, viewport, page); this.renderCanvas(bufferCanvas, viewport, page);
let textContent = await page.getTextContent(); let textContent = await page.getTextContent();
// page.getTextContent().then(res => {
// this.renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, res);
// });
this.renderHtml( this.renderHtml(
textLayerDiv, textLayerDiv,
page, page,
...@@ -265,13 +250,13 @@ export default { ...@@ -265,13 +250,13 @@ export default {
textLayerDiv.css("width", pdfWidth); textLayerDiv.css("width", pdfWidth);
return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight }; return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight };
}, },
renderCanvas(bufferCanvas, viewport, page) { async renderCanvas(bufferCanvas, viewport, page) {
let bufferContext = bufferCanvas.getContext("2d"); let bufferContext = bufferCanvas.getContext("2d");
let renderContext = { let renderContext = {
canvasContext: bufferContext, canvasContext: bufferContext,
viewport: viewport viewport: viewport
}; };
page.render(renderContext).then(() => { await page.render(renderContext);
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
let context = canvas.getContext("2d"); let context = canvas.getContext("2d");
context.height = bufferCanvas.height; context.height = bufferCanvas.height;
...@@ -288,9 +273,8 @@ export default { ...@@ -288,9 +273,8 @@ export default {
canvas.height canvas.height
); );
$(".canvasWrapper").html(bufferCanvas); $(".canvasWrapper").html(bufferCanvas);
});
}, },
renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, res) { renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, textContent) {
$("#textLayerDiv").html(""); $("#textLayerDiv").html("");
const textLayer = new TextLayerBuilder({ const textLayer = new TextLayerBuilder({
textLayerDiv: textLayerDiv, textLayerDiv: textLayerDiv,
...@@ -299,19 +283,29 @@ export default { ...@@ -299,19 +283,29 @@ export default {
scale: (scale * (this.pageSize * bodyHeight)) / viewport.height scale: (scale * (this.pageSize * bodyHeight)) / viewport.height
}) })
}); });
textLayer.setTextContent(res); textLayer.setTextContent(textContent);
textLayer.render(); textLayer.render();
}, },
zoomIn(pageSize) { zoomIn(pageSize) {
console.log("pageSize:", pageSize);
let currentSize = pageSize ? pageSize : this.pageSize + 0.05
if (currentSize > 4) {
return;
}
this.pageSize = pageSize ? pageSize : this.pageSize + 0.05; this.pageSize = pageSize ? pageSize : this.pageSize + 0.05;
this.preview(); this.preview();
}, },
zoomOut(pageSize) { zoomOut(pageSize) {
console.log("pageSize:", pageSize);
let currentSize = pageSize ? pageSize : this.pageSize - 0.05
if (currentSize < 0.5) {
return;
}
this.pageSize = pageSize ? pageSize : this.pageSize - 0.05; this.pageSize = pageSize ? pageSize : this.pageSize - 0.05;
this.preview(); this.preview();
}, },
previous() { previous() {
if (this.pageIndex === 1){ if (this.pageIndex === 1) {
return; return;
} }
this.pageIndex = this.pageIndex - 1; this.pageIndex = this.pageIndex - 1;
...@@ -324,7 +318,10 @@ export default { ...@@ -324,7 +318,10 @@ export default {
this.pageIndex = this.pageIndex + 1; this.pageIndex = this.pageIndex + 1;
this.preview(); this.preview();
}, },
changeSelected(value) { changeSelected(index) {
let item = this.zoomList[index];
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) {
......
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