springboot+vue实现pdf预览

要实现Spring Boot + Vue的PDF预览，你可以使用以下步骤：

1. 在Spring Boot中，你需要建立一个RESTful API，用于从服务器上获取PDF文件的二进制数据。你可以使用Spring Boot的`@RestController`注解来建立API endpoint。

2. 在Vue中，你需要使用PDF.js这个JavaScript库来处理PDF文件。你可以将PDF.js的脚本文件引入到Vue组件中。你可以使用Vue的`mounted()`生命周期钩子来初始化PDF.js，加载PDF文件并显示在页面上。

3. 在Vue中，你可以使用`<embed>`或`<iframe>`标签来显示PDF文件。你可以将PDF.js渲染出来的canvas元素插入到这些标签中。

4. 在Vue中，你需要定义一个方法来调用Spring Boot中的API endpoint，获取PDF文件的二进制数据。你可以使用axios或其他JavaScript库来发送HTTP请求。在成功获取PDF文件的二进制数据后，你可以调用PDF.js的API来加载并渲染PDF文件。

下面是一个简单的Vue组件代码示例：

<template>
  <div>
    <embed :src="pdfUrl" type="application/pdf" width="100%" height="500px" />
  </div>
</template>

<script>
import axios from 'axios';
import pdfjsLib from 'pdfjs-dist';

export default {
  name: 'PdfPreview',
  data() {
    return {
      pdfUrl: null,
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      const response = await axios.get('/api/pdf');
      const pdfData = response.data;
      const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1 });
      const canvas = document.createElement('canvas');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const context = canvas.getContext('2d');
      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      await page.render(renderContext).promise;
      this.pdfUrl = canvas.toDataURL('image/png');
    },
  },
};
</script>

在上面的代码中，我们定义了一个Vue组件`PdfPreview`，它会从`/api/pdf`这个API endpoint中获取PDF文件的二进制数据，并使用PDF.js将其渲染在页面上。最终，PDF文件会以`<embed>`标签的形式呈现在页面上。

注意，上面的代码示例仅供参考。你需要根据自己的具体情况进行修改和优化。