vue预览 pdf、word、xls、ppt、txt文件的实现方法

实现网页预览PDF、Word、Excel、PPT、TXT等各种文件格式，一般需要使用第三方库进行实现。本文将介绍如何使用Vue和依赖库来预览这些文件格式。

1. 安装vue2-pdf预览库

Vue2-pdf 是一个基于 Vue 2.0 开发的 PDF 预览组件，支持PDF的浏览、缩放、翻页和导出等操作。具体实现步骤：

• 安装依赖

npm install vue2-pdf --save

• 注册组件

import Vue from 'vue'
import pdf from 'vue2-pdf'
Vue.component('pdf', pdf)

• 使用组件

<template>
  <pdf :src="pdfUrl"></pdf>
</template>
<script>
export default {
  data () {
    return {
      pdfUrl: 'path/to/your/pdf'
    }
  }
}
</script>

2. 使用office2html预览Word、Excel、PPT文件

office2html是一个基于node服务端的Office文件转html渲染库，可以将Word、Excel、PPT文件转换成HTML，然后嵌入到页面中进行浏览。具体实现步骤：

• 安装依赖

npm install office2html --save

• 配置服务端路由（nodeJS）

var fs = require('fs')
var path = require('path')
var office2html = require('office2html')
var express = require('express')
var app = express()
var filePath = path.join(__dirname, 'office.docx')
var htmlPath = path.join(__dirname, 'office.html')
fs.createReadStream(filePath)
  .pipe(office2html())
  .pipe(fs.createWriteStream(htmlPath))
app.get('/', function (req, res) {
  var html = fs.readFileSync(htmlPath, 'utf8')
  res.send(html)
})
app.listen(3000, function () {
  console.log('Express is listening on port 3000')
})

• 使用组件

<template>
  <iframe :src="officeHtmlUrl"></iframe>
</template>
<script>
export default {
  data () {
    return {
      officeHtmlUrl: 'http://localhost:3000'
    }
  }
}
</script>

在运行了上述代码后，即可在页面中展示Word、Excel、PPT文件的预览效果。

注意事项

• 在使用office2html进行转换之前，需要首先保证电脑上安装了相应的Office软件，否则会在转换过程中报错。
• office2html的转换速度较慢，尤其是对于较大的文件，转换时间将更为漫长，请耐心等待。