element查看文件和图片组件[vue2]
`
<!-- PDF (使用 embed 或 iframe) -->
<iframe
v-else-if="type === 'pdf'"
:src="fileUrl"
class="preview-media"
frameborder="0"
></iframe>
<!-- 视频 -->
<video v-else-if="type === 'video'" controls class="preview-media">
<source :src="fileUrl" :type="fileType" />
您的浏览器不支持视频播放。
</video>
<!-- 音频 -->
<audio v-else-if="type === 'audio'" controls class="preview-audio">
<source :src="fileUrl" :type="fileType" />
</audio>
<!-- 文本文件 (txt, js, css, json, xml, html 等) -->
<div v-else-if="type === 'text'" class="preview-text">
<pre>{{ textContent }}</pre>
</div>
<!-- Office 文档 (通过 Office Online 或 Google Docs 预览) -->
<div v-else-if="type === 'office'" class="office-preview">
<div v-if="officePreviewUrl" class="iframe-wrapper">
<iframe
:src="officePreviewUrl"
frameborder="0"
class="preview-media"
></iframe>
</div>
<div v-else class="download-prompt">
<p>无法在线预览此文档，请下载后查看。</p>
<a :href="fileUrl" :download="fileName" class="download-btn"
>下载文件</a
>
</div>
</div>
<!-- 不支持的类型 -->
<div v-else class="unsupported">
暂不支持预览该文件类型 ({{ fileType || "未知类型" }})
</div>
</div>
</div>
`
浙公网安备 33010602011771号