vue+java读取本地pdf文件并在前端显示预览

实现方法：

1. 在前端页面中添加一个 input 标签，设置 type 属性为 file，用于选择本地的 pdf 文件。

<input type="file" accept="application/pdf" @change="onFileChange" />

2. 在 Vue 组件中定义一个方法，用于读取选择的文件。

methods: {
  onFileChange(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      this.pdfSrc = e.target.result;
    };
    reader.readAsDataURL(file);
  }
}

3. 在 Vue 组件中定义一个变量 pdfSrc，用于存储读取的 pdf 文件的 base64 编码。

data() {
  return {
    pdfSrc: null,
  };
},

4. 在前端页面中使用 pdf.js 库，将 pdfSrc 赋值给 pdfViewer 对象，实现 pdf 文件的预览。

<pdf-viewer :src="pdfSrc" />

完整代码：

<template>
  <div>
    <input type="file" accept="application/pdf" @change="onFileChange" />
    <pdf-viewer :src="pdfSrc" />
  </div>
</template>

<script>
import { pdfjs } from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';
pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.js';

export default {
  data() {
    return {
      pdfSrc: null,
    };
  },
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        this.pdfSrc = e.target.result;
      };
      reader.readAsDataURL(file);
    },
  },
};
</script>