yaclty/vue-office
1
0
Fork 0
mirror of https://github.com/501351981/vue-office.git synced 2025-07-25 07:41:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

change: 修复pdf移动端样式

Browse Source
This commit is contained in:
liyulin 2023-02-12 18:12:01 +08:00
parent 641ca2d720
commit 1680c7e0ad
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/pdf/src/main.vue
View File

@ -61,10 +61,16 @@ export default defineComponent({
function renderPage(num) { function renderPage(num) {
pdfDocument.getPage(num).then((pdfPage) => { pdfDocument.getPage(num).then((pdfPage) => {
const viewport = pdfPage.getViewport({scale: window.devicePixelRatio}); const viewport = pdfPage.getViewport({scale: window.devicePixelRatio});
const canvas = rootRef.value[num-1]; const canvas = rootRef.value[num-1];
canvas.width = viewport.width; canvas.width = viewport.width;
canvas.height = viewport.height; canvas.height = viewport.height;
if(viewport.width > document.documentElement.clientWidth){
canvas.style.width = '100%'
}else{
canvas.style.width = Math.floor(viewport.width) + 'px';
}
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const renderTask = pdfPage.render({ const renderTask = pdfPage.render({
canvasContext: ctx, canvasContext: ctx,
@ -108,7 +114,12 @@ export default defineComponent({
v-if="numPages" v-if="numPages"
class="vue-office-pdf-wrapper" class="vue-office-pdf-wrapper"
style="background: gray; padding: 30px 0;position: relative;"> style="background: gray; padding: 30px 0;position: relative;">
<canvas v-for="page in numPages" ref="rootRef" :key="page"/> <canvas
v-for="page in numPages"
ref="rootRef"
:key="page"
style="width:100%"
/>
</div> </div>
</div> </div>
</template> </template>