Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

下面我将为你详细讲解如何用Vue实现在线预览pdf文件功能，对应的技术包括pdf.js、iframe、embed等。

1. 准备工作

首先，需要下载pdf.js（官网地址）并引入到Vue项目中。在main.js中引入如下：

import pdfjsLib from 'pdfjs-dist/build/pdf';
import pdfWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker;

Vue.prototype.$pdfjs = pdfjsLib;

然后，在Vue组件中，我们可以通过下面的方式加载pdf文件：

loadPdf(url) {
  this.$pdfjs.getDocument(url).promise.then((pdf) => {
    this.pdf = pdf;
    this.renderPage(this.pageNum);
  });
},
renderPage(pageNum) {
  this.pdf.getPage(pageNum).then((page) => {
    const canvas = document.getElementById('pdf-canvas');
    const context = canvas.getContext('2d');
    const viewport = page.getViewport({ scale: this.scale });
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    const renderContext = {
      canvasContext: context,
      viewport,
    };
    page.render(renderContext);
  });
},

其中，loadPdf函数用于加载pdf文件，renderPage函数用于渲染一页pdf页面。在下载pdf文件之后，可以通过pdf.getPage(pageNum)方法获取到指定页数的页面，然后通过page.render()方法渲染到canvas上。

2. iframe方式

实现该方式的在线预览pdf文件功能，可以直接在Vue组件中使用iframe标签：

<template>
  <div>
    <iframe id="pdf-iframe" :src="pdfUrl"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'https://example.com/pdf.pdf',
    };
  },
};
</script>

其中pdfUrl是pdf文件的链接地址。这种方式简单易用，可以直接在Vue组件中使用，但是功能比较简单，只能实现基本的在线预览功能。

3. embed方式

与iframe类似，利用embed标签也可以实现在线预览pdf文件的功能：

<template>
  <div>
    <embed id="pdf-embed" :src="pdfUrl" type="application/pdf" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'https://example.com/pdf.pdf',
    };
  },
};
</script>

其中pdfUrl是pdf文件的链接地址。相比于iframe方式，embed标签支持更多的浏览器，但是需要注意的是不同浏览器对embed的实现方式是不一样的，需要进行兼容性测试。