pdf-vue3
官网: pdf-vue3 - npm (npmjs.com)
安装
npm i pdf-vue3
使用
<view class="file-item">
<PDF src="/assets/pdf/xxx.pdf"/>
</view>
<script setup lang="ts">
import PDF from 'pdf-vue3';
</script>
封装组件
<template>
<view class="file-item">
<PDF class="pdf-item" :src="pdfData.url" />
</view>
</template>
<script setup lang="ts">
import PDF from 'pdf-vue3';
import { defineProps } from "vue";
const props = defineProps({
pdfData: {
type: Array,
default: () => [],
},
});
</script>
<style scoped lang="scss">
.pdf-item {
width: 100%;
height: 100%;
}
</style>
父组件
<template>
<PDF :pdf-data="pdfData" />
</template
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import PDF from '@/components/pdf.vue';
const pdfData = ref({
url: '/src/assets/pdf/xxxx.pdf',
key: '1',
page: '2',
});
</script>
