file-viewer-demo/src/App.vue

<template>
  <header>
    <div class="tool-bar">
      <div>
        <h3>选择预览模式</h3>
        <input type="radio" name="mode" value="inner" v-model="mode" />内置访问
        <input type="radio" name="mode" value="embedded" v-model="mode" />iframe访问
      </div>
      <div>
        <h3>选择文档</h3>
        <select v-model="url">
          <optgroup label="excel">
            <option :value="excel">常规excel</option>
          </optgroup>
          <optgroup label="pdf">
            <option :value="pdf1">复杂pdf</option>
            <option :value="pdf2">简单pdf</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="wrapper">
      <InnerViewer v-if="mode === 'inner'" :url="url" />
      <IframeViewer v-else-if="mode === 'embedded'" :url="url" />
    </div>
  </header>
</template>

<script>
import InnerViewer from './components/InnerViewer'
import IframeViewer from "./components/IframeViewer";

// 测试文件，这些文件实际情况可能是其他服务器链接
const excel = 'excel.xlsx';
const pdf1 = '666.pdf';
const pdf2 = '888.pdf';

export default {
  name: 'App',
  data() {
    return {
      url: excel,
      mode: 'inner',
      excel,
      pdf1,
      pdf2,
    }
  },
  components: {
    InnerViewer,
    IframeViewer
  }
}
</script>

<style scoped>
header {
  line-height: 1.5;
}

.tool-bar {
  background-color: hsla(160, 100%, 37%, 0.2);
  width: 230px;
  height: 100vh;
  padding-left: 8px;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    position: relative;
  }

  header .wrapper {
    flex: 1;
  }
}
</style>