|
|
@@ -1,61 +1,53 @@
|
|
|
<template>
|
|
|
<view class="pdf-viewer">
|
|
|
- <view v-if="loading" class="pdf-loading">
|
|
|
- <text class="loading-text">PDF加载中...</text>
|
|
|
- </view>
|
|
|
- <view v-else-if="errorMsg" class="pdf-error">
|
|
|
- <text class="error-text">{{ errorMsg }}</text>
|
|
|
- </view>
|
|
|
- <template v-else>
|
|
|
- <!-- #ifdef H5 -->
|
|
|
- <scroll-view
|
|
|
- scroll-y
|
|
|
- scroll-x
|
|
|
- class="pdf-content-area"
|
|
|
- :style="{ height: viewerHeight }"
|
|
|
- >
|
|
|
- <view
|
|
|
- v-if="contentReady"
|
|
|
- class="pdf-scroll-wrapper"
|
|
|
- :style="scrollWrapperStyle"
|
|
|
- >
|
|
|
- <view class="pdf-scale-layer" :style="scaleLayerStyle">
|
|
|
- <view class="pdf-container" :id="containerId"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef H5 -->
|
|
|
- <scroll-view
|
|
|
- scroll-y
|
|
|
- scroll-x
|
|
|
- class="pdf-content-area"
|
|
|
- :style="{ height: viewerHeight }"
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <scroll-view
|
|
|
+ scroll-y
|
|
|
+ scroll-x
|
|
|
+ class="pdf-content-area"
|
|
|
+ :style="{ height: viewerHeight }"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-if="contentReady"
|
|
|
+ class="pdf-scroll-wrapper"
|
|
|
+ :style="scrollWrapperStyle"
|
|
|
>
|
|
|
- <view v-if="contentReady" class="pdf-scroll-wrapper" :style="scrollWrapperStyle">
|
|
|
- <view class="pdf-scale-layer" :style="scaleLayerStyle">
|
|
|
- <image
|
|
|
- :src="imageSrc"
|
|
|
- mode="widthFix"
|
|
|
- class="pdf-image"
|
|
|
- :style="{ width: contentWidth + 'px' }"
|
|
|
- />
|
|
|
- </view>
|
|
|
+ <view class="pdf-scale-layer" :style="scaleLayerStyle">
|
|
|
+ <view class="pdf-container" :id="containerId"></view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
- <!-- #endif -->
|
|
|
- <view v-if="contentReady" class="pdf-zoom-bar">
|
|
|
- <view class="zoom-btn" @click="zoomOut">
|
|
|
- <text class="zoom-btn-text">−</text>
|
|
|
- </view>
|
|
|
- <view class="zoom-btn" @click="zoomIn">
|
|
|
- <text class="zoom-btn-text">+</text>
|
|
|
- </view>
|
|
|
- <view class="zoom-btn zoom-btn-reset" @click="resetZoom">
|
|
|
- <text class="zoom-btn-text">重置</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef H5 -->
|
|
|
+ <scroll-view
|
|
|
+ scroll-y
|
|
|
+ scroll-x
|
|
|
+ class="pdf-content-area"
|
|
|
+ :style="{ height: viewerHeight }"
|
|
|
+ >
|
|
|
+ <view v-if="contentReady" class="pdf-scroll-wrapper" :style="scrollWrapperStyle">
|
|
|
+ <view class="pdf-scale-layer" :style="scaleLayerStyle">
|
|
|
+ <image
|
|
|
+ :src="imageSrc"
|
|
|
+ mode="widthFix"
|
|
|
+ class="pdf-image"
|
|
|
+ :style="{ width: contentWidth + 'px' }"
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <view v-if="contentReady" class="pdf-zoom-bar">
|
|
|
+ <view class="zoom-btn" @click="zoomOut">
|
|
|
+ <text class="zoom-btn-text">−</text>
|
|
|
+ </view>
|
|
|
+ <view class="zoom-btn" @click="zoomIn">
|
|
|
+ <text class="zoom-btn-text">+</text>
|
|
|
+ </view>
|
|
|
+ <view class="zoom-btn zoom-btn-reset" @click="resetZoom">
|
|
|
+ <text class="zoom-btn-text">重置</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -218,6 +210,8 @@ const renderAllPages = async () => {
|
|
|
|
|
|
container.appendChild(canvas)
|
|
|
}
|
|
|
+
|
|
|
+ emit('loaded', pdfDoc.numPages)
|
|
|
} catch (error) {
|
|
|
console.error('PDF页面渲染失败:', error)
|
|
|
errorMsg.value = 'PDF页面渲染失败'
|
|
|
@@ -285,7 +279,6 @@ const loadPDFFromArrayBuffer = async (data: ArrayBuffer) => {
|
|
|
await applyFitScale()
|
|
|
|
|
|
loading.value = false
|
|
|
- emit('loaded', pdf.numPages)
|
|
|
|
|
|
await nextTick()
|
|
|
if (isMounted) {
|
|
|
@@ -427,36 +420,6 @@ defineExpose({
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
-.pdf-loading {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 300px;
|
|
|
- background-color: #f5f5f5;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .loading-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.pdf-error {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- background-color: #fff5f5;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .error-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #f56c6c;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
.pdf-content-area {
|
|
|
width: 100%;
|
|
|
background-color: #f5f5f5;
|