【若依前后端分离】前端vue页面查看服务器本地的PDF

要在Vue前端页面查看服务器本地的PDF文件，可以使用<iframe>标签或者PDF.js库。以下是使用<iframe>的简单示例：

1. 在Vue组件中，添加<iframe>标签并通过:src绑定来设置PDF文件的服务器路径。

<template>
  <div>
    <iframe :src="pdfUrl" style="width: 100%; height: 500px;"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      pdfUrl: 'http://localhost:8080/path/to/your/pdf/file.pdf'
    };
  }
};
</script>

确保服务器配置了正确的CORS策略以允许跨域访问，并且该服务器路径是可以访问的。

如果需要更多控制（例如内嵌PDF.js查看器），可以使用PDF.js库。以下是使用PDF.js查看服务器上的PDF文件的示例：

1. 安装PDF.js依赖：

npm install pdfjs-dist

2. 在Vue组件中引入PDF.js并使用其API查看PDF：

<template>
  <div id="pdf-viewer"></div>
</template>
 
<script>
import pdfjsLib from 'pdfjs-dist/build/pdf';
 
export default {
  mounted() {
    this.loadPDF('http://localhost:8080/path/to/your/pdf/file.pdf');
  },
  methods: {
    loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url);
      loadingTask.promise.then(
        (pdf) => {
          console.log('PDF loaded');
          // Fetch the first page of the PDF
          const pageNumber = 1;
          pdf.getPage(pageNumber).then((page) => {
            // Get viewport (dimensions) of the page
            const viewport = page.getViewport({ scale: 1.0 });
            // Get a canvas element from the DOM
            const canvas = document.createElement('canvas');
            canvas.style.width = `${viewport.width}px`;
            canvas.style.height = `${viewport.height}px`;
            document.getElementById('pdf-viewer').appendChild(canvas);
            // Prepare canvas using PDF.js
            const context = canvas.getContext('2d');
            const renderContext = {
              canvasContext: context,
              viewport: viewport,
            };
            // Render the page
            page.render(renderContext).promise.then(() => {
              console.log('Page rendered');
            });
          });
        },
        (reason) => {
          console.error('Error loading PDF: ', reason);
        }
      );
    },
  },
};
</script>

在这个示例中，我们首先在mounted生命周期钩子中调用loadPDF方法，该方法使用PDF.js获取PDF文档，然后渲染第一页到一个canvas元素中。确保服务器允许跨域请求，并且设置了适当的CORS策略。