feat: 重新组织代码结构
This commit is contained in:
539943419 committed
commit
4d2bd3867f
23 files changed
+240
-187
No files matched your search
@@ -0,0 +1,21 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import DocumentText from '@vicons/ionicons5/es/DocumentText'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoPDF',
|
||||
name: 'PDF浏览',
|
||||
icon: DocumentText,
|
||||
getComponent: async () =>
|
||||
(await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return vFiles[0].name.endsWith('pdf')
|
||||
}
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<miao-message-provider ref="miaoMessageRef">
|
||||
<div class="miao-container">
|
||||
<div class="miao-container-topBar">
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleZoom(10)"
|
||||
title="快速缩小">
|
||||
--
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleZoom()"
|
||||
title="缩小">
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleResetMargin()"
|
||||
title="还原">
|
||||
还原缩放
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleShrink()"
|
||||
title="放大">
|
||||
+
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleShrink(10)"
|
||||
title="快速放大">
|
||||
++
|
||||
</div>
|
||||
</div>
|
||||
<NScrollbar>
|
||||
<div
|
||||
class="miao-container-pdf"
|
||||
:style="{
|
||||
alignItems: pdfMargin < 0 ? 'baseline' : 'center'
|
||||
}">
|
||||
<div
|
||||
ref="pdfEl"
|
||||
class="miao-container-pdf-content"
|
||||
:style="{
|
||||
width: `calc( 100% - ${pdfMargin}px)`
|
||||
}"></div>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
|
||||
import { onMounted, ref, shallowReactive } from 'vue'
|
||||
import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const pdfEl = ref<HTMLDivElement>()
|
||||
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||
// 通过margin来实现缩小功能
|
||||
const pdfMargin = ref<number>(0)
|
||||
|
||||
const pdfPageCount = ref<number>(-1)
|
||||
|
||||
const canvasList = shallowReactive<HTMLCanvasElement[]>([])
|
||||
|
||||
const handleZoom = (index?: number) => {
|
||||
const _index = index ?? 1
|
||||
pdfMargin.value += 10 * _index
|
||||
}
|
||||
|
||||
const handleShrink = (index?: number) => {
|
||||
const _index = index ?? 1
|
||||
// if (pdfMargin.value - 10 * _index <= 0) {
|
||||
// return pdfMargin.value = 0
|
||||
// }
|
||||
pdfMargin.value -= 10 * _index
|
||||
}
|
||||
|
||||
const handleResetMargin = () => {
|
||||
pdfMargin.value = 0
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
|
||||
type: 'info',
|
||||
timeout: -1
|
||||
})
|
||||
const pdfSrc = currentFiles.value[0].url
|
||||
// @ts-ignore
|
||||
const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
|
||||
if (typeof window !== 'undefined' && 'Worker' in window) {
|
||||
PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker()
|
||||
}
|
||||
// 加载文档
|
||||
let loadingTask = PDFJS.getDocument({ url: pdfSrc })
|
||||
loadingTask.__PDFDocumentLoadingTask = true
|
||||
const pdf = await loadingTask.promise // 使用await等待加载完毕
|
||||
pdfPageCount.value = pdf.numPages
|
||||
// 循环渲染每一页
|
||||
for (let i = 1; i <= pdf.numPages; i++) {
|
||||
setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
|
||||
const page = await pdf.getPage(i)
|
||||
let pixelRatio = 3
|
||||
let viewport = page.getViewport({ scale: 1 })
|
||||
// 使用canvas渲染
|
||||
let canvas = window.document.createElement('canvas')
|
||||
canvasList.push(canvas)
|
||||
// @ts-ignore
|
||||
pdfEl.value.appendChild(canvas)
|
||||
canvas.width = viewport.width * pixelRatio // 计算宽度
|
||||
canvas.height = viewport.height * pixelRatio
|
||||
let renderContext = {
|
||||
canvasContext: canvas.getContext('2d'),
|
||||
viewport: viewport,
|
||||
transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
|
||||
}
|
||||
await page.render(renderContext).promise // 一页一页的渲染
|
||||
}
|
||||
setLoadingMessage &&
|
||||
setLoadingMessage(`渲染PDF完成`, {
|
||||
type: 'success',
|
||||
timeout: 3456
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(201, 201, 201);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.miao-container-topBar {
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
background-color: rgb(170, 176, 182);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
&-btn {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
height: 80%;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: larger;
|
||||
letter-spacing: 1px;
|
||||
color: black;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: #eaeaea42;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.miao-container-pdf {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.miao-container-pdf-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.miao-container-loading {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
background-color: aliceblue;
|
||||
border: 1px solid black;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
letter-spacing: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user