多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

46 lines
1.3 KiB

<script setup lang="ts">
interface Props {
src: string
class?: string
}
const props = defineProps<Props>()
const openMethod = ref<'browser' | 'google' | undefined>()
</script>
<template>
<div v-if="!openMethod" :class="props.class" class="flex flex-col text-white gap-2 items-center justify-center">
<GeneralIcon class="w-28 h-28" icon="pdfFile" />
<h1 class="font-bold text-white text-center text-lg">Opening your file in external service exposes your data</h1>
<div class="flex items-center justify-center gap-2">
<NcButton @click="openMethod = 'browser'">
<div class="flex items-center gap-1">
<GeneralIcon icon="lock" />
Open in browser
</div>
</NcButton>
<NcButton type="secondary" @click="openMethod = 'google'">
<div class="flex items-center gap-1">
<GeneralIcon class="w-4 h-4" icon="googleDocs" />
Open with Google Docs
</div>
</NcButton>
</div>
</div>
<iframe v-if="openMethod === 'browser'" :class="props.class" :src="props.src" width="100%" height="100%"></iframe>
<iframe
v-else-if="openMethod === 'google'"
:class="props.class"
:src="`https://docs.google.com/viewer?url=${src}&embedded=true`"
width="100%"
height="100%"
frameborder="0"
></iframe>
</template>
<style scoped lang="scss"></style>