vue3 docx-preview iframe预览docx文件

### 在 Vue3 中通过 iframe 实现 Docx 文件在线预览

为了在 Vue3 项目中实现 Docx 文件的在线预览，可以采用类似于 PDF 预览的方式使用 `iframe` 标签。然而，浏览器本身并不支持直接渲染 `.docx` 文件。因此，通常的做法是利用第三方服务或工具将 Docx 转换为 HTML 或其他可嵌入格式。

一种常见的解决方案是借助 Microsoft 的 Office Online Viewer 来展示文档。Office Online Viewer 是微软提供的免费服务，允许用户查看 Word 文档而无需安装任何额外软件。下面是如何在 Vue3 组件中集成此功能：

#### 示例代码

<template>
<div class="document-preview">
    <!-- 使用 iframe 嵌入来自 Office Online 的 viewer -->
    <iframe 
        :src="getDocxViewerUrl()" 
        width="100%" 
        height="800px" 
        frameborder="0"
    ></iframe>
</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
let docxUrl = ref('');

// 初始化时获取 URL 参数中的 docx 地址并设置默认参数
if (route.query.docxUrl) {
    docxUrl.value = `${route.query.docxUrl}?embed=true`;
}

function getDocxViewerUrl(){
    const baseUrl = "https://view.officeapps.live.com/op/embed.aspx";
    return `${baseUrl}?src=${encodeURIComponent(docxUrl.value)}`
}
</script>

<style scoped>
.document-preview{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.document-preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
</style>

上述代码片段展示了如何创建一个简单的 Vue3 单文件组件来加载外部 Docx 文件链接，并将其传递给 Office Online Viewer 进行显示[^1]。需要注意的是，在实际应用中可能还需要处理跨域请求等问题。