前端文档

# word 文档预览

# 方案

  • 后端 koa 代码中读取文件夹中的 .docx 类型文件
  • 然后将其以可读流的方式返回给前端一个 blob 流文件
  • 后端返回的流文件前端收到以后，执行 docx-preview 插件的 renderAsync 方法即可渲染出预览的效果

# 服务端实现

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const fs = require('fs')

// 返回word文件接口
router.get('/getDoc', async (ctx, next) => {
  const docxUrl = './static/测试.docx'

  // 允许跨域
  ctx.set('Access-Control-Allow-Origin', '*')

  // 设置请求头
  ctx.set('Content-Type', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')

  // 创建可读流
  const readStream = fs.createReadStream(docxUrl)

  // 将读取的结果返回给前端
  ctx.body = readStream
})

app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
  console.log('server is starting at port 3000')
})

# 前端实现

安装axios和docx-preview依赖

注：docx-preview 不支持 import 引入

<template>
  <div>
    <el-button @click="preview">预览word文件</el-button>
    <el-button @click="downLoad">下载word文件</el-button>
    <div class="doc-box" ref="file"></div>
  </div>
</template>

<script>
import axios from 'axios'
const docx = require('docx-preview')
const baseURL = 'http://127.0.0.1:3000/getDoc'

export default {
  methods: {
    // 预览
    preview() {
      axios({
        method: 'get',
        responseType: 'blob',
        url: baseURL
      }).then(({ data }) => {
        console.log(data)
        docx.renderAsync(data, this.$refs.file)
      })
    },
    // 下载
    downLoad() {
      axios({
        method: 'get',
        responseType: 'blob',
        url: baseURL
      }).then(({ data }) => {
        console.log(data)
        const blob = new Blob([data])
        const a = document.createElement('a')
        a.href = URL.createObjectURL(blob)
        a.download = '测试.docx'
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        a.remove()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.doc-box {
  width: 1000px;
  overflow: auto;
}
</style>

← Websocket实时 →