index.vue
2.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!--
* @Description: 文档预览示例页面
* @Date: 2025-01-30
* @Usage: 展示 DocumentPreview 组件的各种使用场景
-->
<template>
<view class="document-demo-page">
<nut-tabs v-model="activeTab">
<nut-tab-pane title="PDF 预览" pane-key="pdf">
<DocumentPreview
src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
fileType="pdf"
fileName="示例 PDF 文档.pdf"
@rendered="handleRendered"
@error="handleError"
/>
</nut-tab-pane>
<nut-tab-pane title="Word 预览" pane-key="word">
<DocumentPreview
src="https://calibre-ebook.com/downloads/demos/demo.docx"
fileType="docx"
fileName="示例 Word 文档.docx"
@rendered="handleRendered"
@error="handleError"
/>
</nut-tab-pane>
<nut-tab-pane title="Excel 预览" pane-key="excel">
<DocumentPreview
src="https://filesamples.com/samples/document/xlsx/sample1.xlsx"
fileType="xlsx"
fileName="示例 Excel 文档.xlsx"
@rendered="handleRendered"
@error="handleError"
/>
</nut-tab-pane>
<nut-tab-pane title="PPT 预览" pane-key="ppt">
<DocumentPreview
src="https://filesamples.com/samples/document/ppt/sample1.ppt"
fileType="ppt"
fileName="示例 PPT 文档.ppt"
@rendered="handleRendered"
@error="handleError"
/>
</nut-tab-pane>
</nut-tabs>
</view>
</template>
<script setup>
import { ref } from 'vue'
import DocumentPreview from '@/components/DocumentPreview/index.vue'
// #ifdef WEAPP
import Taro from '@tarojs/taro'
// #endif
const activeTab = ref('pdf')
const handleRendered = () => {
console.log('文档渲染完成')
// #ifdef WEAPP
Taro.showToast({
title: '文档加载完成',
icon: 'success'
})
// #endif
}
const handleError = (err) => {
console.error('文档渲染失败:', err)
// #ifdef WEAPP
Taro.showToast({
title: '文档加载失败',
icon: 'error'
})
// #endif
}
</script>
<style lang="less" scoped>
.document-demo-page {
min-height: 100vh;
background: #f5f5f5;
}
.placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 800rpx;
padding: 40rpx;
gap: 20rpx;
.placeholder-text {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.placeholder-hint {
font-size: 28rpx;
color: #999;
}
}
</style>