vue在线预览word、excel、pdf、txt、图片的方法实例

现在我来详细讲解“vue在线预览word、excel、pdf、txt、图片的方法实例”这个话题。

1. 前言

现在越来越多的网站需要提供文档、图片的在线预览功能。使用第三方库可以较为方便的实现这一功能，这里介绍一下常用的第三方库 Vue-PDF、Vue-Excel-Viewer、Vue-Office-Viewer。

2. 使用Vue-PDF实现PDF文件在线预览

安装Vue-PDF

这里以vue-cli为例，在命令行中输入：

npm install --save vue-pdf

在组件中引入

<template>
  <div>
    <pdf :src="pdfFile"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    components: {
        pdf
    },
    data() {
        return {
            pdfFile: '/static/file.pdf'
        }
    }
}
</script>

这里展示了使用Vue-PDF进行PDF文件在线预览的示例，需要注意的是，在data中声明的pdfFile是PDF文件的路径，需要修改成自己的文件路径。

3. 使用Vue-Excel-Viewer实现Excel表格在线预览

安装Vue-Excel-Viewer

npm i vue-excel-viewer

在组件中引入

<template>
  <div>
    <excel-viewer
      :file="excelFile"
      :delay-remove="2000"
      :full-screen="fullscreen"
      :print="print"
      :zoom="zoom"
      :heading="heading"
    />
  </div>
</template>

<script>
import ExcelViewer from 'vue-excel-viewer'

export default {
    components: {
        ExcelViewer
    },
    data() {
        return {
            excelFile: '/static/file.xlsx',
            fullscreen: false,
            print: false,
            zoom: '75%',
            heading: 'Excel Viewer'
        }
    }
}
</script>

这里展示了使用Vue-Excel-Viewer进行Excel表格在线预览的示例，需要注意的是，在data中声明的excelFile是Excel表格的路径，需要修改成自己的文件路径。

4. 使用Vue-Office-Viewer实现Word、PPT等文件在线预览

安装Vue-Office-Viewer

npm install vue-office-viewer

在组件中引入

<template>
  <div>
     <office-viewer 
      :options="option" 
      :files="file" 
      :close-dialog-on-view-change="true" 
      :show-header="false" 
      :show-toolbar="true" 
      :show-statusbar="false" 
      :show-edit="false" 
      :download-url="'/file/download'"
      />
  </div>
</template>

<script>
import OfficeViewer from 'vue-office-viewer'

export default {
    components: {
        OfficeViewer
    },
    data() {
        return {
            file: '/static/file.docx',
            option:{
              'documentName': "test",
              'documentUrl': '/static/file.docx',
              'documentMimeType': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            }
        }
    }
}
</script>