构建pdfjs-dist组件展示pdf

要构建一个展示PDF文档的pdfjs-dist组件，您可以按照以下步骤进行：

1. 在您的项目中安装pdfjs-dist依赖：

npm install pdfjs-dist --save

2. 创建一个名为PdfViewer的Vue组件：

<template>
  <div ref="pdfContainer"></div>
</template>

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

export default {
  name: 'PdfViewer',
  props: {
    url: {
      type: String,
      required: true
    }
  },
  mounted() {
    // 获取PDF文档
    pdfjsLib.getDocument(this.url).promise.then((pdf) => {
      // 获取第一页
      pdf.getPage(1).then((page) => {
        // 创建一个canvas元素，用于在其中呈现PDF页面的内容
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // 获取页面的viewport
        const viewport = page.getViewport(1.0);

        // 设置canvas元素的大小
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        // 渲染PDF页面内容到canvas元素中
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext).promise.then(() => {
          // 将canvas元素添加到HTML中
          this.$refs.pdfContainer.appendChild(canvas);
        });
      });
    });
  }
};
</script>

这个组件将通过props接收PDF文档的URL，并在mounted生命周期钩子函数中加载该文档，并将其第一页渲染在一个canvas元素中。

3. 在需要展示PDF文档的地方使用PdfViewer组件：

<template>
  <div>
    <PdfViewer :url="pdfUrl" />
  </div>
</template>

<script>
import PdfViewer from '@/components/PdfViewer.vue';

export default {
  name: 'App',
  components: {
    PdfViewer
  },
  data() {
    return {
      pdfUrl: 'path/to/pdf/document.pdf'
    };
  }
};
</script>

这将在页面上展示PDF文档。

注意：在使用pdfjs-dist时，需要在项目的vue.config.js文件中添加以下配置：

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('pdf')
      .test(/\.(pdf)(\?.*)?$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/pdf/[name].[hash:8].[ext]'
      })
      .end();
  }
};

这将允许您在Vue组件中使用相对路径引用PDF文档。例如：

<template>
  <div>
    <PdfViewer :url="pdfUrl" />
  </div>
</template>

<script>
import PdfViewer from '@/components/PdfViewer.vue';

export default {
  name: 'App',
  components: {
    PdfViewer
  },
  data() {
    return {
      pdfUrl: require('@/assets/pdf/document.pdf')
    };
  }
};
</script>

这将使用相对路径引用您的PDF文档。