pdf.js在vue中使用

在Vue项目中使用pdf.js库可以实现在前端展示PDF文件的功能。下面是一种简单的方式来实现：

1. 首先，安装pdf.js库。可以通过npm或者yarn来安装，打开终端并执行以下命令：

npm install pdfjs-dist

2. 在Vue组件中引入pdf.js库。在需要使用PDF的组件中，可以使用import语句来引入pdf.js库。例如，在你的Vue组件的script标签中添加以下代码：

import pdfjsLib from 'pdfjs-dist'

3. 创建一个显示PDF的容器。在Vue模板中，添加一个用于显示PDF的容器元素，例如：

<div id="pdfContainer"></div>

4. 加载和显示PDF文件。在Vue组件的方法中，可以使用pdf.js库来加载和显示PDF文件。例如，在`mounted`生命周期钩子函数中添加以下代码：

mounted() {
  const container = document.getElementById('pdfContainer');
  const url = 'path/to/your/pdf/file.pdf';

  pdfjsLib.getDocument(url).promise.then(pdf => {
    // 加载成功后获取第一页
    pdf.getPage(1).then(page => {
      const canvas = document.createElement('canvas');
      container.appendChild(canvas);

      const context = canvas.getContext('2d');
      const viewport = page.getViewport({ scale: 1 });

      canvas.width = viewport.width;
      canvas.height = viewport.height;

      page.render({
        canvasContext: context,
        viewport: viewport
      });
    });
  });
}

这样就能在Vue中实现使用pdf.js库展示PDF文件的功能了。你可以根据需要进行进一步的定制和美化。