vue项目用后端返回的文件流实现docx和pdf文件预览

为了实现Vue项目中使用后端返回的文件流来实现docx和pdf文件预览，我们需要考虑以下几个步骤：

1. 后端接口的开发，即后端如何将docx和pdf格式的文件以流的方式返回给前端；
2. 前端的代码实现，即如何将后端返回的文件流渲染成文档预览界面；
3. 在Vue项目中具体使用这种文件预览功能。

下面我会针对每个步骤详细讲解。

后端接口的开发

在后端开发的时候，我们需要做的是将要预览的文件以流的形式返回给前端。具体来说，在Java Spring Boot框架中，我们可以这样实现：

1. 针对docx文档格式，可以使用XWPFDocument进行解析和处理，示例代码如下：

```java
@GetMapping(value = "/previewDocx")
public void previewDocx(HttpServletResponse response) throws IOException {
// 读取要预览的docx文档文件
XWPFDocument doc = new XWPFDocument(new FileInputStream("example.docx"));

   // 将解析得到的文档以流的形式返回给前端
   response.setHeader("Content-Disposition", "inline; filename=example.docx");
   response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document");
   doc.write(response.getOutputStream());

}
```

1. 针对pdf文档格式，可以使用PDFBox进行解析和处理，示例代码如下：

```java
@GetMapping(value = "/previewPdf")
public void previewPdf(HttpServletResponse response) throws IOException {
// 读取要预览的pdf文档文件
PDDocument doc = PDDocument.load(new File("example.pdf"));

   // 将解析得到的文档以流的形式返回给前端
   response.setHeader("Content-Disposition", "inline; filename=example.pdf");
   response.setContentType("application/pdf");
   doc.save(response.getOutputStream());

}
```

前端代码的实现

在前端代码中，我们需要使用前端负责展示的组件来呈现预览的docx和pdf文档。在Vue项目中，我们可以使用vue-doc-preview插件来实现这一目的。以下代码演示了如何使用vue-doc-preview组件以渲染后端返回的docx和pdf文件流：

<template>
  <div>
    <doc-preview v-if="type === 'docx'" :file="file" :config="docxConfig"></doc-preview>
    <pdf-preview v-if="type === 'pdf'" :file="file" :config="pdfConfig"></pdf-preview>
  </div>
</template>

<script>
import { DocPreview, PdfPreview } from 'vue-doc-preview'

export default {
  name: 'Preview',
  components: {
    DocPreview,
    PdfPreview
  },
  props: {
    file: {
      type: Object,
      required: true
    }
  },
  computed: {
    type () {
      const fileType = this.file.file_type
      return fileType === 'docx' || fileType === 'doc' ? 'docx' : 'pdf'
    },
    docxConfig () {
      return {
        download: false,
        enableTextSelection: true,
        pageContainerStyle: {
          backgroundColor: '#fff',
          border: '1px solid #ccc',
          padding: '10px'
        }
      }
    },
    pdfConfig () {
      return {
        download: false,
        pageContainerStyle: {
          background: '#fff'
        },
        enableTextSelection: true,
        showThumbnail: true
      }
    }
  }
}
</script>

在Vue项目中使用文件预览功能

在Vue项目中，我们可以通过调用后端提供的接口来实现文件预览功能。以下代码演示了如何在Vue项目中调用后端接口来获取docx和pdf文件流，并利用前面介绍的vue-doc-preview组件进行渲染：

<template>
  <div>
    <button @click="previewDocx">预览docx文件</button>
    <button @click="previewPdf">预览pdf文件</button>
    <preview :file="file" v-if="file"></preview>
  </div>
</template>

<script>
import axios from 'axios'
import Preview from './Preview'

export default {
  name: 'App',
  components: {
    Preview
  },
  data () {
    return {
      file: null
    }
  },
  methods: {
    previewDocx () {
      axios.get('/previewDocx', {
        responseType: 'blob'
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        this.file = {
          file_type: 'docx',
          url
        }
      })
    },
    previewPdf () {
      axios.get('/previewPdf', {
        responseType: 'blob'
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        this.file = {
          file_type: 'pdf',
          url
        }
      })
    }
  }
}
</script>

以上就是Vue项目中使用后端返回的文件流来实现docx和pdf文件预览的完整攻略。其中，后端代码示例针对Java Spring Boot框架，前端代码使用了vue-doc-preview组件，可以供大家参考。