---

vue-office：GitHub地址
pdfjs：GitHub地址、下载地址

**注意：使用vue-office时，不要使用view标签包裹vue-office组件，这会导致vue-office组件屏幕自适应失效**

---

一、docx文件预览

使用vue-office-docx进行预览

1.安装vue-office/docx

npm install @vue-office/docx vue-demi@0.14.6

2.引入vue-office/docx

<script lang="ts" setup>
  import VueOfficeDocx from '@vue-office/docx'
  import '@vue-office/docx/lib/index.css'
</script>

3.使用vue-office/docx

<template>
  <div v-if="webUrl">
    <vue-office-docx
      :src="webUrl" 
      style="height: calc(100vh - 44px);"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </div>
</template>
 
<script lang="ts" setup>
  import VueOfficeDocx from '@vue-office/docx'
  import '@vue-office/docx/lib/index.css'

  const emits = defineEmits(['success', 'fail'])

  defineProps({
    webUrl: {
      type: String,
      default: ''
    }
  })

  function renderedHandler() {
    emits('success')
  }

  function errorHandler() {
    emits('fail')
  }
</script>

<style lang="scss" scoped>
  body {
    overflow: scroll;
  }
</style>

二、excel预览

使用vue-office-excel进行预览

1.安装vue-office/excel

npm install @vue-office/excel vue-demi@0.14.6

2.引入vue-office/excel

<script lang="ts" setup>
  import VueOfficeExcel from '@vue-office/excel'
  import '@vue-office/excel/lib/index.css';
</script>

3.使用vue-office/excel

<template>
  <div v-if="webUrl">
    <vue-office-excel 
      :src="webUrl" 
      :options="excelOptions"
      style="height: calc(100vh - 44px);"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </div>
</template>
 
<script lang="ts" setup>
  import VueOfficeExcel from '@vue-office/excel'
  import '@vue-office/excel/lib/index.css';

  const emits = defineEmits(['success', 'fail'])

  const props = defineProps({
    webUrl: {
      type: String,
      default: ''
    },
    fileType: {
      type: String,
      default: ''
    }
  })

  const excelOptions = ref({
    xls: false,       //预览xlsx文件设为false；预览xls文件设为true
    minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
    minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
    widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
    heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
    beforeTransformData: (workbookData: any) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
    transformData: (workbookData: any) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
  })

  watch(() => props.fileType, (newVal) => {
    if(newVal === 'xlsx') excelOptions.value.xls = false
    if(newVal === 'xls') excelOptions.value.xls = true
  })

  function renderedHandler() {
    emits('success')
  }

  function errorHandler() {
    emits('fail')
  }
</script>

<style lang="scss" scoped>
  body {
    overflow: scroll;
  }
</style>

三、pdf预览

**注意：在safari浏览器中使用vue-office-pdf或pdfjs会有渲染失败的情况，这边使用web-view做兼容处理**

• 使用vue-office-pdf进行预览

1.安装vue-office/pdf

npm install @vue-office/pdf vue-demi@0.14.6

2.引入vue-office/pdf

<script lang="ts" setup>
  import VueOfficePdf from '@vue-office/pdf'
</script>

3.使用vue-office/pdf

<template>
  <div v-if="pdfUrl">
    <web-view v-if="safariFlag" :src="pdfUrl" allow="fullscreen" @load="renderedHandler" @error="errorHandler" />

    <vue-office-pdf
      v-else
      :src="pdfUrl" 
      style="height: calc(100vh - 44px);"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    
  </div>
</template>
<script lang="ts" setup>
  import VueOfficePdf from '@vue-office/pdf'

  const emits = defineEmits(['success', 'fail'])

  const props = defineProps({
    webUrl: {
      type: String,
      default: ''
    }
  })

  const pdfUrl = ref('')
  const safariFlag = ref(false)

  onMounted(() => {
    safariFlag.value = isSafari()
  })

  function isSafari() {
    const userAgent = navigator.userAgent;
    // 检查是否包含 Safari 但不包含 Chrome、Chromium、Edg 等基于 Chromium 的浏览器
    return /^((?!chrome|android|crios|fxios|edg).)*safari/i.test(userAgent);
  }
  function renderedHandler() {
    emits('success')
  }

  function errorHandler(err: any) {
    emits('fail')
  }
</script>

<style lang="scss" scoped>
  body {
    overflow: scroll;
  }
</style>

• 使用pdfjs预览

1. 下载pdfjs 下载地址

2. 配置pdfjs

• 将下载的包解压并全部放在static/html中
  
  因为pdfjs只是h5需要用到，所以这里将html放到h5文件夹中

补充：如果你有遇到file origin does not match viewer's的报错，那么需要在web/viewer.mjs中对同源策略进行调整：

• 搜索file origin does not match viewer's，可以在HOSTED_VIEWER_ORIGINS中加入白名单，也可以和我一样return跳过校验
  

3. 使用pdfjs

<template>
  <div v-if="pdfUrl">
    <web-view :src="pdfUrl" allow="fullscreen" @load="renderedHandler" @error="errorHandler" />
  </div>
</template>
<script lang="ts" setup>
  const emits = defineEmits(['success', 'fail'])

  const props = defineProps({
    webUrl: {
      type: String,
      default: ''
    }
  })

  const viewerUrl = '/static/h5/html/web/viewer.html'
  const pdfUrl = ref('')

  watch(() => props.webUrl, (newVal) => {
    if(newVal) {
      // 兼容safari
      pdfUrl.value = isSafari() ? newVal : `${viewerUrl}?file=${newVal}`
    }
  }, { immediate: true })

  function isSafari() {
    const userAgent = navigator.userAgent;
    // 检查是否包含 Safari 但不包含 Chrome、Chromium、Edg 等基于 Chromium 的浏览器
    return /^((?!chrome|android|crios|fxios|edg).)*safari/i.test(userAgent);
  }
  function renderedHandler() {
    emits('success')
  }

  function errorHandler(err: any) {
    emits('fail')
  }
</script>

<style lang="scss" scoped>
  body {
    overflow: scroll;
  }
</style>

---