vue3+tpescript 点击按钮跳转新页面直接通过链接预览word

1.在route里面配置 跳转页面

{
		path: '/helpManual',
		name: 'staticRoutes.helpManual',
		component: () => import('/@/views/shiftHandover/helpManual.vue'),
		meta: {
			isHide: true,
			isAuth: false,
			isKeepAlive: false
		},
	}

2.通过点击 openHelpManual跳转新页面

<el-tooltip content="帮助手册" placement="top">
            <el-icon style="margin-left: 10px; cursor: pointer; font-size: 18px; color: #409eff;"
                     @click="openHelpManual">
              <QuestionFilled/>
            </el-icon>
          </el-tooltip>

path: '/helpManual' 页面路径 在route配置

//打开帮助手册
const openHelpManual = () => {
  // 跳转到新页面显示Word文档
  const url = router.resolve({
    path: '/helpManual'
  }).href;
  window.open(url, '_blank');
}

3.helpManual页面

注意我这里在vite.config.ts 配置了代理，因为我兼容本地调试，

host 为动态获取主机名

若不需要 直接docUrl.value = '地址'就可以

<template>
  <div class="help-manual-container">
    <div style="height: 100vh; overflow: auto;">
      <VueOfficeDocx
        v-if="docUrl"
        :src="docUrl"
        style="height: 100%;"
        @error="handleDocxError"
      />
    </div>
  </div>
</template>

<script setup lang="ts" name="helpManual">
import { ref, onMounted } from 'vue';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';
import { useMessage } from '/@/hooks/message';

// 根据window.location.host动态设置帮助手册URL
const getHelpManualUrl = () => {
  const host = window.location.host
  // 直接判断主机名是否包含localhost或100.100.100.207
  if (host.includes('localhost') || host.includes('100.100.100.207')) {
    // 使用相对路径通过代理访问，避免CORS问题
    return '/doc/JjbOperationManual.docx'
  }
  // 其他情况直接使用当前host
  return `http://${host}/doc/JjbOperationManual.docx`
}

const docUrl = ref('');

onMounted(() => {
  // 直接使用URL地址
  console.log('URL地址:',getHelpManualUrl())
  docUrl.value = getHelpManualUrl();
});

//Word文档加载错误
const handleDocxError = (error: any) => {
  console.error('Word文档加载错误:', error);
  useMessage().error('文档加载失败，请检查网络连接或文档地址。');
};
</script>

<style scoped>
.help-manual-container {
  width: 100%;
  height: 100vh;
  background: #fff;
}
</style>