feat: pdf文件预览下载

src/views/remote/videoCall/chatDetails.vue

@@ -10,18 +10,22 @@
             </div>
             <!-- 聊天信息 -->
             <template v-if="type == 'txt'">
-                <div :class="{ 'bg-primary-hover': isSelf, 'bg-theme-bg3': !isSelf }" class="p-4 rounded leading-[22px] text-theme-text1">{{ data.message || '' }}</div>
+                <div :class="{ 'bg-primary-hover': isSelf, 'bg-theme-bg3': !isSelf }" class="p-4 rounded leading-[22px] text-theme-text1 break-all">{{ data.message || '' }}</div>
             </template>
             <template v-else-if="type == 'image'">
                 <a-image width="100%" :height="160" :src="data.src"></a-image>
             </template>
             <template v-else-if="type == 'pdf'">
-                <div :class="{ 'bg-primary-hover': isSelf, 'bg-theme-bg3': !isSelf }" class="py-[10px] px-3 rounded flex-center justify-between leading-[22px] text-theme-text1 w-full">
+                <div
+                    :class="{ 'bg-primary-hover': isSelf, 'bg-theme-bg3': !isSelf }"
+                    class="py-[10px] px-3 rounded flex-center justify-between leading-[22px] text-theme-text1 w-full cursor-pointer"
+                    @click="handlePreview"
+                >
                     <div class="flex-center">
                         <global-icon icon="file"></global-icon>
                         <span class="ml-3">{{ data.fileName || '' }}</span>
                     </div>
-                    <a :href="data.src" download target="_blank"><global-icon icon="download" class="cursor-pointer"></global-icon></a>
+                    <global-icon icon="download" class="cursor-pointer" @click.stop="handleDown"></global-icon>
                 </div>
             </template>
             <template v-else>
@@ -29,9 +33,16 @@
             </template>
         </div>
     </div>
+    <global-model v-model:visible="showPreview" width="80%" :footer="false" :simple="true">
+        <div style="height: 80vh">
+            <iframe :src="data.src" frameborder="0" width="100%" height="100%"></iframe>
+        </div>
+    </global-model>
 </template>
 
 <script setup lang="ts">
+import { directlyDownloadFromURL } from '@/utils/downloadData/downloadBlob'
+
 interface Props {
     isSelf?: boolean
     type?: 'txt' | 'image' | 'pdf' | 'video'
@@ -42,5 +53,14 @@ const ps = withDefaults(defineProps<Props>(), {
     type: 'txt',
     data: () => {}
 })
+//预览文件
+const showPreview = ref(false)
+const handlePreview = () => {
+    showPreview.value = true
+}
+//下载文件
+const handleDown = () => {
+    directlyDownloadFromURL(ps.data?.src, ps.data?.fileName)
+}
 </script>
 <style lang="less" scoped></style>