118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from "vue";
|
||
import { useI18n } from "vue-i18n";
|
||
import VuePdfEmbed from "vue-pdf-embed";
|
||
|
||
defineOptions({
|
||
name: "Pdf"
|
||
});
|
||
|
||
const { t } = useI18n();
|
||
const pdfRef = ref<any>();
|
||
const pageCount = ref(1);
|
||
const loading = ref(true);
|
||
const currentPage = ref(1);
|
||
const currentRotation = ref(0);
|
||
const showAllPages = ref(false);
|
||
const rotations = [0, 90, 180, 270];
|
||
|
||
const source =
|
||
"https://xiaoxian521.github.io/hyperlink/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";
|
||
|
||
const handleDocumentRender = () => {
|
||
loading.value = false;
|
||
pageCount.value = pdfRef.value.doc.numPages;
|
||
};
|
||
|
||
const showAllPagesChange = () => {
|
||
currentPage.value = showAllPages.value ? null : 1;
|
||
};
|
||
|
||
const onPrint = () => {
|
||
// 如果在打印时，打印页面是本身的两倍，在打印配置 页面 设置 仅限页码为奇数的页面 即可
|
||
pdfRef.value.print();
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="font-medium">
|
||
<el-link
|
||
href="https://github.com/hrynko/vue-pdf-embed"
|
||
target="_blank"
|
||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||
>
|
||
PDF预览
|
||
</el-link>
|
||
</div>
|
||
<el-link
|
||
class="mt-2"
|
||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pdf.vue"
|
||
target="_blank"
|
||
>
|
||
代码位置 src/views/able/pdf.vue
|
||
</el-link>
|
||
</template>
|
||
<div
|
||
v-loading="loading"
|
||
class="h-[calc(100vh-295px)]"
|
||
:element-loading-text="t('status.pureLoad')"
|
||
>
|
||
<div class="flex justify-between items-center h-9">
|
||
<div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
|
||
共{{ pageCount }}页
|
||
</div>
|
||
<div v-else>
|
||
<el-pagination
|
||
v-model:current-page="currentPage"
|
||
background
|
||
layout="prev, slot, next"
|
||
:page-size="1"
|
||
:total="pageCount"
|
||
>
|
||
{{ currentPage }} / {{ pageCount }}
|
||
</el-pagination>
|
||
</div>
|
||
<div class="w-[170px] flex-bc">
|
||
<el-checkbox v-model="showAllPages" @change="showAllPagesChange">
|
||
显示所有页面
|
||
</el-checkbox>
|
||
<IconifyIconOnline
|
||
v-tippy="{
|
||
maxWidth: 'none',
|
||
content: `翻转（当前角度${rotations[currentRotation]}度）`
|
||
}"
|
||
icon="ic:baseline-rotate-90-degrees-ccw"
|
||
class="cursor-pointer outline-transparent"
|
||
@click="
|
||
currentRotation === 3
|
||
? (currentRotation = 0)
|
||
: (currentRotation += 1)
|
||
"
|
||
/>
|
||
<IconifyIconOnline
|
||
v-tippy="{
|
||
maxWidth: 'none',
|
||
content: '打印'
|
||
}"
|
||
icon="ri:printer-line"
|
||
class="cursor-pointer outline-transparent"
|
||
@click="onPrint"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<el-scrollbar>
|
||
<vue-pdf-embed
|
||
ref="pdfRef"
|
||
class="h-full container overflow-auto"
|
||
:rotation="rotations[currentRotation]"
|
||
:page="currentPage"
|
||
:source="source"
|
||
@rendered="handleDocumentRender"
|
||
/>
|
||
</el-scrollbar>
|
||
</div>
|
||
</el-card>
|
||
</template>
|